Правильные ссылки в соц сетях на сайт. Open Graph

Делаем красивые ссылки в социальных сетях посредством протокола Open Graph

Теги: SEO, Соц сети, vk
Правильные ссылки в соц сетях на сайт. Open Graph В наше время соц. сети являются почти неотъемлемой частью разных веб-ресурсов. Для многих SEO специалистов и владельцев веб-ресурсов соц сети являются одним из основных источников трафика посетителей на сайт на ровне с поисковыми системами, поэтому очень важно, чтоб ваш сайт был связан с ними какими-либо способами (системой комментариев, кнопкой поделиться, лайками и т.п.), но об этом все знают, т.к. это видно в первую очередь, я же хочу рассказать сегодня немного о другом.

Все замечали, что в социальных сетях выкладывают очень много ссылок на различные веб-ресурсы и в последнее время эти ссылки с просто анкора и самой ссылки переросли в целые блоки, которые красиво оформлены с заголовком страницы, на которую ссылается блок, описанием и изображением (превью).
Все эти заголовки, описания и картинки формируются автоматически в соц сетях при вставке ссылки (в основном скрипт соц сети берет title страницы и первое попавшееся изображение на странице из контента (например вконтакте дает возможность выбора из тех изображений, которые он найдет на этой странице), а так же небольшое описание тоже из первых слов в контенте, но не всегда эти данные берутся так, как хотелось бы владельцу ресурса. На это существует протокол Open Graph, о котором я сегодня и расскажу.

Протокол Open Graph дает владельцу ресурса указать, как будет выглядеть ссылка на страницы его сайта в социальных сетях: Facebook, ВКонтакте и т.д. посредством специальных мета-тегов, в которых владелец ресурса может сам указать какой будет заголовок для ссылки на страницу, какое описание будет, какая будет использоваться при этом картинка (ведь если мы сами отправляем ссылку в соц сетях, то мы можем выбрать в некоторых случаях какое из нескольких изображений на странице использовать, а другие пользователи, которые будут делиться через соц сети этой ссылкой оставят её так, как определит автоматически скрипт соц сети).


Основные метаданные

  • og:title — Заголовок страницы. Обычно заголовки самих страниц выглядят примерно так «Название статьи / подкатегория / категория — Название сайта» и, если на странице нету мета-тегов Open Graph, то заголовок ссылки в соц сети будет точно такой же, что не очень красиво смотрится, лучше будет смотреться, если он будет просто «Название статьи», для этого и нужно в этом мета-теге способами системы управления или вручную прописать «Название статьи»;
  • og:type — тег, указывающий на тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;
  • og:image — ссылка на изображение, которая должна сопровождать материал;
  • og:url — ссылка на саму веб-страницу, которая добавляется в соц сеть.
Вот пример как это оформляется в html-коде:

<head>
…
<meta property="og:title" content="Правильные ссылки в соц сетях на сайт. Open Graph / Роман Воропаев - Личный блог" />
<meta property="og:description" content="Красивые ссылки в соц сетях на свой ресурс" />
<meta property="og:image" content="https://vr66.ru/assets/images/tickets/95/b4f72362915a8b4dd92b453c2c6faf345f6e1558_thumb.jpg" />
<meta property="og:type" content="article" />
<meta property="og:url" content= "https://vr66.ru/it-blog/the-building/seo-optimization-and-promotion/95-the-correct-links-in-social-networks-to-the-websites-open-graph" />
…
<head>
Этих тегов будет вполне достаточно, чтоб ссылки на ваш веб-ресурс отображались в социальных сетях так как нужно вам, а не как автоматически распознает их скрипт соц сетей, а если хотите еще подробнее почитать о протоколе Open Graph и узнать другие метаданные и свойства, то добро пожаловать на официальную страницу протокола Open Graph и русскоязычную страничку.
30 января 2017, 16:15    Роман Воропаев SEO оптимизация и продвижение 0    1283 0
    Загруженные файлы:
  • logo.png 12.09 kb

Похожие статьи:

Как продвинуть сайт самому: пошаговая инструкция для новичков. Раскрути свой сайт сам
Переход с HTTP на HTTPS с SSL сертификатом. Проблемы, с которыми пришлось столкнуться и их решение.
История спасение одного из своих сайтов от санкций яндекса (фильтра, агс, минусинска)

Комментарии (0)

    Вы должны авторизоваться или зарегистрироваться, чтобы оставлять комментарии.

    Комментарии через вконтакте: