Важные мета-теги для социальных сетей
Содержание:
Синтаксис разметки Open Graph
Полная документация по разметке Open Graph доступна в нескольких источниках:
- ogp.me — англоязычная документация;
- ruogp.me — документация на русском языке.
Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.
Также есть руководства по применению Open Graph для отдельных соцсетей:
По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.
Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.
Обязательные свойства
Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:
Как быть с размерами картинок
У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:
При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.
Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:
В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.
На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:
А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:
Опциональные свойства
Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:
Вот так description отображается в публикациях в Фейсбуке:
А так — в Телеграме:
А в Телеграме корректно подтягивается содержимое тега og:site_name:
Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Open Graph Meta Tags Conclusion
The final code for both Facebook and Twitter should look more-or-less like this:
It might seem a bit confusing, but luckily there are several tools that make the process easier — you don’t need to know how to code.
It’s surprising how few people optimize these tags. It’s worth doing because it helps you stand out and draw more clicks and views, and it can even help improve your SEO —all things that lead to more profit.
Have you implemented open graph meta tags? How has it impacted your site?
See How My Agency Can Drive Massive Amounts of Traffic to Your Website
- SEO — unlock massive amounts of SEO traffic. See real results.
- Content Marketing — our team creates epic content that will get shared, get links, and attract traffic.
- Paid Media — effective paid strategies with clear ROI.
Structured Properties
Some properties can have extra metadata attached to them.
These are specified in the same way as other metadata with and
, but the will have extra .
The property has some optional structured properties:
- — Identical to .
-
— An alternate url to use if the webpage requires
HTTPS. - — A MIME type for this image.
- — The number of pixels wide.
- — The number of pixels high.
- — A description of what is in the image (not a caption). If the page specifies an og:image it should specify .
A full image example:
The tag has the identical tags as . Here is an example:
The tag only has the first 3 properties available
(since size doesn’t make sense for sound):
Теги Open Graph
Протокол Open Graph формирует метатеги для Facebook по умолчанию. Другие ключевые социальные платформы, в том числе, LinkedIn, Google+ и Twitter тоже признали, что по умолчании пользуются этой разметкой. Это означает, что Twitter, LinkedIn и Google+ в большинстве случаев вытягивают заголовок, описание и изображение, указанное в тегах Open Graph.
Главные теги Open Graph:
| og:title | Title или альтернативный title страницы, который отображается в качестве заголовка |
| og:url | URL страницы |
| og:description | Описание страницы (Facebook показывает не более 300 символов |
| og:image | URL уникального изображения (рекомендуемое расширение 1200х630 пикселей) |
| og:type | Cтатья (по умолчанию «website») |
Чтобы посты в Facebook были с нужными вам заголовками, изображениями и описаниями, метатеги должны выглядеть так:
<meta property=”og:title” content=”The Always-Up-to-Date SEO Checklist from Bruce Clay, Inc.” />
<meta property=”og:url” content=”https://www.bruceclay.com/blog/seo-checklist/” />
<meta property=”og:description” content=”Just getting started optimizing websites? Here’s a time-tested SEO checklist to keep on-hand during your projects.” />
<meta property=”og:image” content=”https://www.bruceclay.com/blog/wp-content/uploads/2016/08/SEO-Checklist.jpg” />
<meta property=”og:type” content=”article” />
Чтобы убедиться в корректности конфигурации тегов Open Graph, используйте Facebook’s Open Graph Debugger – отладчик перепостов. После ввода URL в специальное поле, вы увидите информацию, которая используется при расшаривании URL через эту социальную платформу.
Совет:
При обновлении тегов Open Graph на странице, используйте Open Graph Debugger для форсирования подтягивания Facebook новых метатегов. В противном случае, платформа может вытащить из кэша старые теги.
Структурированные Свойства
Некоторые свойства могут иметь дополнительные метаданные, прикрепленные к ним.Они определены таким же образом как метаданные свойство и, но свойства будут иметь дополнительные.
Свойство тега og:image имеет несколько дополнительных структурированных свойств:
- og:image:url — Идентичный og:image.
- og:image:secure_url — Альтернативный url-адрес для использования в случае, если web-страница требует HTTPS.
- og:image:type — Типы MIME для изображения.
- og:image:width — Число пикселей в ширину.
- og:image:height — Число пикселей в высоту.
Пример структурированных свойств для изображения:
Код:
<meta property="og:image" content="http://example.com/ogp.jpg" /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" />
Свойство тега og:video имеет идентичные теги с og:image. Вот пример:
Код:
<meta property="og:video" content="http://example.com/movie.swf" /><meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />
Тег og:audio имеет только 3 доступных свойства (потому что, звук не имеет ширины и высоты):
Код:
<meta property="og:audio" content="http://example.com/sound.mp3" /><meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />
Шаг 2. Укажите свои социальные профили
Чтобы настроить карты Open Graph и Twitter, перейдите в раздел SEO-> Социальный из панели управления WordPress. Сначала добавьте ссылки на свои социальные профили, чтобы помочь поисковым системам подтвердить, что профили действительно подключены к вашему сайту. Затем перейдите к различным социальным вкладкам.
Ваш первый шаг – включить метаданные Open Graph для постов Facebook. Просто нажмите кнопку «Включено». Предполагаем, что вы уже добавили связанную с вами страницу Facebook на вкладке «Аккаунты». Вы можете добавить изображение по умолчанию, если хотите, чтобы на каких-либо страницах, на которых нет картинок, показывалось указанное изображение.
Настроив посты для Facebook, пришло время заняться Twitter. Просто убедитесь, что данные карты Twitter Enabled (Включено). Затем выберите макет карты по умолчанию (резюме или резюме с большим изображением). Опять же, это будет связано с тэгом Twitter, который вы добавили на странице «Аккаунты» .
Pinterest немного отличается, так как эта платформа использует проверку метатега. Перейдите в свою учетную запись Pinterest, наведите указатель мыши на свой значок пользователя и щелкните вкладку «Настройки». Нажмите кнопку «Заявка на сайт» и выберите опцию «Добавить HTML-тег». Скопируйте созданный метатег и вставьте его в панель Yoast SEO. Сохраните изменения, затем вернитесь к Pinterest для отправки.
Последним социальным аккаунтом, который вам нужно будет установить – Google+. Который является только ссылкой на + страницу вашего бизнеса. Вставьте ее, и все готово.
Установка значений по умолчанию
Последний шаг: необходимо определить некоторые значения по умолчанию. Yoast использует мета-поля в вашем контенте для определения данных Open Graph, поэтому не забудьте изменить значения по умолчанию в разделе SEO-> Внешний вид поиска-> Типы контента. Используйте встроенные переменные фрагмента Yoast SEO для создания собственных динамических значений по умолчанию для заголовка записи (который используется для og: title) и мета-описания (используется для og: description).
Пользовательское изображение, название и описание
Yoast SEO также включает опцию для отдельных постов для настройки изображения, названия и описания, используемых для Facebook и Twitter. При редактировании поста просто прокрутите страницу до Yoast SEO и нажмите на значок совместного доступа (он выглядит как символ < с жирными точками). Затем загрузите собственное изображение или отредактируйте заголовок и описание по мере необходимости.
Как с помощью расширения обнаружить статьи с мета-тегом?
Значок грустного робота на странице канала
При установленном расширении проверка главной страницы канала производится автоматически. Если канал отмечен как неиндексируемый, то в меню расширения пункт «Неиндексируемые» заменяется значением «Канал не индексируется».
Если в меню расширения в редакторе указано «Канал не индексируется», значит в коде страницы канала присутствует <meta property=»robots» content=»none» />
Ещё раз подчеркну, что наличие этого кода, а значит и соответствующего оповещения в меню — норма для новых каналов.
Значок «грустного робота» на странице публикации
При установленном расширении на странице публикации может отображаться значок грустного робота.
Если в публикации есть такой значок, значит в коде страницы есть <meta name=»robots» content=»noindex» />
Соответственно, для того чтобы его увидеть нужно зайти на страницу публикации. Но зато не нужно изучать исходный код страницы.
Поиск публикаций с мета-тегом
Если вы решите проверить не одну, а десяток публикаций, то придётся заходить в каждую и проверять наличие мета-тега в каждой из них. Вручную это неудобно, поэтому в расширении предусмотрена возможность автоматической проверки.
Для того чтобы начать поиск нужно выбрать пункт меню «Неиндексируемые».
Правда, этот пункт меню будет недоступен, если весь канал отмечен, как неиндексируемый — нет смысла запускать проверку, теги будут обнаружены на всех публикациях.
При первом запуске будет отображено большое страшное предупреждение о том, что процедура поиска производится на страх и риск пользователя.
Дело в том, что стандартной процедуры поиска публикаций с мета-тегом в Дзене не предусмотрено, и расширению приходится буквально открывать каждую проверяемую публикацию и заглядывать в код страницы.
Теоретически это может быть воспринято как DDOS-атака или как попытка накрутить просмотры. На практике с этим проблем не было, но предупредить я вас обязан.
Можно проверить все публикации на канале, а можно проверить лишь 20 последних.
Процедура поиска может занять продолжительное время, по завершении вы получите список публикаций, на которых обнаружен мета-тег.
На моём канале только на одной публикации есть этот мета-тег.
Кнопки «Поделиться в соцсетях» на сайте
Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.
Кнопки для репостов в социальные сети
Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.
Поделиться пином с рецептом
Веб-мастеру недостаточно просто установить кнопку «Поделиться в соцсети» для того, чтобы пользователь делился контентом с красивым превью. Картинка или заголовок можгут отображаться не так, как задумано.
Основные теги протокола Open Graph
Разметкой предусмотрено много свойств (тегов). Основные:
- og:title — заголовок, который характеризует страницу и отображается внешне.
- og:type — тип основного содержимого страницы. Например:
- видео: <meta property=’og:type’ content=»video.movie» />;
- музыка: <meta property=’og:type’ content=»music.song» />;
- статья: <meta property=’og:type’ content=»article» />.
- og:image — URL изображения, которое отобразится в предпоказе.
og:url — канонический URL веб-страницы. Он используется как идентификатор объекта (веб-страницы). Например:
<meta property=»og:url» content=»http://www.site.ru/example/» />
Пример кода, если задействовать только основные свойства:
Рассмотрим не основные, но важные и полезные теги при продвижении:
- og:site_name — задает имя сайта, которое отображается в предпоказе.
- og:description — описание страницы (элемент подгружается не всегда. Иногда, к примеру, Facebook может не показывать описание в превью).
Вот все теги, которые влияют на внешний вид предпросмотра:
Массивы
Если тег может иметь несколько значений, просто поставьте несколько таких тегов <meta> на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.
Код:
<meta property="og:image" content="http://example.com/rock.jpg" /><meta property="og:image" content="http://example.com/rock2.jpg" />
Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.
Пример:
Код:
<meta property="og:image" content="http://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image" content="http://example.com/rock2.jpg" /><meta property="og:image" content="http://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />
На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300x300px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000px в высоту.
Syntax
Return the name property:
metaObject.name
Set the name property:
metaObject.name = «application-name|author|description|generator|keywords»
| Value | Description |
|---|---|
| application-name | Specifies the name of the Web application that the page represents |
| author | Specifies the name of the author of the document. Example: <meta name=»author» content=»Hege Refsnes»> |
| description | Specifies a description of the page. Search engines can pick up this description to show with the results of searches. Example: <meta name=»description» content=»Free web tutorials»> |
| generator | Specifies one of the software packages used to generate the document (not used on hand-authored pages) Example: <meta name=»generator» content=»FrontPage 4.0″> |
| keywords | Specifies a comma-separated list of keywords — relevant to the page (Informs search engines what the page is about).Tip: Always specify keywords (needed by search engines to catalogize the page). Example: <meta name=»keywords» content=»HTML, meta tag, tag reference»> |
Типы Объектов
Для того что бы корректно отобразить объект в графе, необходимо задать ему тип. Это делается с помощью свойств: og:type
Код:
<meta property="og:type" content="website" />
Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма CURIEs
Код:
<head prefix="my_namespace: http://example.com/ns#"><meta property="og:type" content="my_namespace:my_type" />
Глобальные типы сгруппированы по вертикали. Каждый вертикальный тип имеет собственное пространство имен. Тип og:type значение имени всегда с префиксом пространства имен, а затем период.Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.
Пространство имён определяется URI: http://ogp.me/ns/music#
og:type значение:
- music:duration — >=1 — Длина песни в секундах.
- music:album — — Название альбома.
- music:album:disc — >=1 -Номер альбома на диске.
- music:album:track — >=1 -Номер трека в альбоме.
- music:musician — -Исполнитель песни.
- music:song — — Название песни в альбоме.
- music:song:disc — >=1 -Тоже самое что music:album:disc но в обратном значении.
- music:song:track — >=1 -Тоже самое что music:album:track но в обратном значении.
- music:musician — — Профайл музыканта, который создал эту песню.
- music:release_date — — Дату выпуска альбома.
- music:song — Идентично одному из
- music:song:disc
- music:song:track
- music:creator — — Создатель плейлиста.
music:creator — profile — Создатель Радио-станции.
URI пространства имен: http://ogp.me/ns/video#
og:type значение:
- video:actor — — Актеры в этом фильме.
- video:actor:role — — Роли актеров
- video:director — — Режиссеры фильма.
- video:writer — — Авторы фильма.
- video:duration — >=1 — Длина фильма в секундах.
- video:release_date — — Дата выхода фильма в прокат.
- video:tag — — Теги, связанные с этим фильмом.
- video:actor — Идентично
- video:actor:role
- video:director
- video:writer
- video:duration
- video:release_date
- video:tag
- video:series — — К какой серии этот эпизод принадлежит.
Если это сериал или ТВ-шоу, метаданные идентичны .
Видео, которое не относится ни к одной из категорий. Метаданные идентичны .
Это глобально-определеные объекты, которые просто не вписываются в вертикальные объекты, но всеже широко используются в Интернете.
og:type значение:
— Статья, пространство имён определяется URI: http://ogp.me/ns/article#
- article:published_time — — Когда статья была впервые опубликована.
- article:modified_time — — Когда статья была последний раз изменена.
- article:expiration_time — — Время истечения срока статьи.
- article:author — -Авторы статьи.
- article:section — — Название категории.
- article:tag — — Теги, связанные с этой статьей.
— Книга, пространство имён определяется URI: http://ogp.me/ns/book#
- book:author — — Кто написал эту книгу.
- book:isbn — — Международный стандартный книжный номер ISBN
- book:release_date — — Дата выпуска книги.
- book:tag — — Теги, связанные с этой книгой.
— Профайл, пространство имён определяется URI: http://ogp.me/ns/profile#
- profile:first_name — — Имя пользователя профайла.
- profile:last_name — — Фамилия пользователя профайла.
- profile:username — — Ник.
- profile:gender — — Пол (мужской, женский).
— Web-сайт, пространство имён определяется URI: http://ogp.me/ns/website#
Никаких дополнительных свойств, отличных от базовых. Любая не размеченная web-страницы должна рассматриваться как og:type web-сайт.
Разметка Twitter Card
Twitter Cards позволяет прикрепить к твитам фотографии или видео с помощью всего нескольких строк кода. Есть несколько типов Twitter Cards, но Summary Cards и Photo Summary Cards наиболее используемые.
Основные теги разметки для Twitter:
| Тип карточки, который вы используете |
| Title или альтернативный title страницы, отображаемый в заголовке |
| URL страницы |
| Короткое описание (менее 200 символов) |
| URL уникального изображения (рекомендуемое расширение не менее 440×220 пикселей) |
Метатеги для Twitter могут выглядеть следующим образом:
<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:title” content=” The Always-Up-to-Date SEO Checklist from @BruceClayInc” />
<meta name=”twitter:url” content=”https://www.bruceclay.com/blog/seo-checklist/” />
<meta name=”twitter:description” content=”Just getting started optimizing websites? Here’s a time-tested SEO checklist to keep on-hand during your projects.” />
<meta name=”twitter:image” content=”https://www.bruceclay.com/blog/wp-content/uploads/2016/08/SEO-Checklist.jpg” />
Как и в Facebook, здесь есть возможность узнать, как ваша страница будет выглядеть при вставке в твит. Все, что для этого нужно – ввести URL в валидатор Twitter Card и в режиме предварительного просмотра убедиться, что вы настроили размету для социальных сетей правильно.
Совет
Если вы обновите теги Twitter Cards, используйте валидатор для форсирования подтягивания новых тегов.
Добавляем разметку с помощью плагинов
Плагин All in One SEO Pack
Этим плагином пользуюсь я на своем блоге. Его можно скачать здесь. Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.
Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить»
Самое важное для нас — в настройках само́й статьи или страницы блога. Выглядят эти настройки вот так:
Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title»
На сколько хорошо работает этот плагин, вы можете проверить, нажав на кнопку «Мне нравится» под этой статьёй. После этого на вашей стене Facebook появится первая картинка статьи и заголовок + описание, которые вы видели чуть выше на скриншоте. Переходим ко второму варианту.
Плагин Facebook Open Graph Meta
Этот вариант также прост как и предыдущий. Вы скачиваете этот плагин здесь(работу плагина я проверил, и также я знаю, что его автор — опытный разработчик, который ведёт свою страницу на Facebook), также как и в первом варианте загружаете на блог через панель управления и активируете. Я подробно остановлюсь на настройках этого плагина.
В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:
Первое поле «App Id» можете пропустить. Во второе поле «Admins» вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:
на
Скопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).
После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.
Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу . Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней».
Последний важный шаг. Вам необходимо вручную заменить тег <html> в файле header.php на этот код:
В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег <html> (на скриншоте ниже), который надо заменить и сохранить изменения.
После этих действий плагин полностью готов к работе. Проверьте его действие, зайдя у себя в любую статью и нажав «Мне нравится». Потом посмотрите, какая информация появилась на вашей стене в Facebook.
Properties
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:title | any text | The Rock | required | after a page receives 50 likes the title becomes unchangeable | |
| og:type | see below | required | after a page receives 10,000 likes the type becomes unchangeable | ||
| og:url | «proper»/canonical format for URL of current page | fully qualified URL | required | ||
| og:image | image to associate with the content of the page | fully qualified URL | required | ||
| og:site_name | human readable name of the website this page is contained in | any text | IMDb | required | |
| fb:admins | comma separated list of users who should have administrative access to any Facebook pages created about this web page | comma separated list of Facebook user ids | required if no defined | ||
| fb:app_id | Facebook ID for an application that owns this page | Facebook application ID | 118381521562237 | required if no defined | |
| og:description | description of the page | any text |
Locations
adding latitude and longitude coordinates
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:latitude | 37.416343 | ||||
| og:longitude | -122.153013 |
adding a «human» readable address
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:street-address | 1601 S California Ave | none | |||
| og:locality | Palo Alto | none | |||
| og:region | CA | none | |||
| og:postal-code | 94304 | none | |||
| og:country-name | USA | none |
Contact Information
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:email | me@example.com | none | |||
| og:phone_number | +1-650-123-4567 | none | |||
| og:fax_number | +1-415-123-4567 | none |
Videos
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:video | fully qualified URL to a SWF video | none | Facebook supports embedding video in SWF format only. You must include a valid og:image for your video to be displayed in the news feed. | ||
| og:video:width | pixel width of video described in og:video | integer ≤ 398 | 385 | must have og:video | |
| og:video:height | pixel height of video described in og:video | integer ≤ 460 | 400 | must have og:video | |
| og:video:type | mime-type of video file described in og:video | application/x-shockwave-flash | must have og:video |
Audio
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:audio | fully qualified URL to an audio file | none | not sure what all formats are supported beyond mp3 | ||
| og:audio:title | title of audio described in og:audio | any text | «Amazing Soft Rock Ballad» | must have og:audio | |
| og:audio:artist | pixel height of audio described in og:audio | any text | «Amazing Band» | must have og:audio | |
| og:audio:album | mime-type of audio described in og:audio | any text | «Amazing Album» | must have og:audio | |
| og:audio:type | mime-type of audio file described in og:audio | any text | «application/mp3» | must have og:audio |
Others
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:upc | UPC code of the item | none | may be an expectation of og:type being one under «Products and Entertainment» | ||
| og:isbn | ISBN code of book if describing a book | «978-0470878040» | none | may be an expectation of og:type being one under «Products and Entertainment» |
