Обов’язкові мета теги для соціальних мереж і не тільки.

Соціальні мережі займають значну частину в нашому житті, ми там проводимо свій вільний час, ділимось цікавою інформацією та рекламуємо наші продукти. Кнопки “Поділитися” в соціальних мережах розміщені практично на всіх сайтах. Це чудовий спосіб донести інформацію до людей у зручний для них спосіб.

Розмістити кнопки Share – це лише половина справи, найважливіше правильно налаштувати сторінку, щоб роботи соціальних мереж (і не тільки) правильно зібрали інформацію і відобразили контент на сторінкці. Мета теги допомагають коректно відобразити потрібну інформацію в системах Facebook, Twitter, Google+, Vk, Skype, Slack і багато інших.

Розшарювання в Facebook i Twitter

Facebook пропонує розробникам різні варіанти того, як відобразити сайт (сторінку) на стіні в залежності від вмісту веб-сайту. Якщо не вказаний тип то кожен веб-сайт за замовчуванням відображається як тип “website”. Ми розглянемо які можна вказати типи сторінок.

Приклад однієї з сторінок даного сайту розшареного в Facebook буде відображатися в такий спосіб:

Twitter також по різному дозволяє відображати контент. Для початку розглянемо відображення таке ж як і у Facebook, але тут це називається “Summary Card with Large Image”.

В Твітері відображатися він буде ось так:

Інші сервіси відображають контент по своєму, але достатньо вказати основні теги, які використовуються всіма, це:

Зображення
Заголовок сторінки
Короткий опис
Адреса сайту

<meta> теги.

Для налаштування цих даних потрібно використовувати <meta> тег. Коли ссилка розшарена, сервіси завантажують сторінку і шукають це теги з відповідними параметрами для збору інформації. Facebook використовує <meta> теги протоколу Open Graph – систему класифікації веб-сторінок, яка виходить за рамки тих, <мета> тегів які вже визначені в HTML5. Повний список доступних тегів <meta> можна знайти на веб-сайті Open Graph.


<meta property="og:title" content="Travels&Code">
<meta property="og:description" content="Блог про програмування та подорожі.">
<meta property="og:image" content="http://travelscode.com/image.jpg">
<meta property="og:url" content="http://travelscode.com">

Twitter має свої теги, подібні до Open Graph але вони використовують префікс “twittet” замість “og”. Список параметрів можна переглянути на сторінці Twitter Cards.


<meta name="twitter:title" content="Travels&Code">
<meta name="twitter:description" content="Блог про програмування та подорожі.">
<meta name="twitter:image" content="http://travelscode.com/image.jpg">
<meta name="twitter:card" content="summary_large_image">

Основні теги.

Найлоговнішими тегами, які використовує Google для ранжування сторінок залишаються “Title” i “Description”. Саме це дані відображаються в пошуковій видачі.

Заголовок сторінки (Page title) – оптимізований ключовими словами і основним значенням сторінки текст довжиною до 70 символів який виводиться заголовком сторінки в пошуковій видачі і заголовком вкладки в браузері.
```
<title>Заголовок сторінки довжиною до 70 символів</title>
```
Опис (meta description) – текст який коротко описує основну суть сторінки. Він також виводиться в пошуковій видачі. Довжина повинна бути не більше ніж 155 символів.
```
<meta name=”description” content=”155 characters of message matching text with a call to action goes here”>
```
Автор (Authorship Markup) – тег з інформацією про автора. Вона може виводитись при пошуковій видачі у вигляді імені автора, фотографії з Google+ сторінки або в попередніх постах автора в правій частині сайту.Також інший варіант:Існує декілька форматів запису даних про автора:
- Rel-Author– дані про автора сторінки або частини контенту. Інформація може братися з профіля Google+ або просто текст вказаний в значенні даного тега.
```
<link rel=”author” href=”https://plus.google.com/[YOUR PERSONAL G+ PROFILE HERE]”/>
```
  Також можна додавати додаткові параметри в силках.
```
<a href=”[profile_url]?rel=author”>Google</a>
<meta name="author" content="John Doe">
```
- Rel-Me – XFN версія rel-author тега. Просто додається мета тег в ссилці на профіль в Google+
```
<a href=”https://plus.google.com/[YOUR PERSONAL G+ PROFILE NUMBER]” rel=”me”>Me on Google+</a>
```
- Rel-Publisher – бізнес версія силки на автора. Використовується для вказання ссилки на фірму або групу яка створила контент. Можна використовувати разом з rel-author
```
<link rel=”publisher” href=”https://plus.google.com/[YOUR BUSINESS G+ PROFILE HERE]”/>
```

Корисна інформація.

Спочатку додайте Open Graph теги.

Якщо обмаль часу і недостатньо інформації то можна додати лише Open Graph теги. Цей протокол повністю підтримується Facebook, Twitter, Google+, Vkontakte і частково підтримується Twitter.

Facebook domain insights

Domain Insights показує увесь реферальний трафік на ваш домен з Facebook, включно з інформацією коли користувачі додали ссилки на ваш сайт, клацнули на соціальні віджети, такі як Like or Share button, і багато іншого. Domain Insights також надає метрики і демографічну інформацію по домену і сторінках, що дозволяє оптимізувати контент для вашої аудиторії. Facebook domain insights docs.

Для того щоб використовувати ці можливості потрібно додати наступні теги:


<meta property="fb:admins" content="your_facebook_user_id" />
<meta property="fb:app_id" content="your_app_id" />

Whitelisting Twitter cards

Перед вибором який стиль твітів використовувати в Twitter, ваш твіт повинен бути approved and whitelisted. Ідеальним процесом було б validate your card у валідаторі а потім запросити підтвердження в цьому інструменті.

Налаштування вигляду браузера на мобільних телефонах.

Використовуючи різні мета теги можна налаштувати браузер і навіть елементи платформи. Деякі з них можуть працювати тільки на певних платформах і браузерах, але вони можуть значно підвищити UX.

Chrome, Firefox OS, Safari, Internet Explorer і Opera Coast дозволяють налаштувати кольори для елементів браузера, і навіть платформи за допомогою мета-тегів. Детальніше пожна прочитати на сайті developers.google.com.


<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Safari startup image -->
<link rel="apple-touch-startup-image" href="icon.png">
<!-- Safari status bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!— Windows Phone —>
<meta name="msapplication-navbutton-color" content="#7db0df">

Виглядає це ось так:

Відключинне розпізнавання телефонних номерів скайпом

Для деяких браузерів є доповнення (Skype addon), яке визначає номери телефонів на HTML сторінці і дозволяє зробити дзвінок з сайту по Skype. Можливо це уже устарівший плагін і ніде не використовується, але ще кілька років назад така проблема точно існувала. Скайп знаходив номера телефонів і робив їх клікабельними і змінював дизайн. Цю проблему можна вирішити додаванням кількох тегів:


<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

<meta content="telephone=no" name="format-detection">

Фінальна версія списку мета тегів.

<!-- COMMON TAGS -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8"">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="icon" type="image/vnd.microsoft.icon" href="http://travelscode.com/favicon.ico" />
<link rel="SHORTCUT ICON" href="http://travelscode.com/favicon.ico" />
<link rel="image_src" href="http://travelscode.com/logo.png" />

<link rel="canonical" href="http://travelscode.com/" />

<!-- Skype turn off telephone detection -->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<meta content="telephone=no" name="format-detection">

<meta name="author" content="John Doe">
<link rel="author" href="https://plus.google.com/[YOUR PERSONAL G+ PROFILE HERE]"/>
<link rel="publisher" href="https://plus.google.com/[YOUR BUSINESS G+ PROFILE HERE]"/>

<title>Travels&amp;Code</title>
<!-- Search Engine -->
<meta name="description" content="Blog about travels and programing">
<meta name="image" content="http://travelscode.com/logo.png">
<!-- Schema.org for Google -->
<meta itemprop="name" content="Travels&amp;Code">
<meta itemprop="description" content="Blog about travels and programing">
<meta itemprop="image" content="http://travelscode.com/logo.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Travels&amp;Code">
<meta name="twitter:description" content="Blog about travels and programing">
<meta name="twitter:site" content="@MaximRudniy">
<meta name="twitter:creator" content="@MaximRudniy">
<meta name="twitter:image" content="http://travelscode.com/logo.png">
<meta name="twitter:image:src" content="http://travelscode.com/logo.png">
<meta name="twitter:image:alt" content="Blog about travels and programing">
<!-- Open Graph general (Facebook, Pinterest, Google+) -->
<meta property="og:title" content="Travels&amp;Code">
<meta property="og:description" content="Blog about travels and programing">
<meta property="og:image" content="http://travelscode.com/logo.png">
<meta property="og:image:width" content="1069" />
<meta property="og:image:height" content="648" />
<meta property="og:url" content="http://travelscode.com/">
<meta property="og:site_name" content="Travels&amp;Code">
<meta property="og:locale" content="uk-UA">
<meta property="og:type" content="website">
<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='article:author' content='https://www.facebook.com/YOUR-NAME' /> 
<meta property='article:publisher' content='https://www.facebook.com/YOUR-PAGE' />

<meta property ="fb:admins" content="100003562124748">
<meta property ="fb:app_id" content="166407710536461">

<!- Mobile browser header color ->
<!— Chrome, Firefox OS, Opera and Vivaldi —>
<meta name="theme-color" content="#7db0df">
<!— Windows Phone —>
<meta name="msapplication-navbutton-color" content="#7db0df">
<!— iOS Safari —>
<meta name="apple-mobile-web-app-status-bar-style" content="#7db0df">

Тестування і перевірка <meta> тегів.

Facebook, Twitter, Google, Pinterest пропонують спеціальні валідатори для перевірки правильності тегів:

Генератор тегів.

Якщо нема часу на написання всіх тегів, то можна використати один із інструментів для генерування коду. Одним з найпопулярніших сервісів для цього є https://megatags.co/. Для роботи потрібно лише вибрати платформу, вказати всі необхідні поля і скопіювати уже згенерований варіант.