Мета теги для социальных сетей 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
Просмотров: 112746
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

^ Наверх ^