Мета теги для социальных сетей facebook, twitter и google plus

Открытые и закрытые порты

Результаты тестирования

Чтобы показать вам, как работают методы, которые описаны в статье, я создал тестовый блог. На блоге сделал несколько постов с 3-мя изображениями в каждом, добавил кнопки «Мне нравится». Протестировал работу кнопок до Open Graph и после.

Тест №1. Результат работы кнопки «Мне нравится» на блоге без тегов Open Graph и плагина All in One SEO Pack.

Тест №2. Результат работы кнопки «Мне нравится» на блоге после установки плагина Facebook Open Graph Meta.

Тест №3. Результат работы кнопки «Мне нравится» на блоге после настройки тегов Open Graph вручную.

Результаты говорят сами за себя. Желаю успешной настройки тегов Open Graph Facebook на вашем блоге. Применяйте шаринг профессионально и по максимуму.

Основные теги протокола Open Graph

А теперь давайте разберем основные теги, использованные при описании статьи, которые необходимо добавлять исключительно между тегами head документа:

• og:title – при помощи данного тега мы можем передавать заголовок поста в социальные сети;
• og:description – как следует из названия, тег служит для передачи краткого описания поста, длина краткого описания не должна превышать 300 символов;
• og:type – указывает тип объекта, это может быть статья, музыка, видео и прочее. Подобных объектов в протоколе Open Graph не так уж и много и если на странице их несколько, то указывать стоит только один, который вы считаете основным;
• og:url – адрес страницы, который будет использован в качестве постоянного идентификатора;
• og:image – тег необходим для указания изображения, которое следует брать при формировании поста. Какими должны быть изображения, а точнее, какого размера достаточно интересный вопрос, который мы обсудим в следующий раз;
• og:site_name – имя сайта (его название) на котором размещена та самая информация об объекте.

Description

The Open Graph protocol enables any web page to become a rich object in a social graph. Most notably, this allows for these pages to be used with Facebook’s Like Button and Graph API.

The Open Graph plugin inserts the Open Graph metadata into page head section and provides filters for other plugins and themes to override this data, or to provide additional Open Graph data.

No configuration, pure power.

Plugin grabs data from content and if contains YouTube URL, then plugin try to get movie thumbnail and use it in og:image.

If the post contains YouTube or Vimeo links, this plugin saves as post meta video thumbnail link and add it to og:image as post thumbnail.

Сервисы для работы и плагины Open Graph

Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.

Составить код разметки Open Graph автоматически

Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.

Пример работы сервиса

Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:

Пример работы парсера

Если у владельца сайта нет особого желания разбираться с протоколом Open Graph, самостоятельно разбираясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS:

• «Open Graph» или «Yoast SEO» для WordPress;
• «Phoca Open Graph» для Joomla;
• «Open Graph Meta» для Opencart.

Сервис проверки Open Graph

Контролировать разметку страницы Open Graph можно через специализированный сервис, разработанный Facebook. С его помощью веб-мастер узнает, как социальная сеть будет отображать анонс внешней страницы, и сможет отредактировать мета-тег для лучшего отображения превью в социальных медиа.

Фрагмент работы инструмента

Наличие разметки определяет инструмент для автоматического аудита конкретной страницы «Анализ контента». Если нужно быстро проверить, работает ли разметка, а также оценить контент, юзабилити, технические характеристики и мобильность страницы по многим параметрам, попробуйте сервис.

Фрагмент анализа инструментом

Что такое Open Graph?

1. Превью — изображение которое выводится в качестве превью к записи.
2. Домен — URL адресс, ссылка, того чем вы делитесь.
3. Навание — Заголовок той информации, которую вы собираетесь разместить.
4. Описание — краткое содержание того, о чем информация.

Если же не добавлять метатеги от Open Graph, то при попытке поделится ссылкой вы увидите следующую картину:

Как видите. результат схожий но с некоторыми моментами. Во-первых, в качестве перевью взят логотип сайта. Часто берется первая попавшаяся картинка, если социальные сети не могут определить картинку записи или лого. Иногда социальные сети, вообще не добавляют изображение. Домен и заглавие тоже указаны как и в предыдущем варианте, но краткого описания нет. Конечно же такой вариант хуже предыдущего. Возможно, не так страшно если ссылкой поделились один раз, но если публиковать новости в группе, то на всех публикациях будет одно и то же превью.

Сравнить два столбца и вывести уникальные значения (Формулы/Formulas)

Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика

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

Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:

• в обложку поста подтянется случайная картинка из контента страницы, неправильных размеров;
• вместо заголовка и краткого анонса статьи — содержимое тега.

Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.

Репост в Фейсбук статьи без внедренной разметки:

А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

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

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Шаг 2. Внедрение Твиттер Кардс

Чтобы добавить микроразметку в ручном режиме, действуйте поэтапно. Для начала определитесь с видом карточки, который вам нужен. Всего их восемь:

• Summary Card — содержит описание, картинку и заголовок.
• Summary Card with Large Image — вариант, аналогичный предыдущему. Только здесь используется большая картинка.
• Photo Card — пост с фотографией в центральной части. Может публиковаться без заголовка.
• Gallery Card — мини-галерея из четырех изображений. При необходимости можно указывать авторство картинок. Описание и заголовки не обязательны.

Теперь нужно прописать эти элементы внутри метатегов <head> и </head>. Отметим, что разметка Twitter Cards основана на стандарте Open Graph, поэтому и варианты написания кода для внедрения на сайт будут очень похожими. Так выглядит пример синтаксиса для стандартной карточки (summary):

<head>
<title>ЗАГОЛОВОК СТРАНИЦЫ</title>
<meta name=»twitter:card» content=»summary»>
<meta name=»twitter:site» content=»@ваш корпоративный аккаунт в Твиттере»>
<meta name=»twitter:title» content=» «Название статьи»>
<meta name=»twitter:description» content=»Анонс материала. Например, из этой статьи вы узнаете то-то и то-то.»>
<meta name=»twitter:image» content=»http://site.ru/картинка для анонса.jpg»>
…
</head>
<body>
</body>

Это только базовый перечень атрибутов. В зависимости от того, какая карточка используется, он может меняться. Например, при заполнении данных для Product Card можно добавлять элемент twitter:label, который показывает стоимость товара. Полный вариант написания атрибута выглядит вот так: <meta name=»twitter:label» content=»Price»>.

Здесь нам нужно скачать архив и распаковать его.

При распаковке нас интересуют данные в папках player и player_streaming. Их нужно перенести в корневую папку вашего сайта.

Если все хорошо, находим между тегами <head> и </head> атрибуты twitter:image и twitter:player. В первый мы прописываем картинку для анонса: <meta name=»twitter:image» content=»http://site.ru/картинка для анонса.jpg»>, а во второй — ссылку на видео, которое публикуем: <meta name=»twitter:player» content=»URL видео»>. Дополнительно можем указать ширину и высоту плеера с помощью тегов width и height.
Как и в случае с Open Graph, последний этап настройки — проверка корректности отображения поста. Это можно сделать с помощью валидатора Card Validator.

Просто укажите адрес поста и посмотрите как он будет отображаться после публикации. Если все корректно, подтвердите добавление и публикуйте готовый материал

Обратите внимание, что валидация проводится только перед размещением первого поста. Затем карточки будут добавляться автоматически

Немного теории об Open Graph

Все данные для OG передаются в мета-тегах, что размещаются в контейнере <head>. Существует 4 таких тега, которые должны быть, иначе не взлетит (или взлетит, но не совсем):

• og:title — название размечаемого объекта (страницы). Аналог и родственник title.
• og:type — тип страницы (объекта) или другими словами обозначение того, что находится на данной странице — страница сайта, видео или аудио файлы. В зависимости от указанного типа может понадобиться ещё метатегов.
• og:image — изображение-иллюстрация для страницы (объекта). Здесь требуется указать прямую ссылку на изображение.
• og:url — каноничный url адрес данной страницы.

Все дополнительные мета-теги называются опциональными — останавливаться на них сейчас не будем, а рассмотрим на примерах позже.

Значение МЕТА-тега Title

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

Title в результатах поиска. Пожалуй, самая очевидная и наиболее важная задача правильно составленного Title заключается в том, что именно его будет видеть пользователь, задавая поисковику вопрос. Для составления заголовка необходимо правильно подобрать ключевой запрос для контекстной рекламы Директ, это позволит привлечь на сайт теплых клиентов, заинтересованных в решении определённой проблемы или задачи. Title должен дать понять человеку, решение, которое он ищет находиться именно у вас.

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

Title и добавление сайта в избранное. Все популярные браузеры уже давно имеют такую функцию как возможность сохранить сайт в избранное, что прекрасно влияет на контент-маркетинг и продвижение с его помощью. Люди находят полезные страницы, делятся ими с друзьями и сохраняют, чтобы не потерять. За название вкладки в сохранённом виде отвечает опять же Title.

Оптимизация тега Title

Главное что нужно учитывать при составлении заголовка для страницы сайта, он не должен превышать 60-100 символов. Это необходимо для того, чтобы заголовок хорошо выглядел в поисковой выдаче

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

Информативность и полезность заголовка сайта, подразумевает ещё тот факт, что в нём следует избегать различных символов, таких как (!?=/+|_»:;). Попытка «украсить» ими заголовок даст обратный эффект и понизит его в выдаче. Так же краткость заголовка учитывает то, что в нём нужно обойтись без вводных фраз и приветствий, только суть, только полезная информация.

Хорошим тоном при составлении заголовков для сайта будет наличия у них общего характерного стиля и построения фраз. Люди, занимающиеся SEO продвижением сайта в поисковиках, используют высокочастотные ключевые запросы ближе к началу заголовка, а низкочастотные, наоборот, в конце названия страницы. Это в значительной мере повышает сайт в выдаче поисковиков, главное, что нужно учитывать – целевой запрос обязан соответствовать содержанию страницы.

Итог

Тег Title можно назвать своего рода визиткой сайта, он должен быть кратким, информативным и говорить о том, что решение проблемы пользователя находиться именно здесь. Title имеет огромное значение для любого вида продвижения от SEO до контент-маркетинга, за счёт того, что люди видят его в поисковой выдаче, и при сохранении сайта в избранное. Title не нужно пытаться украшать лишними символами такими как (!?=/+|_»:;), и самое главное, он должен полностью соответствовать содержанию страницы.

С каких площадок идет трафик

STM32 и FreeRTOS. 5. Приносим пользу и добро!

Общие (Meta теги)

<meta charset="UTF-8"> <!-- HTML5 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTML -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta http-equiv="Content-Language" Content="ru">

<meta name="description" content="Описание страницы"/>
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">

<meta name="author" Content="Автор документа">
<meta name="copyright" Content="авторское право (копирайт) в котором может указываться ФИО автора сайта, название фирмы, бренда и т.д.">

<meta name ="Generator" Content="Microsoft Notepad">
С помощью какого html редактора была написана страница

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<!-- указываем корень сайта или пусть до файла -->
<link rel="canonical" href="http://site.ru/" />

Добавляем разметку с помощью плагинов

Плагин All in One SEO Pack

Этим плагином пользуюсь я на своем блоге. Его можно скачать здесь. Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.

Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить»

Самое важное для нас — в настройках само́й статьи или страницы блога. Выглядят эти настройки вот так:
Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title»

На сколько хорошо работает этот плагин, вы можете проверить, нажав на кнопку «Мне нравится» под этой статьёй. После этого на вашей стене Facebook появится первая картинка статьи и заголовок + описание, которые вы видели чуть выше на скриншоте. Переходим ко второму варианту.

Плагин Facebook Open Graph Meta

Этот вариант также прост как и предыдущий. Вы скачиваете этот плагин здесь(работу плагина я проверил, и также я знаю, что его автор — опытный разработчик, который ведёт свою страницу на Facebook), также как и в первом варианте загружаете на блог через панель управления и активируете. Я подробно остановлюсь на настройках этого плагина.

В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:
Первое поле «App Id» можете пропустить. Во второе поле «Admins» вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:

надо заменить

на

Скопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).

После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.

Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу . Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней».

Последний важный шаг. Вам необходимо вручную заменить тег <html> в файле header.php на этот код:

В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег <html> (на скриншоте ниже), который надо заменить и сохранить изменения.

После этих действий плагин полностью готов к работе. Проверьте его действие, зайдя у себя в любую статью и нажав «Мне нравится». Потом посмотрите, какая информация появилась на вашей стене в Facebook.

Взаимодействие с социальными сетями

Метатеги социальных медиа необязательны, но помогают поделиться ссылкой на веб-страницу в таком виде, чтобы привлечь внимание читателей, увеличить количество лайков и репостов. Текст адаптируется для поста, картинка создаётся специально под площадку

Причём они могут даже не отображаться в веб-версии сайта

Текст адаптируется для поста, картинка создаётся специально под площадку. Причём они могут даже не отображаться в веб-версии сайта.

Open Graph (Facebook, Pinterest, Вконтакте, Одноклассники)

Open Graph — разработанная Facebook разметка, позволяющая настраивать превью страницы, ссылка на которую размещена в социальной сети. Open Graph поддерживают социальные сети вроде Вконтакте, Одноклассники, Google+, Twitter и LinkedIn. Как основную используют Facebook и Pinterest.

Конференция DevFest Siberia 2020

5–6 декабря, Онлайн, От 1500 до 2500 ₽

tproger.ru

События и курсы на tproger.ru

Стандартный сниппет выглядит так:

Facebook поддерживает дополнительные метатеги для изображений и видео.

Для Pinterest в указывается имя автора или название сайта, но это противоречит требованиям Open Graph на Facebook. Для программистов создано интересное решение. В противном случае используйте более выгодный вариант или разметку Schema вместе с Open Graph.

Чтобы запретить пользователям пинить свой контент, используйте следующий код:

Стандартные метатеги (Twitter)

Twitter поддерживает некоторые элементы Open Graph, но в основном использует стандартные метатеги для определения расшаренного контента. Проверить описание, или карту, как называет его Twitter, можно с помощью валидатора карт.

Вот пример описания:

Примечание — ссылка на аккаунт сайта в Twitter, — ссылка на аккаунт автора.

Schema (Google+ и Pinterest)

Разметка Schema — продукт совместной работы крупнейших поисковых систем, преимущественно используемый в Google+. В Pinterest Schema поддерживается как альтернатива Open Graph, но не в полной мере: рекомендуется использовать обе. Разметка Schema громоздкая и менее привлекательная, чем Open Graph, но её словарь описания связанного контента богаче.

Вот сниппет для Google+:

Google+ использует Open Graph как резервную разметку, у Pinterest используются дополнительные метатеги Schema, поэтому разумно использовать все три описанные разметки.

Object Types

In order for your object to be represented within the graph, you need to
specify its type. This is done using the property:

When the community agrees on the schema for a type, it is added to the list
of global types. All other objects in the type system are
CURIEs of the form

The global types are grouped into verticals. Each vertical has its
own namespace. The values for a namespace are always prefixed with
the namespace and then a period.
This is to reduce confusion with user-defined namespaced types which always
have colons in them.

Namespace URI: https://ogp.me/ns/music#

values:

• — >=1 — The song’s length in seconds.
• — —
  The album this song is from.
• — >=1 —
  Which disc of the album this song is on.
• — >=1 —
  Which track this song is.
• — —
  The musician that made this song.

• — — The song on this album.
• — >=1 —
  The same as but in reverse.
• — >=1 —
  The same as but in reverse.
• — —
  The musician that made this song.
• — —
  The date the album was released.

• — Identical to the ones on
• — — The creator of this playlist.

music:creator — profile — The creator of this station.

Namespace URI: https://ogp.me/ns/video#

values:

• — —
  Actors in the movie.
• — — The role they played.
• — —
  Directors of the movie.
• — —
  Writers of the movie.
• — >=1 —
  The movie’s length in seconds.
• — —
  The date the movie was released.
• — —
  Tag words associated with this movie.

• — Identical to
• — —
  Which series this episode belongs to.

A multi-episode TV show.
The metadata is identical to .

A video that doesn’t belong in any other category.
The metadata is identical to .

These are globally defined objects that just don’t fit into a vertical but
yet are broadly used and agreed upon.

values:

— Namespace URI:

• — —
  When the article was first published.
• — —
  When the article was last changed.
• — —
  When the article is out of date after.
• — —
  Writers of the article.
• — — A high-level section name. E.g. Technology
• — —
  Tag words associated with this article.

— Namespace URI:

• — — Who wrote this book.
• — —
  The ISBN
• — — The date the book was released.
• — —
  Tag words associated with this book.

— Namespace URI:

• — — A name normally given to an individual by a parent or self-chosen.
• — — A name inherited from a family or marriage and by which the individual is commonly known.
• — — A short unique string to identify them.
• — (male, female) — Their gender.

— Namespace URI:

No additional properties other than the basic ones.
Any non-marked up webpage should be treated as website.

Массивы

Если метатег может содержать несколько значений, добавьте дополнительные meta-элементы на страницу. При возникновении конфликтов будут учитываться данные, указанные в первом элементе meta (сверху вниз).

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

Укажите структурированные метатеги после основного метатега.

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

где разметка означает, что на странице размещены 3 изображения: первое имеет размер 300×300, для второго изображения размер не указан, третье — 1000 пикселей в высоту.