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

Розмістити кнопки 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”. Саме це дані відображаються в пошуковій видачі.

  1. Заголовок сторінки (Page title) – оптимізований ключовими словами і основним значенням сторінки текст довжиною до 70 символів який виводиться заголовком сторінки в пошуковій видачі і заголовком вкладки в браузері.
    
    <title>Заголовок сторінки довжиною до 70 символів</title>
    
    
  2. Опис (meta description) – текст який коротко описує основну суть сторінки. Він також виводиться в пошуковій видачі. Довжина повинна бути не більше ніж 155 символів.
    <meta name=”description” content=”155 characters of message matching text with a call to action goes here”>
    
  3. Автор (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/. Для роботи потрібно лише вибрати платформу, вказати всі необхідні поля і скопіювати уже згенерований варіант.

Ресурси:

Must-Have Social Meta Tags for Twitter, Google+, Facebook and More

The Ultimate Guide to Social Media Meta Tags

The Essential Meta Tags for Social Media

Social media meta tag generator

18 Meta Tags Every Webpage Should Have in 2013

The Open Graph Protocol

Facebook: A Guide to Sharing for Webmasters

Facebook: Domain Insights

Twitter: Summary Card with Large Image

Twitter: Card Analytics

Meta tags that Google understands

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

Схожі статті

Leave a Reply

Your email address will not be published. Required fields are marked *