Использование открытого графика в одностраничном приложении (совместное использование с FB, G +, twitter)

Я использую нокаут для моего одностраничного приложения (есть только одна точка входа в приложение, и вид приложения меняется, делая аякс-вызовы и изменяя страницу).

В моем приложении я хотел бы, чтобы люди использовали возможность совместного использования страниц через fb, twitter, g+. В стандартном приложении я бы сделал что-то вроде этого:

<meta property="og:title" content="page title" />
.. other things like url, image ..

И люди, которые поделились страницей на fb, получат приятное название страницы. Но в SPA мой заголовок создается в начале и тем не менее я изменяю его с помощью JS: $('meta[name="og:title"]').attr('content', 'new title'); все социальные сети берут старый контент (который ожидается и он написан в этих ресурсы).

Мое приложение использует JS-маршрутизацию, поэтому каждая другая страница имеет свой собственный адрес: http://domain.com/#!route/123. Читая два похожих вопроса, я получил противоречивые ответы:

Конечно, второй будет работать только для FB.

Мой вопрос: есть ли какие-либо улучшения в 2014 году в том, как механизмы анализируют открытую информацию о графике и можно ли ее правильно использовать в одностраничном приложении. В частности, я заинтересован в том, чтобы красиво делиться содержимым на FB, twitter, G +.

Ответы

Ответ 1

Я работаю в предположении, что вы понимаете, что теги og должны отображаться на сервере (т.е. они не требуют JS, если вы используете источник просмотра, они все еще должны быть там).

Рендеринг на стороне сервера

Ваш первый и лучший вариант - использовать рендеринг на стороне сервера для вставки метатегов og при загрузке страницы. Чтобы сделать это, вам нужно переключиться на маршрутизацию HTML5 (pushState/replaceState) вместо hashbang (#!), так как хеш не читается через сервер. Затем вы должны продублировать свои маршруты для страниц, для которых вы хотите иметь метатеги, и обслуживать свое приложение так же, как в настоящее время, только с предварительно заполненными метатегами.

Явная ссылка для совместного использования

В качестве альтернативы вы можете указать, чтобы ваши кнопки общего доступа указывали на кнопки общего доступа ссылку, указывающую на страницу, на которой нет ничего, кроме мета-тегов и перенаправления.

Например, кнопка "Поделиться":

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"></script>

<div class="fb-share-button" data-href="#" onclick="location.href='https://example.com/articles/some-article/share'; return false;" data-layout="button" data-size="small"><a target="_blank" href="#" onclick="location.href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticles%2Fsome-article%2Fshare&amp;src=sdkpreparse'; return false;" class="fb-xfbml-parse-ignore">Share</a></div>

(согласно документации Facebook, но этот подход теоретически будет работать с любым социальным сервисом)

с критическими битами, являющимися атрибутом data-href и параметром строки запроса u атрибута href. Эта страница будет выглядеть следующим образом:

<!html>
  <meta property="og:title" content="page title">
  <script>
    document.location.href = 'https://example.com/articles/some-article'
  </script>
</html>

Однако у этого подхода есть несколько недостатков:

  • копирование/вставка URL-адреса непосредственно из браузера приведет к отсутствию мета-тегов. Вы могли бы обнаружить, что пользовательские агенты на сервере перенаправляют на /share, автоматически делая это несоответствующим, но это также потребует перехода на маршрутизацию HTML5, и в этом случае вы также можете использовать первое решение
  • портит поведение кнопки назад. Ваши пользователи окажутся в ситуации, когда им придется дважды щелкнуть по кнопке "Назад", чтобы вернуться на страницу, на которой они изначально находились, до перехода по общей ссылке.
  • нужна кнопка для каждой социальной службы (или перенаправления на основе пользовательского агента, как указано выше)

Считайте, что это решение "да, это работает, но на самом деле это не очень хорошая идея".

Prerender.io

Последнее (и самое простое) решение - использовать что-то вроде prerender.io. Я никогда не использовал его лично, поэтому, где мой вклад заканчивается этим, но стоит упомянуть, поскольку это именно тот сценарий, для которого он был создан.