Мета теги для социальных сетей Facebook, Twitter и Google Plus

Ни для кого не секрет, что интеграция вашего сайта с такими социальными сетями, как Facebook, Twitter или Google Plus может в значительной мере увеличить трафик и продажи на вашем сайте. В этой статье мы рассмотрим набор мета тегов социальных сетей, которые позволят вам чётко определять заголовки, описания и прочую информацию, которую должна забирать та или иная социальная сеть с ваших страниц.

Заметка: все рассматриваемые мета тэги необходимо поместить в раздел HEAD.

Мета теги определения месторасположения

Помогаем Google определить месторасположение вашего магазина или офиса, а так же другую контактную информацию.

<meta property="place:location:latitude" content="13.062616"/>
<meta property="place:location:longitude" content="80.229508"/>
<meta property="business:contact_data:street_address" content="Название улицы"/>
<meta property="business:contact_data:locality" content="Город"/>
<meta property="business:contact_data:postal_code" content="Индекс"/>
<meta property="business:contact_data:country_name" content="Страна"/>
<meta property="business:contact_data:email" content="cotact@mail.com"/>
<meta property="business:contact_data:phone_number" content="+91 1234567890"/>
<meta property="business:contact_data:website" content="http://www.website.com"/>

Google Plus

Далее мы продемонстрируем вам несколько мета тегов, понятных социальной сети Google Plus.

<meta itemprop="name" content="Название сайта"/>
<meta itemprop="description" content="Описание сайта"/>
<meta itemprop="image" content="https://website.com/image250X250.png"/>

Таким образом, если вы поделитесь этой страничкой с помощью специального виджета, Google извлечёт только указанную вами информацию.

Инструмент проверки структурированных данных: http://www.google.com/webmasters/tools/richsnippets

Twitter

<meta name="twitter:card" content="summary"/>  <!-- Тип окна -->
<meta name="twitter:site" content="Название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание"/>
<meta name="twitter:creator" content="автор"/>
<meta name="twitter:image:src" content="https://website.com/image250X250.png"/>
<meta name="twitter:domain" content="website.com"/>

Инструмент верификации: https://dev.twitter.com/docs/cards/validation/validator

Добавьте ваш сайт и проверьте на валидность.

Укажите информацию о владельце сайта

Валидация прошла успешно

Facebook

В свою очередь Facebook понимает следующие теги.

<meta property="og:type" content="profile"/>
<meta property="profile:first_name" content="Имя"/>
<meta property="profile:last_name" content="Фамилия"/>
<meta property="profile:username" content="Ник"/>
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>
<meta property="og:image" content="https://website.com/image250X250.png"/>
<meta property="og:url" content="http://www.site.com"/>
<meta property="og:site_name" content="Название сайта"/>
<meta property="og:see_also" content="http://www.website.com"/>
<meta property="fb:admins" content="Facebook_ID"/>

Facebook дебагер для валидации мета информации. https://developers.facebook.com/tools/debug

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.9lessons.info/2014/01/social-meta-tags-for-google-twitter-and.html
Перевел: Станислав Протасевич
Урок создан: 28 Января 2014
Просмотров: 105264
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

    Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

  • 15 полезных .htaccess сниппета для сайта на WordPress

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

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 29 Января 2014 19:12
    flashz1
    good info! thnx.
  • 29 Января 2014 19:53
    north_leshiy
    Так, но ведь OG протокол понимаю VK и twitter в том числе!
  • 5 Февраля 2014 05:30
    rubyx
    Нужная тема, вот было-бы хорошо если-бы те все соцы пользовались одной мета-формой... :) (+5 из 5.)
  • 7 Февраля 2014 23:12
    Eriken
    От такой кучи тегов, роботы потом не потеряют интерес к сайту? Если я их всех применю
  • 23 Декабря 2014 22:16
    OlegNovDev
    Подскажите, пожалуйста, может кто сталкивался и знает решение? Как заставить Google Plus и LinkedIn.com подтягивать из мета-тегов только ОДНУ фотку, прописанную в meta itemprop="image" или meta property="og:image", а не несколько со странички (причем в случайном порядке). Заранее благодарен.
^ Наверх ^