0 » » Протокол, разметка Open Graph что это? Результативность использования

Протокол, разметка Open Graph что это? Результативность использования

protokol-open-graphЗдравствуйте. Данный материал познакомит Вас с протоколом Open Graph и ответит на все интересующиеся вопросы, которые крутятся около этого ключевого слова.

Итак, начнем. И для начала выясним предназначение протокола.

Open graph что это? Из названия статьи вы уже прояснили для себя, что это какой-то протокол. Не будем углубляться в правильность формулирования ответа и попробую на простом языке. Итак, это удобный случай связывать материал на странице сайта с социальными сетями и правильная его презентация читателям. Уловили суть. Нет?

Попробую еще раз, данная разметка преобразует внешний вид анонса в социальной сети, который был отправлен пользователем на его страницу соц.сети через ваш сайт. Для примера смотрите скриншот и все поймете.

open graph facebook

Как вы заметили это open graph facebook.

А вот пример как выглядит уже опубликованный в соц. сети вконтакте open graph.

vkontakte-open-graph

Согласитесь, кликабельно выглядит, а по сути это просто линка, которой поделился читатель с вашего сайта благодаря установленным кнопкам. Лично для меня facebook open graph лучше всего импонирует.

Мета-теги Open Graph

Сразу покажу вам как мета-теги выглядят в коде страницы сайта, если open graph реализован. Дабы увидеть реализацию данного протока, откройте любую страницу сайта через Ctrl+U, а зачем через поиск отыщите. Кстати, в обязательном порядке они должны располагаться в разделе <head>…</head>, смотрите скриншот.

В пример не привожу адреса своего блога, так как данный протокол не реализован. Возьмем любой сайт из интернета.

meta-tegi-open-graph

Теперь подробнее о каждом мета-теге:

  • «og:locale» — указывает (место расположение) или более мелькающими словами в этой теме: локализацию (язык сайта), рекомендуется использовать значение «ru_RU» для жителей России по умолчанию именно.
  • «og:type» — указывает предназначение страницы (постовой, новость, изображение, видео, разделы, категория и т. д.), рекомендуют использовать по умолчанию «article». Но в данном случае это content="website"
  • «og:title» — дазаем заголовок статьи. content="Купить органайзер, органайзеры и так далее..." В общем, здесь выносится название страницы.
  • «og:description» — задаем оптимизированное краткое описание страницы, которое выводится при формировании превью ссылки.  content="Желаете купить качественный органайзер и так далее..." Что является описанием  просматриваемой страницы.
  • «og:url» — линк на страницу сайта. В данном примере ссылкой выступает главный адрес главной страницы приведенного сайта.
  • «og:image» — линк на картинку, которая будет показываться, отображаться в посте. Пример попался не совсем удачным, так как этого тега мы не наблюдаем.
  • «og:site_name» — название сайта. Здесь очень просто.

Наконец, хочется дать небольшой совет, хотя кто я такой, чтобы советовать Вам. Читайте, изучайте и делайте выводы, а если уж надумали внедрять проток Open Graph, тогда в добавок создайте кнопки, которые будут призывать Ваших читателей поделится материалом в социальных сетях.

Совсем плохоПлохоНичего такХорошоСупер (Пока оценок нет)

Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *