OpenGraph на веб-сайте Ajax

У меня есть веб-сайт, который полностью Ajax-based (Hash Navigation).

Есть ли способ обновить метатеги Open Graph для веб-сайтов, основанных на ajax, с использованием Javascript? (Когда я нажимаю ссылку, теги и там значения должны меняться)

Ответы

Ответ 1

Нет. Разметка Open Graph должна присутствовать на HTML-страницах, которые GETable с чистым HTTP.

Это связано с тем, что, когда пользователь взаимодействует с объектом OG (например, выполняет действие и т.д.), Facebook будет выполнять HTTP GET на URL OG и ожидать увидеть метки OG, возвращенные в разметке.

Решение состоит в создании канонических URL-адресов для каждого из ваших объектов. Эти URL-адреса содержат основную разметку HTML, включая теги OG.

При запросах к этим URL-адресам, если вы видите строку входящего пользователя, содержащую "facebookexternalhit", вы визуализируете HTML. Если вы этого не сделаете, вы обслуживаете 302, который перенаправляет ваш URL-адрес ajax. На URL-адресах ajax ваши похожие кнопки и любые опубликованные вами действия OG должны указывать на объект канонического URL-адреса

Пример:

Как пользователь, я нахожусь http://yoursite.com/#!/artists/monet. Я нажимаю подобную кнопку или публикую действие, но, например, параметр href кнопки или URL-адрес объекта, когда вы публикуете действие, должен быть веб-конкретизируемым каноническим URL-адресом для объекта - в данном случае, возможно, http://yoursite.com/artists/monet

Когда пользователь, использующий браузер, попадает в http://yoursite.com/artists/monet, вы должны перенаправить их на http://yoursite.com/#!/artists/monet, но если входящий пользовательский агент говорит, что это скребок Facebook, вы просто возвращаете разметку, которая представляет художника Моне.

Для примеров с реальным миром см. Deezer, Rdio и Mog, которые используют этот шаблон дизайна.

Ответ 2

Немного больше исследований приводит к следующим выводам:

Скажем, вы создали приложение с хешем, которое выглядит так:

http://yoursite.com/#/artists/monet

Скребок Facebook будет называть ваш URL без части /#/artists/monet. Это проблема, потому что у вас нет способа узнать, какую информацию вы должны анализировать в meta og: tags.

Затем попробуйте то же самое с предлагаемым URL-адресом, как говорит Саймон:

http://yoursite.com/#!/artists/monet

Теперь вы заметите, что скребок Facebook соблюдает спецификации google ajax, и он преобразует #! в ?_escaped_fragment_=, поэтому URL-адрес выглядит следующим образом:

http://yoursite.com/?_escaped_fragment_=/artists/monet

Вы можете проверить это самостоятельно с помощью отладчика facebook: https://developers.facebook.com/tools/debug

  • Загрузите php script на ваш сервер
  • перейдите в отладчик facebook
  • введите URL-адрес с /#/ частью
  • нажмите "Посмотрите, что наш скребок видит для вашего URL" - нет хеш-фрагмента
  • снова введите URL-адрес с помощью /#!/
  • нажмите "Посмотрите, что наш скребок видит для вашего URL" - фрагмент хеширования был преобразован в
    ?_escaped_fragment_=

script

<html>
  <head>
    <title>Scraping</title>
  </head>
  <body>
    <?
      print_r($_SERVER);
    ?>
  </body>
</html>

Или суммируется: всегда используйте /#!/ (hashbang) deeplinks;)

Ответ 3

Я провел быстрый тест, который, похоже, работает. В зависимости от того, что скребок FB не запускает JavaScript.

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

Если вы поделитесь http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test

Facebook очистит метатеги тестовой страницы, когда пользователь нажимает на ссылку, которую JS перенаправляет на /#/test для моего приложения на одной странице, чтобы реагировать и представлять правильный вид.

Кажется хаки, но работает;   

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>This is a shared item</title>
</head>
<body>
    <h1>This is a shared item page.</h1>
    <script>
        var path = window.location.pathname;
        window.location = '/#' + path;
    </script>
</body>
</html>