Ошибка открытого графика Facebook - предполагаемое свойство
Я пытаюсь реализовать протокол OpenGRaph на своих страницах продукта.
На каждой странице у меня есть это над разделом заголовка:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Тогда в разделе головы у меня есть:
<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="hello@mywebaddress.com"/>
<meta property="og:description" content="Description of my product."/>
Затем у меня есть кнопка "Мне нравится" с этим кодом:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://thispagesurl" data-send="true" data-width="350" data-show-faces="false"></div>
На мой взгляд, все похоже на то, что можно найти на странице разработчиков Facebook, но когда мне "нравится", Facebook, похоже, только поднимает заголовок страницы и общую информацию.
Я попытался "отладить" страницу, используя их объектный отладчик, и я получаю эти предупреждения:
Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:title property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
Насколько я могу судить, я следовал инструкциям Facebook к письму, но у меня нет радости. Кто-нибудь может указать, если я делаю что-то не так?
Спасибо заранее, Дэн
7 ответов
Эти теги на "http://www.mywebaddress.com"?
Имейте в виду, что линтер будет следовать тегу og:url, так как этот тег должен указывать на канонический URL-адрес фрагмента содержимого - поэтому, если у вас есть страница, например, "http://mywebaddress.com/article1" с og:url тег, указывающий на "http://mywebaddress.com", туда пойдет Facebook и прочитает теги.
В противном случае наиболее распространенная причина, по которой я видел правильные теги, которые не были обнаружены линтером, заключается в обнаружении агентом пользователя, возвращающим на сканер Facebook другой контент, нежели тот, который вы видите при проверке вручную.
Вам нужен пробел после окончательного набора кавычек
<meta property="og:url" content="http://www.mywebaddress.com"/>
Должно быть.. нравится этот
<meta property="og:url" content="http://www.mywebaddress.com" />
Существует некоторая путаница с тоннами инструментов и документации Facebook. Так много людей, вероятно, используют инструмент Sharing Debugger для проверки своей разметки OpenGraph: https://developers.facebook.com/tools/debug/sharing/
Но он только получает информацию о вашем сайте из кэша Facebook. Это означает, что после изменения разметки ogp на вашем сайте отладчик общего доступа будет по-прежнему использовать старые кэшированные данные. Более того, если на сервере Facebook нет кэшированных данных, то Sharing Debugger покажет вам ошибку: This URL hasn't been shared on Facebook before.
Итак, решение состоит в том, чтобы использовать другой инструмент - Open Graph Object Debugger: https://developers.facebook.com/tools/debug/og/object/
Это позволяет вам выбирать новую информацию для очистки и обновлять кеш Facebook:
Честно говоря, я не знаю, как найти этот инструмент, исследуя раздел Tools & Support на developers.facebook.com - я не могу найти никаких ссылок и упоминаний. У меня есть только этот инструмент в моих закладках. Это Фейсбук:)
Используйте 'property'-attrs
Я также отметил, что некоторые разработчики используют name атрибут вместо property, Многие парсеры, вероятно, будут правильно обрабатывать такие теги, но в соответствии с протоколом Open Graph, мы должны использовать property не name:
<meta property="og:url" content="http://www.mywebaddress.com"/>
Используйте полные URL
Последняя рекомендация - указывать полные URL. Например, Facebook жалуется, когда вы используете относительный URL в og:image, Так что используйте полный:
<meta property="og:image" content="http://www.mywebaddress.com/myimage.jpg"/>
На случай, если кому-нибудь поможет, у меня была такая же ошибка. Оказывается, моя страница некоторое время не удалялась Facebook, и это была старая ошибка. На странице, которая это исправила, была кнопка очистки.
Это может помочь некоторым людям, которые изо всех сил пытаются заставить Facebook читать Open Graph красиво...
Посмотрите на исходный код, который генерируется браузером с использованием Firefox, Chrome или другого настольного браузера (многие мобильные устройства не поддерживают просмотр исходного кода) и убедитесь, что перед строкой doctype или тегом head нет пустых строк... Если есть Это Facebook будет иметь полную истерику и выбросить свои игрушки из коляски! (Лучшее описание!) Удалить пустую строку - счастливый Facebook... У меня ушло около 1,5 - 2 часов, чтобы определить это!
В моем случае неожиданное уведомление об ошибке в исходном коде остановило поисковый робот facebook от синтаксического анализа (правильно установленных) тегов og-meta.
Я использовал HTTP_ACCEPT_LANGUAGE header, который отлично работал для обычных запросов браузера, но не для сканера, поскольку он, очевидно, не будет использовать / устанавливать его.
Поэтому для меня было крайне важно использовать функцию отладчика facebook. See exactly what our scraper sees for your URL, поскольку уведомление об ошибке можно было увидеть только там (но не через обычную функцию просмотра исходного кода в браузере).
Если вы укажете не на то изображение или путь к файлу образа неверен, вы увидите следующие три ошибки:
Bad Response Code: URL returned a bad HTTP response code.
Inferred Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Missing Properties: The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
В моем случае все, что было не так, это то, что у меня был неправильный путь к
og:image - как только я поправил, все эти проблемы сразу исчезли.