Проверка открытого графика для HTML5 - PullRequest
Новая
       8

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

57 голосов
/ 28 июня 2011

Есть ли способ получить хитрые метатеги Open Graph на Facebook для проверки, если мой тип документа <!DOCTYPE html> (HTML5)?

Кроме мета-тегов Open Graph на Facebook, мой документ проверяется отлично.

Я действительно не хочу использовать <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">, поскольку это создает целый новый набор проблем.

Вот пример одной из рассматриваемых ошибок проверки ...

Строка ошибки 11, столбец 47: в данный момент свойство атрибута не разрешено для мета-элемента. 

<meta property="og:type" content="website" />

Любая помощь приветствуется ... Я искал и включал в течение нескольких дней безрезультатно.

Ответы [ 12 ]

12 голосов
/ 30 августа 2014

Да . Чтобы подтвердить правильность HTML5, добавьте атрибут prefix из документов Open Graph : 

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>

Скопируйте и вставьте вышеуказанное в w3 валидатор для проверки.

Готов к производству - Apple использует этот метод на apple.com .

12 голосов
/ 20 января 2012

Для HTML5 добавьте это к вашему html элементу , как описано в ogp.me , и оставьте для своего og: префиксного свойства: 

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
     <meta property="og:type" content="website" />
     ...

Для XHTML (как вопрос ОП), используйте атрибут name вместо атрибута property.Facebook lint выдаст предупреждение, но мета-значение все равно будет распознано и проанализировано.

<meta name="og:title" content="Hello Facebook" />
11 голосов
/ 23 февраля 2012

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

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

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

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

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

5 голосов
/ 16 ноября 2011

Эти метатеги требуются, только когда 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.

4 голосов
/ 11 января 2014

Одним из недавних решений является регистрация префикса в теге 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#">

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

4 голосов
/ 08 августа 2013

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

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

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

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

4 голосов
/ 11 февраля 2012

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

В 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. Но мне действительно не нравится эта идея!

2 голосов
/ 16 сентября 2011

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

Обтекание как кнопок и тому подобное в скрипте помогает проверить XHTML 1.0, но не HTML5.

1 голос
/ 31 января 2012

В 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>
0 голосов
/ 24 мая 2013

Ну, 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-эквивалента", "charset" или атрибуты "itemprop") недопустимы. Однако их валидатор проверяет это (???). У меня нет объяснения этому расхождению.

Страница:
...