Открытая проверка графика для HTML5

короткий ответ: Нет, не в этот раз. Все остальные ответы-это обходные пути, хаки или просто сумасшедшие. Единственным долгосрочным решением является то, что Facebook необходимо создать альтернативный синтаксис, который является допустимым HTML5.

для тех, кто рекомендует таргетинг на Facebook с помощью пользовательского агента "facebookexternalhit", вы должны помнить, что другие компании следуют примеру Facebook с этими тегами. Например, Google+ вернется к тегам OpenGraph, если они предпочтительны Schema.org разметки нет. Так как большинство сайтов не используют Schema.org атрибуты (особенно если они тратят время на правильное использование OpenGraph), вы можете легко пропустить улучшение своих фрагментов на таких сайтах, как Google+, следуя этому совету.

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

для наших основных сайтов мы застряли с XHTML+RDFa для проверки ради, и это работает достаточно хорошо. Я надеюсь, что по мере роста использования HTML5 команда Facebook начнет принимать допустимый формат для этих метаданных.

что касается того, почему мы заботимся о проверки: Мы обнаружили, что проверка, когда это возможно, помогает предупредить нас об ошибках на наших страницах, не уча нас игнорировать их. Поскольку все мы используем расширения проверки в наших браузерах, мы мгновенно узнаем, есть ли ошибка проверки (или предупреждение) на странице, и можем исследовать, можно ли ее устранить (что 99+% времени). Это экономит нам время, связанное с ограничительными реализациями спецификаций, особенно на периферийных и мобильных платформах в настоящее время. Мы видели огромное сокращение нечетных ошибок, потому что мы в курсе наши страницы действительны и знают, что происходит в браузере не имеет отношения к недопустимой разметке, которую конкретный UA может не интерпретировать, как ожидалось.

Да. Чтобы проверить как HTML5, добавьте

эти мета-теги требуются только тогда, когда facebook сканирует страницу на наличие этих тегов.

    <? 
    if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){

      echo '<meta property="og:type" content=xxxxxxxxxxxxx';
      // continue with the other open graph tags
    }
   ?>

указанные теги будут присутствовать только тогда, когда они нужны facebook - этот метод с PHP удаляет их полностью для всех других экземпляров, включая проверку W3C.

прошло больше года, и лучшее решение, которое у нас есть,-это обернуть мета-теги в какую-то проверку на стороне сервера.

в PHP я сделал:

<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
  <meta property="og:title" content="Title of the page" />
  <meta property="og:url" content="http://www.example.com/" />
  <meta property="og:type" content="website" />
  <meta property="fb:admins" content="123456789" />
  <meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>

Это действительно работает для Facebook. Но мне действительно не нравится эта идея!

многие ответы здесь устарели. Пожалуйста, не вынюхивайте заголовки или не пишите через JavaScript (поскольку процессоры могут не оценивать JS).

рекомендации W3C (расширения к HTML5) вызвали RDFa 1.1 и RDFa Lite 1.1 (см. http://www.w3.org/TR/rdfa-lite/ и http://www.w3.org/TR/rdfa-primer/) сделали атрибут "свойство" действительным и соответствующим. В то же время (так как старые ответы здесь) валидатор http://validator.w3.org/check распознает атрибут как действительный. Кроме того, документация протокола Open Graph,http://ogp.me/, был обновлен, чтобы отразить RDFa 1.1 (он использует атрибут "префикс").

работа W3C была сделана с входным сигналом от OpenGraph и schema.org среди прочего, чтобы решить вопрос, поднятый этим вопросом.

короче говоря, убедитесь, что ваши теги OG соответствуют RDFa, и вы Золотой.

одним из последних решений является регистрация префикса в теге html или head:

<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

или

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

принято от здесь - извините, страница на немецком языке...

плохое решение для метатегов. Если вы обернете их в Javascript, то Facebook Linter не найдет их. Это то же самое, что вообще не вставлять их.

обертывание как кнопки и такие в скрипте работает, чтобы помочь проверить против XHTML 1.0, но не HTML5.

в JSP:

<%
  String ua=request.getHeader("user-agent").toLowerCase();
  if(ua.matches(".*facebookexternalhit.*")){
  }
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
  }
%>

или:

<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
  <meta property="og:image" content="images/facebook.jpg" />
  ...
</c:if>

Ну, Visual Studio 2011 говорит мне, что атрибут" свойство " является недопустимым. Однако консорциум W3C, кажется, быть немного более снисходительными:

http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F

вы заметите, что я добавил Теги Open Graph в соответствии с рекомендацией Facebook на этот сайт, и это не нарушает валидатор W3C, который я считаю авторитетным.

консультации с чиновником W3C HTML5 спецификация для мета-тега, очевидно, что использование атрибута " property "(вместо атрибутов" name"," http-equiv"," charset "или" itemprop") недопустимо. Однако, их валидатор проверяет его (???). У меня нет объяснения этому несоответствию.

Я был бы склонен сказать, не беспокойтесь о проверке, я не считаю, что наличие недействительной отметки повредит вашему рейтингу в поисковой системе. например, технические рекомендации googles не упоминают стандарты. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 позволяет вам предоставлять дополнительную информацию поисковым системам, которые они могут затем использовать, но я не могу видеть их рейтинг вниз на основе не проверки.

однако, если вы чувствуете, что это помогает вам проверить вы можете использовать

<script>document.write('<meta property="og:type" content="website" />')</script>

эти теги и HTML-файл, который будет проходить валидаторы.

хотя это будет отрезать не-Javascript пользователей, я использовал это

<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="" send="false" layout="button_count" width="100" show_faces="true" font=""></fb:like>')
//]]>
</script>

и это прекрасно проверяется. Он показывает и отлично работает с Firefox, Opera, IE, Chrome, Safari на Windows и с Firefox, Opera, Safari на Mac.