Что такое «open graph» и как его подключить к вордпресс

Общие (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/" />

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

Особенности внедрения OG на сайт

После того как разместили микроразметку Open Graph на странице, ее следует проверить. Сделать это можно с помощью специального отладчика Facebook

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

Кроме того проверку микроразметки ОпенГраф умеет делать валидатор Yandex.

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

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

МЕТАтеги Open Graph

Open Graph имеет свои метатеги и как остальные они добавляются в шапку сайта, а именно между <head>…</head>. Для начала, давайте я покажу как выглядят обычно метатеги Open Graph на сайте:

<meta property="og:type" content="article" />
<meta property="og:image" content="http://gnatkovsky.com.ua/image.png" />
<meta property="og:url" content="http://gnatkovsky.com.ua" />
<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Краткое описание того что на странице" />

  1. og:type — указываем тип объекта, от него зависит то, какие дальше будут заданы свойства.
  2. og:image — указываем превью картинку нашей страницы.
  3. og:url — указываем ссылку на текущую страницу (ту где располагаются эти метатеги).
  4. og:title — указываем заголовок страницы.
  5. og:description — указываем краткое содержание страницы, статьи.

Еще часто добавляют тег og:site_name — в нем указывается название сайта.

Первые 4 метатегов являются основными и обязательными. Если вы решили добавлять протокол Open Graph, то они должны быть указанны в любом случаи. Последние og:description и og:site_name не обязателен, но наличие приветствуется, вы сами видели начале статьи примеры. Есть и другие теги которые можно добавлять к страницам сайта, более подробно о них можно узнать на сайте Ruogp.me.

К этой группе тегов можно добавить еще пару специальных метатегов для Facebook:

<meta property="fb:app_id" content="10000000001111"/>
<meta property="fb:admins" content="10000000001111"/>
  1. fb:app_id — указывается айди приложения от Facebook.
  2. fb:admins — указывается айди администратора или администраторов через запятую.

Добавляется любой из этих тегов, нужны они для того чтобы вести статистику по взаимодействию с Facebook. Подробнее об этом можно узнать тут — Facebook developers. Если же это не надо то пропускайте.

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

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

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

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

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

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

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

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

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

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

Итог

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

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

Правила записи музыки на USB-носители

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

  1. Лучше всего пользоваться USB-носителем с небольшим объёмом до 8 ГБ.
  2. При записи в формате FAT32 чаще всего проблем с прочтением не возникает.
  3. Все файлы желательно размещать в корневом каталоге, или же в папки, расположенные в самом корневом каталоге.
  4. Выбирайте формат для файлов mp3 или wav.
  5. Перед записью USB-накопитель необходимо проверить на отсутствие вирусов.
  6. Не стоит производить зарядку других устройств через гнездо для USB.

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

Types

The following is a list of the possible values for og:type

  • band
  • government
  • non_profit
  • school
  • university

Products and Entertainment

  • album
  • book
  • drink
  • food
  • game
  • movie
  • product
  • song
  • tv_show

For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help to make more concrete connections between graphs.

Websites

  • article
  • blog
  • website

Use article for any URL that represents transient content — such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.

If your object does not fit into one of the types above, you can specify your own type. This will be represented as type other on Facebook. We will monitor the most commonly used types and graduate them to fully supported og:types. If you are specifying your own type we recommend that you use your own namespace. For example if you are moviesite.com, and you want to mark a URL on your site as a director you would do:

<html xmlns:moviesite="http://www.moviesite.com/ns#" > 
<head>
....
    <meta property="og:type" content="moviesite:director">

Как проверить себя?

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

  1. Structured Data Testing Tool. Удобный и user-friendly сервис от Google. Для проверки можно вводить как url страницы, так и только микроразмеченный пример кода. Позволяет отследить на лету ошибки в своей микроразметке.
  2. Валидатор микроразметки Яндекса. Похожий инструмент, только от Яндекса, также позволяет проверить как отдельную страницу в интернете, так и просто пример кода.
  3. Валидатор разметки Open Graph от Facebook. Помогает увидеть, как будет выглядеть ваша страница при перепосте.

Теги

При передаче ссылки — и Facebook, и Twitter берут указанную веб-страницу, и читают её теги , чтобы отобразить соответствующую информацию.

Facebook использует протокол , систему классификации для веб-страниц, выходящую за рамки тех тегов , которые уже определены в HTML5. Полный список доступных тегов можно найти на веб-сайте Open Graph. Их довольно много, но на самом деле требуется несколько:

У Twitter есть свои собственные теги , которые похожи на протокол , но используют префикс вместо . Как и в случае с Facebook, требуется всего несколько. Тип формата отображения, также указывается:

Поскольку эти проприетарные теги , в конце концов, ссылаются на одни и те же элементы, было бы идеально, если был какой-то способ объединить их. К счастью, такой способ у нас есть.

Статистика от Facebook

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

<meta property="fb:app_id" content="ID" />

Тег fb:app_id создан для того, чтобы была возможность воспользоваться статистикой на Facebook — с её помощью можно просматривать информацию о переходах на Ваш сайт из Facebook. Для того, чтобы иметь такую возможность, необходимо в разделе Разработки создать новое приложение типа сайт или выбрать из уже имеющихся.

Этот тег необязательный, но Отладчик объектов Open Graph в Facebook будет показывать ошибку.

Контролируйте внешний вид репостов с помощью Open Graph

Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт

Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты

Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.

Для получения же большего охвата используйте возможности таргетированной рекламы. В системе PromoPult вы можете запустить рекламу в myTarget (Одноклассники, проекты Mail.ru) и ВКонтакте из единого интерфейса. Комиссия при этом 0%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.

Как внедрять Open Graph

Вручную

Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:

Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.

С помощью плагинов

Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).

По ссылкам ниже можно найти плагины для вашей CMS:

  • WordPress.
  • Joomla.
  • Битрикс.
  • Opencart.
  • Drupal.
  • .

А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.

Пример внедрения Open Graph на WordPress

Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.

Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.

После активации перейдите в модуль «Социальные мета» в меню плагина:

Укажите настройки:

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

Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».

Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.

Вот вид размеченной ссылки в ленте Facebook:

Примерно по такому же принципу работают другие плагины.

Шаг 1. Внедрение микроразметки сайта Open Graph

Вручную или используя готовые плагины для CMS. Рассмотрим последний вариант на примере WordPress.

Вариант 1

Заходим в панель управления и выбираем раздел «Плагины». В открывшемся меню выбираем «Добавить новый», в строке поиска вводим название плагина, который нас интересует — Open Graph.

Выбираем подходящий вариант и нажимаем «Установить».

Сохраняем изменения и вуаля — установка готова!

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

Вариант 2

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

Сначала нужно добавить протокол Open Graph. Для этого в тег <html> прописываем атрибуты xmlns и prefix. Так мы говорим системе, что на странице будет использоваться OG. Вот пример синтаксиса для активации протокола: <html xmlns:og=»http://ogp.me/ns#»>.

А это пример того, как выглядит внедрение протокола на работающем сайте:

Теперь нужно добавить разметку в метатеги. Смотрим дальше по коду. Нас интересует все, что находится внутри метатега <head>. Именно сюда следует вписать элементы разметки. Так выглядят основные из них:

-og:title — заголовок статьи;

— og:url — адрес страницы;
— og:image — картинка поста;— og:type — тип контента, который присутствует на странице: статья, видео, новость;

— og:site_name — название сайта;

— og:description — краткое описание, превью.

А так — дополнительные:

  • og:local — язык и регион;
  • og:audio — сообщает, что на странице есть аудиофайлы;
  • og:video — сообщает, что на странице есть видеофайлы.

Выбираем те элементы, которые хотим видеть в своих превью и прописываем между тегами <head> и </head>. В итоге должно получиться так:

<!DOCTYPE HTML>
<html lang=»ru»>
<head>
<html prefix=»og: http://ogp.me/ns#»>
<title>ЗАГОЛОВОК СТРАНИЦЫ</title>
<meta property=»og:title» content=»ЗАГОЛОВОК СТРАНИЦЫ» />
<meta property=»og:type» content=»article» />
<meta property=»og:url» content=»ССЫЛКА НА СТРАНИЦУ» />
<meta property=»og:image» content=»ССЫЛКА НА ПРЕВЬЮ» />
<meta property=»og:audio» content=»ССЫЛКА НА АУДИО ФАЙЛ» />
<meta property=»og:description» content=»ОПИСАНИЕ СТРАНИЦЫ» />
<meta property=»og:locale» content=»ru_RU» />
<meta property=»og:locale:alternate» content=»en_US» />
<meta property=»og:site_name» content=»НАЗВАНИЕ САЙТА» />
<meta property=»og:video» content=»ССЫЛКА НА ВИДЕО» />

</head>
<body>
</body>

При необходимости элементы могут содержать дополнительные свойства. Например, в атрибут og:image можно добавить ширину (width) и высоту (height) картинки в пикселях. Исходный код при этом будет выглядеть так: <meta property=»og:image:width» content=»500″ /> или так: <meta property=»og:image:height» content=»400″ />.

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

Разметку OG поддерживает большинство современных соцсетей — Facebook, Printerest, Viber, Telegram, WhatsApp. Twitter тоже есть в этом списке. Но для него мы рассмотрим еще один полезный инструмент — Twitter Cards.

Разметка Open Graph (meta теги)

<meta property="og:locale" content="ru_RU" />

<!-- website(главная) , article (статья), object (другое) -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>

<!-- указываем корень сайта или пусть до файла -->
<meta property="og:url" content="http://site.ru/" />
<meta property="og:site_name" content="Название сайта"/>

<meta property="og:image" content="http://site.ru/images/1.jpg" />
<meta property="og:image" content="http://site.ru/images/2.jpg" />
<meta property="og:image" content="http://site.ru/images/3.jpg" />

Используйте качественные изображения

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

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

×

Замечание для внимательных читателей

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

Продолжаем!

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

Дополнительные метатеги

  • og:audio — URL звукового файла, который относится к описываемому объекту.
  • og:description — краткое описание объекта.
  • og:determiner — слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a, an, the, “”, auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать.
  • og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US.
  • og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта.
  • og:site_name — название сайта, на котором размещена информация об объекте.
  • og:video — URL видео файла, который относится к описываемому объекту.
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

Basic Metadata

To turn your web pages into graph objects, you need to add basic metadata to
your page. We’ve based the initial version of the protocol on
RDFa which means that you’ll place
additional tags in the of your web page. The four required
properties for every page are:

  • — The title of your object as it should appear within the graph,
    e.g., «The Rock».
  • — The of your object, e.g., «video.movie». Depending on
    the type you specify, other properties may also be required.
  • — An image URL which should represent your object within the
    graph.
  • — The canonical URL of your object that will be used as its
    permanent ID in the graph, e.g., «https://www.imdb.com/title/tt0117500/».

As an example, the following is the Open Graph protocol markup for The Rock on
IMDB:

The following properties are optional for any object and are generally
recommended:

  • — A URL to an audio file to accompany this object.
  • — A one to two sentence description of your object.
  • — The word that appears before this object’s title
    in a sentence. An of (a, an, the, «», auto). If is
    chosen, the consumer of your data should chose between «a» or «an».
    Default is «» (blank).
  • — The locale these tags are marked up in.
    Of the format . Default is .
  • — An of other locales this page is
    available in.
  • — If your object is part of a larger web site, the name which
    should be displayed for the overall site. e.g., «IMDb».
  • — A URL to a video file that complements this object.

For example (line-break solely for display purposes):

The RDF schema (in Turtle)
can be found at ogp.me/ns.

Особенности применения микроразметки

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

После разметки статей, нужно проверить корректность внесенных данных.

Проверка Google

Валидатор  Яндекс

Проверка Bing

Open Graph можно еще проверить отладчиком Facebook

Если на сайте используется CMS, то разметку можно прописывать как вручную, так и с помощью плагинов. Особенно много инструментов есть для WordPress: All in One SEO Pack, WP SEO by Yoast, WP Facebook Open Graph protocol.

Внедрить микроразметку статей на сайте не так сложно, а эффект от этого можно получить значительный. Поисковикам и пользователям будет легче найти и полюбить ваши статьи. А любовь – это та энергия, которая позволит продвинуть сайт к самым вершинам выдачи.

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

Структурированные метатеги

Некоторые метатеги могут иметь дополнительные (необязательные) метаданные. Такие метатеги содержат дополнительный знак (двоеточие).

Например, og:image может содержать следующие метаданные:

  • og:image:url — URL изображения, описывающего объект (соответствует og:image).
  • og:image:secure_url — дополнительный URL, если страница открывается по протоколу HTTPS.
  • og:image:type — MIME-тип изображения (формат изображения стандарта MIME).
  • og:image:width — ширина изображения в пикселах.
  • og:image:height — высота изображения в пикселах.
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

og:video может содержать такие же метаданные, как и og:image. Например:

<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

og:audio содержит только некоторые метаданные из вышеперечисленных:

<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

Заключение

ВКонтакте нужно просто указать ссылку (в форме внизу страницы) и нажать «Выполнить». На Facebook же функционала немного больше — можно посмотреть текущую информацию о странице и при надобности сбросить её. И заодно посмотреть, правильно ли оформлена разметка (отмечу, что он может ругаться на разметку, но при этом нормально работать).

На этом всё, что я хотел рассказать про разметку Open Graph. В конце добавлю, что её следует использовать в совокупности со Schema.org для поисковых систем.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector