Поддержка HTML5 и RDFa - PullRequest
Новая
       39

Поддержка HTML5 и RDFa

9 голосов
/ 14 ноября 2010

Я собираюсь представить протокол Open Graph в существующем веб-приложении HTML5, и я хотел бы включить необходимые данные RDFa, не вводя лишних слов.

Я посмотрел на черновик HTML + RDFa 1.1 и сравнил его с документацией протокола Open Graph Facebook , мне просто нужно установить атрибут lang на html элемент и он готов к HTML5: 

<html lang="en">
<head xmlns:og="http://opengraphprotocol.org/schema/">
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    ...

Изначально я растерялся из-за поддержки RDFa в HTML5, так как многие источники утверждали, что это невозможно сделать корректным способом, пока я наконец не попал на черновик. Я не специалист по рассматриваемым вопросам, поэтому я был бы признателен, если бы кто-то мог взглянуть на это и также прокомментировать поддержку, которую черновик получает в современных браузерах.

Ответы [ 5 ]

16 голосов
/ 18 марта 2011

Валидатор W3C стонет о каждом 

<meta property="whatever" content...

, требуя, чтобы это свойство было 

<meta name="whatever ...

, верно?Если Facebook - то, что вас больше всего волнует, я рад сообщить, что он переносит последнюю форму, поэтому просто сделайте это: 

<meta name="og:title" content="My nice picture"/>
<meta name="og:type" content="article"/>
<meta name="og:url" content="http://foobar123.com/test/simple.php"/>

При тестировании с FB: Осторожно ,что FB кэширует парсинги страниц (глобально, на стороне Facebook, жесткая перезагрузка не поможет), поэтому обязательно добавляйте «уникальную» (но бессмысленную) информацию пути или GET-параметр в URL каждый раз, когда вы что-то изменяете для проверки публикации на Facebookоб этом: 

mysite.com/test.php/bogusParam1
mysite.com/test.php/bogusParam2
mysite.com/test.php/bogusParam3
...
mysite.com/test.php?foo=hello
mysite.com/test.php?foo=howdy
mysite.com/test.php?foo=aloha
6 голосов
/ 25 января 2011

Как HTML5, так и HTML + RDFa 1.1 все еще находятся в разработке, это означает, что все, что мы говорим ей сейчас, может быть изменено. Есть две стороны ваших вопросов:

  • Это действительно?
  • Это создаст проблемы совместимости?

Для достоверности вы можете регулярно проверять состояние реализации спецификаций в W3C validator . В него встроен экспериментальный валидатор HTML5.

Пространства имен в HTML5 все еще в значительной степени обсуждаются. Они создают проблемы, ведущие к тому, что DOM отличается от того, что на самом деле предназначено, что приводит ко второму моему вопросу: проблемам совместимости. Вы можете проверить, как обрабатывается разметка, с помощью Live Dom Viewer или использовать что-то вроде Opera Dragonfly , чтобы изучить DOM-представление документа в браузере.

Если вы хотите немного больше изучить тему HTML5 DOM и RDFa, вы можете прочитать сообщение в блоге Дженни .

Пока что ваша разметка на самом деле не является проблемой, но если вы используете javascript, вам нужно быть осторожным с пространствами имен и значениями с колонками.

2 голосов
/ 04 апреля 2011

Похоже, что в этом проекте за 2009 год предпринимается попытка построить схему, которая подходит для обоих.

http://dev.w3.org/html5/rdfa/rdfa-module.html

1 голос
/ 13 августа 2013

Теперь дни, валидатор HTML5 и Facebook поддерживают HTML + RDFa 1.1, так что теперь вы можете просто использовать свойство вместо имени. Вам также не нужно связываться с объявлениями xmlns в html5. Префикс og определен в спецификации (RDFa), поэтому вам не нужно его определять. Вы можете явно сказать prefix="og: http://ogp.me/ns#" в теге html или head.

1 голос
/ 01 августа 2012

Это основной способ сделать в html5: 

    <meta property="http://ogp.me/ns#locale" content="en_US" />
<meta property="http://ogp.me/ns#site_name" content="xxxxxx" />
<meta property="http://ogp.me/ns#type" content="website" />
<meta property="http://ogp.me/ns#title" content="xxxxxxxxxxxx" />
<meta property="http://ogp.me/ns#description" content="xxxxxxxxxxxxxxxx" />
<meta property="http://ogp.me/ns/fb#app_id" content="xxxxxxxxxxxxxxxx" />

... и т.д. надеюсь, это поможет

...