Open graph — панацея для соцсетей
Содержание:
- Массивы
- Совмещаем теги
- Разметка видео
- Conclusion
- What happens if I don’t have it?
- Types
- Why was Open Graph created?
- Значение МЕТА-тега Title
- Написание скрипта для генерации изображения
- Синтаксис разметки
- Информация об авторе статьи
- Что такое Open Graph и зачем он нужен?
- Настраиваем теги протокола Open Graph
- Мета тег description
- Object Types
- Basic Metadata
- Особенности внедрения OG на сайт
- Протокол Open Graph
- Проблемы с повторяющимися тегами Open Graph
- Starting with the basics of open graph
- Выводы
Массивы
Если тег может иметь несколько значений, просто поставьте несколько таких тегов <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 в высоту.
Совмещаем теги
Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа. Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что позволяет заменять мета-теги Open Graph на собственные. К тому же за исключением необходимости определить формат отображения нам не понадобятся уникальные мета-теги . В результате мы получаем следующий код, который стоит рассматривать как самый минимум с точки зрения тегов, необходимых для того, чтобы репост сайта выглядел достойно:
<meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm"> <meta name="twitter:card" content="summary_large_image">
Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничение в 1Мб.
Разметка видео
Такую разметку следует применять на страницах, где основным элементом является видео. Для начала добавляем нужную информацию в <html>:
<html prefix="og: http://ogp.me/ns#
video: http://ogp.me/ns/video#
ya: http://webmaster.yandex.ru/vocabularies/">
Заметили? Появился новый указатель на словарь от Яндекса — это нужно для того, чтобы видео с сайта попало в поиск в соответствующий раздел. Теперь добавляем мета-теги:
<meta property="og:title" content="Open Graph для видео"/> <meta property="og:url" content="http://mysite.com/my-little-cat/"/> <meta property="og:video" content="http://mysite.com/video/my-little-cat/"/> <meta property="og:description" content="Мои маленькие котятки"/> <meta property="video:duration" content="327878"/> <meta property="og:image" content="http://mysite.com/img/my-little-cat.png"/> <meta property="ya:ovs:upload_date" content="2013-06-05"/> <meta property="ya:ovs:adult" content="false"/> <meta property="og:type" content="video.other"/> <meta property="og:video:type" content="webm"/>
Их тут очень много и некоторые необходимо разобрать подробнее:
- Тег og:video указывает либо на сам файл, либо на плеер, с помощью которого он проигрывается.
- Тег video:duration указывает продолжительность видео в секундах (поэтому такие большие значения).
- Тег ya:ovs:adult указывает на принадлежность видео к категории “18+”. Если видео имеет такое ограничение, то пишем true, а если нет, то false.
- Тег og:type показывает, к какому жанру относится это видео — кино, серия из сериала, музыкальный клип, шоу, прямая трансляция или что-то другое (как в нашем примере).
- Тег og:video:type указывает на формат файла.
Как видите, разметка для видеофайла уже большая, чем для простой страницы.
Conclusion
The final code for both Facebook and Twitter should look more-or-less like this:
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 has some indirect positive impact on your SEO credibility—all things that eventually lead to more profit.
The functionalities described here don’t cover everything you can do with Open Graph. Check out some of the more advanced OG integrations with Facebook and some new features from Twitter (like Lead Generation Cards).
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.
What happens if I don’t have it?
Most social networks by default will try to make their best effort in creating a preview of your content. This more often than not doesn’t go so well.
Take for instance my website colbyfayock.com.
Example of a simple Twitter Card
It correctly grabs the title of my page and the description, but it’s not the most enticing looking tweet in a feed.
Contrast that to the preview of a single post and we see a different story.
Example of a Twitter Card with a large image
So what happens if you don’t have open graph tags? Nothing bad will happen, but you won’t be taking advantage of some of the features that help make your content stand out next to the loads of other content getting posted on the internet.
Types
The following is a list of the possible values for og:type
- band
- government
- non_profit
- school
- university
Products and Entertainment
- album
- book
- drink
- food
- game
- movie
- product
- song
- tv_show
For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help to make more concrete connections between graphs.
Websites
- article
- blog
- website
Use article for any URL that represents transient content — such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.
If your object does not fit into one of the types above, you can specify your own type. This will be represented as type other on Facebook. We will monitor the most commonly used types and graduate them to fully supported og:types. If you are specifying your own type we recommend that you use your own namespace. For example if you are moviesite.com, and you want to mark a URL on your site as a director you would do:
<html xmlns:moviesite="http://www.moviesite.com/ns#" >
<head>
....
<meta property="og:type" content="moviesite:director">
Why was Open Graph created?
Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.
Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.
Now, other social media sites also are taking advantage of social meta tags. All of the other major platforms, , LinkedIn, and , recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.
Значение МЕТА-тега Title
Можно много нахваливать этот тег и говорить, насколько необходима его оптимизация, но в первую очередь нужно дать понимание, почему он важен.
Title в результатах поиска. Пожалуй, самая очевидная и наиболее важная задача правильно составленного Title заключается в том, что именно его будет видеть пользователь, задавая поисковику вопрос. Для составления заголовка необходимо правильно подобрать ключевой запрос для контекстной рекламы Директ, это позволит привлечь на сайт теплых клиентов, заинтересованных в решении определённой проблемы или задачи. Title должен дать понять человеку, решение, которое он ищет находиться именно у вас.
Тайтл информирует людей о содержании страницы. Поиск информации в интернете редко ограничивается посещением одного сайта, люди зачастую открывают несколько вкладок, и надпись на этой самой вкладке будет надписью Title. Это позволяет посетителю понять, что находиться на этой странице или сайте в целом. Если заголовок составлен неправильно или текст вообще отсутствует, пользователь вероятнее всего закроет вкладку, даже не заглянув внутрь.
Title и добавление сайта в избранное. Все популярные браузеры уже давно имеют такую функцию как возможность сохранить сайт в избранное, что прекрасно влияет на контент-маркетинг и продвижение с его помощью. Люди находят полезные страницы, делятся ими с друзьями и сохраняют, чтобы не потерять. За название вкладки в сохранённом виде отвечает опять же Title.
Оптимизация тега Title
Главное что нужно учитывать при составлении заголовка для страницы сайта, он не должен превышать 60-100 символов. Это необходимо для того, чтобы заголовок хорошо выглядел в поисковой выдаче
Представьте, что вы составили красивый и броский заголовок, он должен привлекать внимание, а поисковик просто обрезал его, сделав нелепым и не информативным. Сделайте заголовок коротким, вложите в него исключительно суть, и пусть содержание страницы сделает всё остальное.
Информативность и полезность заголовка сайта, подразумевает ещё тот факт, что в нём следует избегать различных символов, таких как (!?=/+|_»:;). Попытка «украсить» ими заголовок даст обратный эффект и понизит его в выдаче. Так же краткость заголовка учитывает то, что в нём нужно обойтись без вводных фраз и приветствий, только суть, только полезная информация.
Хорошим тоном при составлении заголовков для сайта будет наличия у них общего характерного стиля и построения фраз. Люди, занимающиеся SEO продвижением сайта в поисковиках, используют высокочастотные ключевые запросы ближе к началу заголовка, а низкочастотные, наоборот, в конце названия страницы. Это в значительной мере повышает сайт в выдаче поисковиков, главное, что нужно учитывать – целевой запрос обязан соответствовать содержанию страницы.
Итог
Тег Title можно назвать своего рода визиткой сайта, он должен быть кратким, информативным и говорить о том, что решение проблемы пользователя находиться именно здесь. Title имеет огромное значение для любого вида продвижения от SEO до контент-маркетинга, за счёт того, что люди видят его в поисковой выдаче, и при сохранении сайта в избранное. Title не нужно пытаться украшать лишними символами такими как (!?=/+|_»:;), и самое главное, он должен полностью соответствовать содержанию страницы.
Написание скрипта для генерации изображения
Скрипт будем писать на php. Так как он генерирует картинку с пользовательским текстом, мы реализуем поддержку параметров, переданных в ссылке. Создаём в директории og-image-files файл og-image.php и открываем его. Весь код, написанный на php нужно заключить в тег <?php … >. Первым делом опишем функцию, которая откроет фоновое изображение. Пробуем открыть изображение и вернуть его. Если не удалось — создаём пустое белое и выводим сообщение об ошибке на нём.
Функция загрузки изображения
Следом опишем другую функцию: она будет помещать текст на картинку, автоматически расставляя переносы строки. Она принимает картинку, размер текста, угол наклона, отступ слева и сверху, цвет текста, шрифт, сам текст и максимальную ширину. Внутри строка делится на массив слов, считаются все необходимые значения ширины текста, а затем в цикле for элементы массива помещаются на изображение.
Функция загрузки изображения
Теперь основная часть: так как при переходе на страницу со скриптом должна отображаться исключительно картинка формата png, указываем Content-Type как image/png. Затем читаем изображение и получаем первый параметр social_network — он пригодится, если вы хотите в зависимости от социальной сети вставлять разные фоновые изображения. Загружаем картинку и получаем второй параметр — text. Все пробелы будут переформатированы в «%20», поэтому методом str_replace возвращаем всё обратно. Время чтения — параметр time_for_read, а time_ending — слово, которое нужно подставить после числа минут. Далее загружаем нужные шрифты.
Так как параметры принимаются через ссылку, в теории, туда можно передать любой SQL-запрос — это называется SQL-инъекцией. Такую брешь можно устранить, если все числовые переменные ещё раз перевести в числовые типы данных, а в строках экранировать кавычки: для этого есть функция mysql_escape_string(). А ещё в строку могут передать HTML-теги — для удаления тегов можно воспользоваться функцией strip_tags().
Функция mysql_escape_string() ещё работает в php5, но была удалена в php7. Подробнее об альтернативах можно почитать в документации
Задаём нужные цвета для текста и подставляем текст на изображение. Функцией imagepng выводим изображение, а затем его удаляем для освобождения памяти.
После размещения скрипта на сайте можно сразу протестировать его работу: так как наш лежит на сайте leftjoin.ru в директории og-image-files, можно пройти по ссылке leftjoin.ru/og-image-files/og-image.php и увидеть следующее изображение:
Оно пустое, так как мы не передали параметров. Они передаются непосредственно в ссылку. Например, передача текста и наименования социальной сети выглядит так:
Синтаксис разметки
Open Graph базируется на синтаксисе RDFa, где в <head> прописываются мета-теги. Внутри <meta> прописывают атрибуты property и content.
Полную информацию по настройке разметки можно найти на сайтах ogp.me, ruogp.me и в справке Яндекс.Вебмастер.
Обязательные свойства
В разметке должны присутствовать обязательные свойства:
- og:url – ссылка на сайт, которая добавляется в социальную сеть. В ней не должно быть лишнего и она должна отсылать на главную страницу сайта.
- og:type – вид страницы. Здесь указывается вид предоставляемой информации, например «Статья».
- og:title – заголовок страницы. Указывают название документа или страницы.
- og:image – ссылка на страницу с изображением. Без картинки сделать репост невозможно. Минимальные требования к размеру: Вконтакте — 160х160 пикселей, Facebook – 600х315 пикселей. Если подойдет только одно изображение, то оно само станет нужных размеров, если нет — отобразится серый квадрат. Изображения в разном размере можно указывать с помощью тегов с названием соцсетей (vk:image, fb:image, twitter:image). Они будут обрабатываться в первую очередь.
Опциональные свойства
Помимо основных свойств, есть еще и опциональные (дополнительные). Они не обязательны, но улучшают визуальное оформление разметки. Например:
- og:description – краткое описание текста. Здесь указывают анонс той информации, которую пользователь в итоге получит. Соцсеть не всегда его выводит. Будет показано примерно 60 символов и многоточие.
- og:site_name – раздел с названием сайта и краткой информацией о нем.
- og:video – ссылка на страницу с видео и др.
Структурированные метатеги
Мета-теги – часть кода страницы, заключенная между <head>…</head>. Мета-теги OG — это совокупность обязательных и опциональных свойств. В структуре кода они выглядят так.
Информация об авторе статьи
Увековечить себя в микроразметки поможет следующая строчка в коде:
<meta name="article:author" content="https://www.facebook.com/ivanpupkin">
Если объект страницы — продукт коллективного труда, то авторов можно указать через запятую:
<meta name="article:author" content="https://www.facebook.com/ivanpupkin, https://www.facebook.com/sergeyvolkoff">
Как вы уже успели заметить, указание автора происходит путём указания ссылки на его профиль в Facebook. Но как быть, если авторство застолбить охота, но профиля в FB нет? В таком случае используем следующий тег:
<meta name="author" content="ivanpupkin" />
Да, он уже идёт без пометки og и не очень каноничен, но это вынужденная мера — не заводить же аккаунт в Facebook, в самом деле!
Что такое Open Graph и зачем он нужен?
На многих страницах сайта мы видим кнопки для соцсетей. При нажатии на них происходит репост анонса страницы сайта. При этом сниппет с этим анонсом формируется по правилам той соцсети, где происходит репост. То есть текст и картинка в анонс попадают автоматически со страницы сайта. Очень часто это бывает не самый понятный текст и не самая удачная картинка. В сниппет может попасть даже рекламный баннер, который в это время оказался на странице, совершенно далекий от темы статьи. Если «социальному» роботу попалась даже подходящая картинка, она может быть изуродована до неузнаваемости подгонкой под формат соцсети всякими обрезаниями и сжатиями.
Для того, чтобы анонс страницы выглядел информативно и привлекательно, чтобы на него хотелось кликнуть, а не скорее пролистнуть, и придумали специальные правила. Это – микроразметка для социальных сетей. Теперь вебмастер может определять вид анонса страницы сайта в соцсетях. Он указывает какой брать текст, изображение и анкор ссылки для сниппета.
Open Graph (OG)– это специальный словарь семантической разметки, который в свое время был разработан для Facebook. Сейчас этот словарь понимают и остальные соцсети – ВКонтакте, Twitter, Одноклассники, Pinterest и другие. Протокол Open Graph также поддерживают поисковики, в том числе Гугл и Яндекс. Наряду с schema.org это самый распространенный словарь для микроразметки.
Настраиваем теги протокола Open Graph
А мы структурируем все теги и собираем вместе под комментарием «OPEN GRAPH PROTOCOL». В Эгее все нужные данные по каждой статье уже лежат в переменных, например, заголовок материала лежит в $content, а краткое описание страницы можно получить функцией array_keys(content). Главное для нас — добавить такую строку:
В результате мы написали скрипт, который генерирует изображение с текстом-параметром прямо на сайте, а затем вызвали этот скрипт в тегах протокола Open Graph. В качестве доработки можно добавить изображения разных размеров и генерировать картинку в зависимости от социальной сети. Теги тоже могут отличаться — изображение для ВКонтакте вставляется в тег <vk:image>, а для Twitter — <twitter:image>. В примере выше указано правильное использование этих тегов.
Мета тег description
Мета-описание (meta description) – также находится в <head> веб-страницы и обычно (хотя далеко не всегда) отображается в сниппете поисковой выдачи вместе с заголовком и URL-адресом страницы.
Например, это мета-описание данной статьи:
И да, само по себе метаописание не является фактором ранжирования. Но для любого вебмастера, старающегося увеличить количество переходов из поиска и улучшить поисковую выдачу своего бренда, это уникальная возможность.
Description занимает большую часть сниппета поисковой выдачи и приглашает пользователей щёлкнуть именно по вашей ссылке, обещая чёткое и комплексное решение их запроса.
Описание влияет на количество получаемых вами кликов, а также может улучшить CTR и снизить показатель отказов, если содержание страницы действительно соответствует обещаниям. Вот почему описание должно быть в равной степени реалистичным, привлекательным и чётко отражать содержание.
Если ваше описание содержит ключевые слова, использованные человеком в своём поисковом запросе, они будут выделены в поисковой выдаче жирным шрифтом
Это помогает вам привлечь внимание и сообщить пользователю, что именно он найдёт на вашей странице.
Невозможно поместить каждое ключевое слово, по которому вы хотите ранжироваться, в мета-описание, и в этом нет реальной необходимости – вместо этого напишите пару связных предложений, описывающих суть вашей страницы, включая основные ключевые слова.
Лучший способ выяснить, что необходимо поместить в мета тег Description для эффективного ранжирования – провести анализ конкурентов. Вбейте главный поисковый запрос вашей будущей или текущей страницы в Яндекс и Google. Посмотрите, кто и как заполнил описание, и возьмите себе всё самое лучшее из топа.
Мета совет
Мета-описание не обязательно должно состоять из одного-двух предложений. Вы можете добавить дополнительную информацию о странице, которая обрабатывается поисковиками и позволит выделиться в SERP.
Например:
- Для авторской статьи вы можете добавить дату публикации, имя автора.
- На странице продукта вы можете указать цену и дату изготовления товара.
Object Types
In order for your object to be represented within the graph, you need to
specify its type. This is done using the property:
When the community agrees on the schema for a type, it is added to the list
of global types. All other objects in the type system are
CURIEs of the form
The global types are grouped into verticals. Each vertical has its
own namespace. The values for a namespace are always prefixed with
the namespace and then a period.
This is to reduce confusion with user-defined namespaced types which always
have colons in them.
Namespace URI: https://ogp.me/ns/music#
values:
- — >=1 — The song’s length in seconds.
-
— —
The album this song is from. -
— >=1 —
Which disc of the album this song is on. -
— >=1 —
Which track this song is. -
— —
The musician that made this song.
- — — The song on this album.
-
— >=1 —
The same as but in reverse. -
— >=1 —
The same as but in reverse. -
— —
The musician that made this song. -
— —
The date the album was released.
- — Identical to the ones on
- — — The creator of this playlist.
music:creator — profile — The creator of this station.
Namespace URI: https://ogp.me/ns/video#
values:
-
— —
Actors in the movie. - — — The role they played.
-
— —
Directors of the movie. -
— —
Writers of the movie. -
— >=1 —
The movie’s length in seconds. -
— —
The date the movie was released. -
— —
Tag words associated with this movie.
- — Identical to
-
— —
Which series this episode belongs to.
A multi-episode TV show.
The metadata is identical to .
A video that doesn’t belong in any other category.
The metadata is identical to .
These are globally defined objects that just don’t fit into a vertical but
yet are broadly used and agreed upon.
values:
— Namespace URI:
-
— —
When the article was first published. -
— —
When the article was last changed. -
— —
When the article is out of date after. -
— —
Writers of the article. - — — A high-level section name. E.g. Technology
-
— —
Tag words associated with this article.
— Namespace URI:
- — — Who wrote this book.
-
— —
The ISBN - — — The date the book was released.
-
— —
Tag words associated with this book.
— Namespace URI:
- — — A name normally given to an individual by a parent or self-chosen.
- — — A name inherited from a family or marriage and by which the individual is commonly known.
- — — A short unique string to identify them.
- — (male, female) — Their gender.
— Namespace URI:
No additional properties other than the basic ones.
Any non-marked up webpage should be treated as website.
Basic Metadata
To turn your web pages into graph objects, you need to add basic metadata to
your page. We’ve based the initial version of the protocol on
RDFa which means that you’ll place
additional tags in the of your web page. The four required
properties for every page are:
-
— The title of your object as it should appear within the graph,
e.g., «The Rock». -
— The of your object, e.g., «video.movie». Depending on
the type you specify, other properties may also be required. -
— An image URL which should represent your object within the
graph. -
— The canonical URL of your object that will be used as its
permanent ID in the graph, e.g., «https://www.imdb.com/title/tt0117500/».
As an example, the following is the Open Graph protocol markup for The Rock on
IMDB:
The following properties are optional for any object and are generally
recommended:
- — A URL to an audio file to accompany this object.
- — A one to two sentence description of your object.
-
— The word that appears before this object’s title
in a sentence. An of (a, an, the, «», auto). If is
chosen, the consumer of your data should chose between «a» or «an».
Default is «» (blank). -
— The locale these tags are marked up in.
Of the format . Default is . -
— An of other locales this page is
available in. -
— If your object is part of a larger web site, the name which
should be displayed for the overall site. e.g., «IMDb». - — A URL to a video file that complements this object.
For example (line-break solely for display purposes):
The RDF schema (in Turtle)
can be found at ogp.me/ns.
Особенности внедрения OG на сайт
После того как разместили микроразметку Open Graph на странице, ее следует проверить. Сделать это можно с помощью специального отладчика Facebook
В отладчике нужно просто указать ссылку проверяемой страницы. Здесь можно увидеть, как выглядит анонс страницы. Исходя из этого внести необходимые коррективы и устранить ошибки, если они есть.
Кроме того проверку микроразметки ОпенГраф умеет делать валидатор Yandex.
При отладке и исправлении ошибок есть один нюанс. Как только соцсети находят у себя новую ссылку на внешний ресурс, они сохраняют в кэше всю нужную им информацию для сниппета и больше не обращаются к сайту. Если при отладке сохранились какие-то кривые параметры, то они так там и останутся. Очищать кэш нужно самому вручную. Для этого в каждой социальной сети есть свой механизм.
Как видим, с помощью микроразметки Open Graph несложно добиться хорошего представления сайта в соцсетях, увеличить кликабельность и трафик. При этом не забывайте размещать на сайте сами социальные кнопки.
Протокол Open Graph
Open Graph — это протокол социальной адаптации веб-контента, разработанный компанией Facebook. Open Graph позволяет присвоить любому веб-объекту ряд метаданных, по которым социальные сети смогут интерпретировать его как свой внутренний объект.
Протокол Open Graph хоть и является разработкой Facebook, однако, поддерживается всеми популярными соцсетями. На данный момент Open Graph поддерживают: Твиттер, ВКонтакте, Google+, LinkedIn, Pinterest и многие другие.
Основные метаданные Open Graph
- og:title — название объекта, заголовок;
- og:type — тип объекта, в зависимости от которого задаются другие свойства;
- og:image — URL-адрес изображения;
- og:url — канонический URL-адрес объекта.
Дополнительные метаданные Open Graph
- og:audio;
- og:description;
- og:determiner;
- og:locale;
- og:locale:alternate;
- og:site_name;
- og:video.
Структурированные свойства
Ряд свойств имеют дополнительные метаданные, которые определяются как и обычные метаданные.
С полным описанием протокола Open Graph можно ознакомиться на сайте Ruogp.me.
Проблемы с повторяющимися тегами Open Graph
Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.
В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.
И все бы ничего, но так уж получается, что этот самый тег стоит первый в очереди и некоторые социальные сети которые не дают возможность выбора изображений берут для создания поста (когда вы жмете кнопку поделиться) именно его, а это в большинстве случаев как минимум не красиво.
Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:
На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.
Starting with the basics of open graph
The four basic open graph tags that are required for each page are , , , and . These tags should be unique for each page you serve, meaning your homepage’s tags should all be different from your blog post article’s page.
Anatomy of a Twitter Card using Open Graph tags
While it should be pretty straightforward, here’s a breakdown of what each of the tags mean:
- : The title of your page. This is typically the same as your webpage’s tag unless you’d like to present it differently.
- : The “type” of website you have. I’ll explain more in the next section, though a generic “type” is “website”.
- : This should be a link to an image that you’d like to represent your content. It should be a high resolution image that the social networks will use in their feeds.
- : This should be the URL of the current page.
When placing a tag on your website, you should place it in the along with any other metadata. The tag used will be a tag and should look like this pattern:
So if I were to create a set four basic open graph tags for my website, colbyfayock.com, it might look like:
Выводы
Однозначно, протокол Open Graph является очень полезным элементом для каждого веб-сайта.
OG теги позволяют:
- повысить релевантность контента и поднять интерес к вашему сайту в соцсетях
- увеличить количество лайков и перепостов
- привлечь новых подписчиков
- улучшить кликабельность
- получать трафик на сайт
Стоит отметить, что существуют и другие виды микроразметки, которые выполняют похожую функцию и передают структурированные данные не только в Facebook, но и в поиск Яндекс/Google — это Schema.org. Есть также отдельная разметка для Twitter — Twitter Cards.
Таким образом, применяя различные виды микроразметки, вы сможете обеспечить своему сайту рост и популярность в интернете.
Adblock