30-01-2017 11:15
2035

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

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

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

Опыт перехода с HTTP на HTTPS с SSL сертификатомВам будет интересно:Опыт перехода с HTTP на HTTPS с SSL сертификатом

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

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

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

Вот пример как это оформляется в html-коде:

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