Подтвердить что ты не робот

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

Есть ли способ получить флеш-память crappy Open Graph, чтобы проверить, соответствует ли мой doctype <!DOCTYPE html> (HTML5)?

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

Я действительно не хочу использовать <!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" />

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

<meta name="og:title" content="Hello Facebook" />

Ответ 2

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

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

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

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

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

Ответ 3

Да. Чтобы проверить как 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 validator.

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

Многие из ответов здесь устарели. Пожалуйста, не смотрите на заголовки или пишите через 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/) сделали атрибут "property" действительным и соответствующим. В то же время (поскольку более старые ответы здесь) валидатор http://validator.w3.org/check признает атрибут действительным. Кроме того, документация Open Graph Protocol, http://ogp.me/, была обновлена, чтобы отразить RDFa 1.1 (он использует атрибут "префикс" ).

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

В 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>

Ответ 10

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

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

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

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

Ответ 11

Я был бы склонен сказать, не волнуйтесь о проверке, я не верю, что наличие недопустимой отметки повредит вашему ранжированию в поисковых системах. например Технические рекомендации 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 файл, который будет проходить валидаторы.

Ответ 12

Хотя он отключит пользователей, не относящихся к 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.