OpenGraph на веб-сайте Ajax - PullRequest
Новая
       3

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

14 голосов
/ 17 января 2012

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

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

Ответы [ 3 ]

52 голосов
/ 17 января 2012

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

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

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

При запросе к этим URL-адресам, если вы видите входящую строку useragent, содержащую 'facebookexternalhit', вы визуализируете HTML. Если вы этого не сделаете, вы обслуживаете 302, который перенаправляет на ваш адрес 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, которые все используют этот шаблон проектирования.

32 голосов
/ 22 февраля 2013

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

Допустим, вы создали приложение с хешем, которое выглядит следующим образом: 

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

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

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

Сценарий 

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

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

0 голосов
/ 17 мая 2016

Я провел быстрый тест, который, кажется, работает. В зависимости от того, что 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>
...