Добрый день, уважаемые читали! Сегодня я вам расскажу про социальные meta-теги, которые должны обеспечить наиболее четкую интеграцию с социальными сетями, такими как FACEBOOK, TWITTER, GOOGLE+ и т.д.

Итак, данные meta-теги подразделяются на следующие типы:

  • Twitter Cards : Summaries, Images, Galleries, Apps, Video, Audio, and Products
  • Pinterest Rich Pins : Products, Recipes, Movies, and Articles
  • Google+ : Articles, Blog, Book, Event, Local Business, Organization, Person, Product, and Reviews
  • Facebook : Articles, Photos, Audio, Video, и др.

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

Наиболее распространены meta-теги типа og (OpenGraph), который помимо FACEBOOK использует также и ВКОНТАКТЕ. В этой статье я приведу несколько примеров, которые можно будет использовать у себя на сайте.

  1. Самый простой пример:
  2. <!—Поместите данный код между тегами <head> на своем сайте -->

    <title>Заголовок страницы. Максимальная длина 60-70 символов.</title>

    <meta name="description" content="Описание страницы. Не более 155 символов." />

     

    <!-- Twitter Card -->

    <meta name="twitter:card" value="summary">

     

    <!-- Open Graph data -->

    <meta property="og:title" content="Здесь заголовок" />

    <meta property="og:type" content="article" />

    <meta property="og:url" content="http://www.example.com/" />

    <meta property="og:image" content="http://example.com/image.jpg" />

    <meta property="og:description" content="Здесь описание" />

  3. Стандартный шаблон.
  4. <!-- Поместите данный код между тегами <head> на своем сайте -->

    <title>Заголовок страницы. Максимальная длина 60-70 символов.</title>

    <meta name="description" content="Описание страницы. Не более 155 символов." />

     

    <!-- Twitter Card data -->

    <meta name="twitter:card" content="summary">

    <meta name="twitter:site" content="@publisher_handle">

    <meta name="twitter:title" content="Заголовок">

    <meta name="twitter:description" content="Описание менее 200 символов">

    <meta name="twitter:creator" content="@author_handle">

    <-- Twitter картинка превью - 120x120px -->

    <meta name="twitter:image" content="http://www.example.com/image.jpg">

     

    <!-- Open Graph data -->

    <meta property="og:title" content="Заголовок" />

    <meta property="og:type" content="article" />

    <meta property="og:url" content="http://www.example.com/" />

    <meta property="og:image" content="http://example.com/image.jpg" />

    <meta property="og:description" content="Описание" />

    <meta property="og:site_name" content="Имя сайта, например, ArtemBlog" />

    <meta property="fb:admins" content="ID аккаунта администратора сайта" />

  5. Продвинутый шаблон.

<!—Добавьте в html тег аттрибуты itemscope и itemtype. -->

<html itemscope itemtype="http://schema.org/Article">

 

<!-- Поместите данный код между тегами <head> на своем сайте -->

<title>Заголовок страницы. Максимальная длина 60-70 символов.</title>

<meta name="description" content="Описание страницы. Не более 155 символов." />

 

<!-- Schema.org разметка для Google+ -->

<meta itemprop="name" content="Имя или заголовок">

<meta itemprop="description" content="Описание страницы">

<meta itemprop="image" content="http://www.example.com/image.jpg">

 

<!-- Twitter Card data -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@publisher_handle">

<meta name="twitter:title" content="Заголовок">

<meta name="twitter:description" content="Описание страницы меньше 200 символов">

<meta name="twitter:creator" content="@author_handle">

<!—Большая картинка в TWITTER - 280x150px -->

<meta name="twitter:image:src" content="http://www.example.com/image.html">

 

<!-- Open Graph data -->

<meta property="og:title" content="Заголовок" />

<meta property="og:type" content="article" />

<meta property="og:url" content="http://www.example.com/" />

<meta property="og:image" content="http://example.com/image.jpg" />

<meta property="og:description" content="Description Here" />

<meta property="og:site_name" content="Site Name, i.e. Moz" />

<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />

<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />

<meta property="article:section" content="Article Section" />

<meta property="article:tag" content="Article Tag" />

<meta property="fb:admins" content="Facebook numberic ID" />

Данные мета теги можно проверить на следующих страницах социальных сетей: