От автора: не бывает двух одинаковых макетов сайтов. Социальным сетям типа Facebook бывает довольно сложно найти правильную часть информации в контенте, которую необходимо отображать при репосте страницы в новостной ленте. Вот тут нам и поможет Open Graph Protocol (OGP). Проект разработки Facebook, который легко распознает веб-контент и нормально отображает его на платформе Facebook.
Разберем следующий пример:
Страница отрендерена в ленте Facebook без мета тегов Open Graph
Неплохой предпросмотр контента в ленте Facebook, есть заголовок и краткий текст статьи. Однако если мы посмотрим на контент на нашей странице с демо, там используется больше элементов: изображения и имя автора. Facebook без помощи такие детали не вытянет.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееПоэтому давайте посмотрим, как с помощью Open Graph можно улучшить представление контента на Facebook.
Использование Open Graph
Open Graph задает ряд мета тегов с мета информацией о контенте, точно так же как в мета тегах, которые мы прописываем для поисковиков при стандартной SEO оптимизации. Перед добавлением мета тегов нам необходимо задать XML Namespace для Open Graph в html.
| 1 2 3 4 5 6 7 | <!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"> <head></head> <body></body> </html> |
Концепция пространства имен в HTML работает почти, как в других языках программирования. Пространство имен убирает двусмысленность в структуре данных. Оно определяет, какие семантические словари или синтаксис использовать, когда в документ вводится пространство имен. В нашем случае пространство имен og относится к Open Graph Protocol, а fb относится к спецификации Facebook Open Graph.
Можно пойти по другому пути и использовать атрибут prefix для задания пространств имен. К примеру:
| 1 2 3 4 5 | <!DOCTYPE html> <html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <head></head> <body></body> </html> |
Добавляем мета теги Open Graph
Для Facebook необходимо добавить несколько тегов, которые будут в коде все время.
Тип контента
Первый – тип контента, задается через свойство og:type. На домашней странице задаем стандартное значение website.
| 1 | <meta property="og:type" content="website" /> |
Для контента указывает article.
| 1 | <meta property="og:type" content="article" /> |
В мета теге og:type можно указать множество других значений, если ваш контент не подходит под типичную статью из блога или новости: product, place, video.movie, books.book и т.д. К примеру:
| 1 2 3 4 5 6 7 8 | <!-- Product Type: можно использовать в интернет-магазинах. --> <meta property="og:type" content="product" /> <!-- Place Type: можно использовать на сайтах о путешествиях. --> <meta property="og:type" content="place" /> <!-- Movie Type: можно использовать на сайтах с обзорами на фильмы типа iMDB или стриминговых сервисов типа Netflix. --> <meta property="og:type" content="video.movie" /> |
Мета URL
URL контента, заданный через свойство og:url, должен быть абсолютным, без строк запросов или хешей, как в канонической ссылке. На домашней странице URL будет таким:
| 1 | <meta property="og:url" content="https://tutsplus.github.io/" /> |
URL контента будет немного длиннее:
| 1 | <meta property="og:url" content="https://tutsplus.github.io/open-graph-protocol/" /> |
Мета заголовок
Мета заголовок, заданный через свойство og:title, отвечает за заголовок в превью. Значение заголовка может отличаться от значения тега title. Заголовок можно изменить или сократить для репоста.
К примеру, контент нашей страницы о CSS, и он имеет заголовок для социальных сетей «Learn CSS: The Complete Guide». Однако заголовок документа — «Open Graph Protocol — Tuts+», поэтому:
| 1 | <meta property="og:title" content="Learn CSS: The Complete Guide" /> |
Для og:title нет ограничений по количеству символов, но Facebook иногда обрезает заголовки, обычно это происходит в ветке комментариев, где мало места.
Facebook обрезает заголовок и описание репоста на стене
Мета описание
В мета описании, которое задается через тег og:description, прописывается краткий текст статьи.
| 1 | <meta property="og:description" content="A comprehensive guide to help you learn CSS online, whether you're just getting started with the basics or you want to explore more advanced CSS."> |
Facebook не ограничивает описание по количеству символов или слов, но все равно обрезает там, где без этого нельзя. Не пишите слишком длинные описания и делайте их привлекательными.
Мета изображение
Мета изображение задается через og:image и позволяет визуально представлять контент. В качестве значения не всегда может выступать изображение из контента. Возьмите изображение получше, чтобы читатели нажали и прочитали контент.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее| 1 | <meta property="og:image" content="https://tutsplus.github.io/open-graph-protocol/img/css-best-browser-850.png" /> |
Помимо URL, в этих тегах можно прописать размер изображения и MIME-тип. Эти теги необязательные, но они облегчат парсинг и кэширование изображений для Facebook.
| 1 2 3 | <meta property="og:image:width" content="850"> <meta property="og:image:height" content="450"> <meta property="og:image:type" content="image/png" /> |
Минимальный размер изображения – 200х200 пикселей, однако Facebook рекомендует 1200х630 пикселей для наилучшего результата.
Маленькое или больше изображение в репосте на Facebook
У вас может возникнуть желание сохранить соотношение сторон: «Старайтесь подогнать соотношение сторон под 1,91:1 для отображения всего изображения в новостной ленте без обрезания.» — разработчики Facebook
Facebook App ID
Настоятельно рекомендуется добавлять на Facebook App ID с помощью мета тега fb:app_id. App ID поможет Facebook создать ссылку на ваш сайт и сгенерирует полный обзор того, как пользователи взаимодействуют с вашим сайтом и контентом.
| 1 | <meta property="fb:app_id" content="1494084460xxxxxx"> |
Если вам не требуется аналитика, этот тег можно не использовать.
Вспомогательные мета теги
Есть несколько необязательных тегов, которые будут полезны в определенных случаях.
Название сайта
Название сайта задается через мета тег og:site_name. Если быть более точным, с его помощью задается бренд сайта. Бренд и название могут не совпадать с доменным именем. Хороший пример – Tuts+.
Согласно нашим правилам брендинга название должно быть в виде Tuts+, а не Tutsplus. И все же доменное имя имеет вид tutsplus.com, потому что нельзя использовать символ +:
| 1 | <meta name="og:site_name" content="Tuts+"> |
Facebook не показывает название сайта в репосте. Оно отображается в уведомлениях, если на вашем сайте установлен плагин Facebook, например, Facebook Comment.
Типизированные мета теги
Есть целый ряд тегов, связанных с определенным типом контента. Теги отличаются значением в og:type. У нас есть тег article. С типом article можно использовать вспомогательные мета теги типа article:author, article:published_time, article:publisher, article:section и article:tag.
Перед их использованием необходимо добавить новое пространство имен, ссылающееся на спецификацию Open Graph Article. Теперь у нас три пространства имен: og, fb и article.
| 1 2 3 4 5 | <!DOCTYPE html> <html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <head></head> <body></body> </html> |
Автор статьи
Facebook требует, чтобы в мета теге article:author был URL на профиль автора статьи в Facebook или его ID.
| 1 | <meta name="article:author" content="https://www.facebook.com/johndoe"> |
Если статью писали несколько авторов, можно указать несколько URL или ID.
| 1 | <meta name="article:author" content="https://www.facebook.com/johndoe, https://www.facebook.com/janedoe"> |
Совет: если у автора статьи нет аккаунта на Facebook, тег article:author можно заменить на author.
| 1 | <meta name='author' content='John Doe' /> |
Facebook покажет имя автора в превью.
Facebook также советует добавлять дополнительные теги статьи типа article:published_date и article:section, но на момент написания этой статьи они не играю существенной роли. Эти теги можно не использовать, если вы не работаете с Instant Article page.
Как уже было сказано, эти теги сильно зависят от типа контента. Если тип контента video.movie, лучше всего подойдут теги video:actor, video:director и video:duration, а не articles:published_date.
Эту часть Open Graph я отдам на самообучение. На Facebook есть множество материалов по этим мета тегам, а также пара примеров с кодом.
Заключение
Сейчас в той или иной форме Open Graph используется и другими социальными сетями, например, Twitter (хотя у них есть свой проприетарный язык разметки Twitter Cards), Pinterest, LinkedIn и Google+. В этой статье мы рассмотрели несколько Open Graph мета тегов и использовали их для улучшения превью контента.
Если ваш контент отрисовывается не так, как вы ожидали, воспользуйтесь Facebook Sharing Debugger для поиска ошибок разметки.
Автор: Louie Rootfield
Источник: https://webdesign.tutsplus.com/
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
