Микроразметка open graph: что это и как настроить
Содержание:
Как сделать микроразметку статьи?
Рассмотрим примеры применения микроразметки schema.org и Open Graph. Тут есть некоторое различие. В первом случае вся разметка прописывается рядом с телом статьи. При передаче же информации в соцсети описывается как должна выглядеть ссылка на страницу статьи.
Разметка с schema.org
Рассмотрим, как с помощью schema.org можно сделать микроразметку статьи.
Сначала посмотрим, как статья выглядит в HTML без разметки
А теперь этот пример с разметкой
Прежде всего, мы даем роботу знать, что используем в статье разметку schema.org. Это делается размещением в начале тега, включающего статью, следующей записи:
itemscope itemtype=”http://schema.org/Article” id=”main”.
В примере использованы следующие обязательные параметры:
- headline – наименование статьи;
- datePublished – дата публикации в формате ISO 8601;
- image – картинка;
- articleBody – тело статьи;
- author – имя автора;
- publisher – наименование сайта, публикующего статью.
Есть еще необязательные параметры, которые все же желательно указывать:
- dateModified – дата изменения статьи;
- mainEntityOfPage – ссылка на страницу со статьей.
В теге publisher использованы следующие параметры:
- logo — логотип;
- name — наименование организации;
- telephone – телефон;
- address — адрес.
Если статью публикует не организация, а частное лицо, то все равно publisher нужно заполнить, так как параметр обязателен. Иначе Гугл будет ругаться при проверке. Замена Organization на Person не поможет. Можно сознательно не заполнять этот блок и игнорировать предупреждение.
Разметка с Open Graph
Микроразметку Open Graph нужно разместить внутри тегов <html> и <head>.
В блоке <html> указываем роботу на использование разметки Open Graph.
<html xmlns:fb=”http://ogp.me/ns/fb#”>
Все остальное размещается внутри <head>
<meta property="og:title" content="Создание микроразметки статьи "> <meta property="og:type" content="article"> <meta property="og:description" content=" В этом материале познакомимся с таким важным видом семантической разметки как микроразметка статьи."> <meta property="og:url" content="http://nashsite.com/microrazmetka "> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content=" http://nashsite.com/imgrazmetka.jpg "> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta property="og: article:published_time" content="2019-01-22T16:20:30+00:00"> <meta property="og: article:modified_time" content="2019-01-22T17:30:40+00:00"> <meta property="og: article: author" content="Михаил Степанов">
Выглядит здесь все проще, чем с schema.org. Вот что значат использованные теги:
- og:title – название статьи и текст ссылки;
- og:description – описание статьи, которое показывается под заголовком;
- og:type – тип объекта, для статьи применяется article;
- og:locale – локализация, указывать не обязательно, но желательно;
- og:image – ссылка на картинку статьи;
- og:url – ссылка на статью.
Тег article использовать несложно:
- og:article:published_time – дата публикации статьи;
- og:article:modified_time – дата последнего изменения;
- og:article:author – автор статьи.
Инструмент проверки Open Graph
Контролировать работу разметки Open Graph на своем сайте можно с помощью отладчика Facebook.
У него две очень полезные функции:
- Во-первых, когда вы вводите URL страницы, которую хотите разместить в соцсетях, он покажет как будет выглядеть страница, а также любые ошибки и предложения для тегов OG, если таковые имеются.
- Во-вторых, он очищает кеш Facebook. Это очень важный момент. Представьте себе следующее: вы публикуете страницу на Facebook, но затем видите ошибку в миниатюре или в заголовке, возвращаетесь на свой сайт и редактируете теги OG, затем публикуете снова в Facebook. Но ничего не произойдет. Миниатюра останется прежней. Это из-за кеша. Отладчик Facebook позволяет обновить этот кеш на ваших URL, поэтому не забудьте использовать при необходимости.
Также можете ознакомиться с рекомендациями Facebook по OpenGraph.
Why marketers need to know about Open Graph
Social media sites are the major drivers of most of the web’s traffic. Consequently, the ability to harness the power of social meta tags is a vital skill for today’s marketers. The tags can affect conversions and click-through rates hugely.
For example, have you ever shared a link on Facebook only to find that the thumbnail was missing, or there was a totally different picture than you expected? Knowing just a little about Open Graph tags can help you tackle these problems.
Adding Open Graph tags to your website won’t directly affect your on-page SEO, but it will influence the performance of your links on social media, so that means it’s worth looking into. Let’s take a look at the most important meta tags for Facebook and how to optimize them for better sharing.
Open Graph плагин WordPress
Можно использовать специальные, отдельные модули Open Graph в WordPress. Смотрите на этой странице wordpress.org. Или введите в поиск по плагинам, в админ-панели, метку open graph и оп-ля. Выбирайте подходящий вам, ориентируйтесь по количеству установок (популярность) и как часто обновляются:
Результаты по запросу: open graph
Использование Open Graph плагина WordPress, чтобы добавить микроданные для социальных сетей на сайт, самый безопасный и правильный метод. Установка без плагина — только для опытных пользователей. Поэтому, друзья, я не советую начинающим использовать различные коды разметки соцсетей найденные в интернете. Не рискуйте.
В заключение
Добавление метаданных Facebook Open Graph в WordPress — один из хороших способов привлечь больше посетителей/читателей на ваш веб-ресурс.
Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте микроданные для социальных сетей и будьте уверены, что ссылки на ваш сайт будут выглядеть супер привлекательно в любой social networks.
Расшаривание записью в социальные сети (ваши или пользовательские) могут дать дополнительный трафик на сайт WP. Главное: в соц-сетях важна визуальная привлекательность контента
И только так можно привлечь внимание пользователей при просмотре ленты новостей
Значение МЕТА-тега Title
Можно много нахваливать этот тег и говорить, насколько необходима его оптимизация, но в первую очередь нужно дать понимание, почему он важен.
Title в результатах поиска. Пожалуй, самая очевидная и наиболее важная задача правильно составленного Title заключается в том, что именно его будет видеть пользователь, задавая поисковику вопрос. Для составления заголовка необходимо правильно подобрать ключевой запрос для контекстной рекламы Директ, это позволит привлечь на сайт теплых клиентов, заинтересованных в решении определённой проблемы или задачи. Title должен дать понять человеку, решение, которое он ищет находиться именно у вас.
Тайтл информирует людей о содержании страницы. Поиск информации в интернете редко ограничивается посещением одного сайта, люди зачастую открывают несколько вкладок, и надпись на этой самой вкладке будет надписью Title. Это позволяет посетителю понять, что находиться на этой странице или сайте в целом. Если заголовок составлен неправильно или текст вообще отсутствует, пользователь вероятнее всего закроет вкладку, даже не заглянув внутрь.
Title и добавление сайта в избранное. Все популярные браузеры уже давно имеют такую функцию как возможность сохранить сайт в избранное, что прекрасно влияет на контент-маркетинг и продвижение с его помощью. Люди находят полезные страницы, делятся ими с друзьями и сохраняют, чтобы не потерять. За название вкладки в сохранённом виде отвечает опять же Title.
Оптимизация тега Title
Главное что нужно учитывать при составлении заголовка для страницы сайта, он не должен превышать 60-100 символов. Это необходимо для того, чтобы заголовок хорошо выглядел в поисковой выдаче
Представьте, что вы составили красивый и броский заголовок, он должен привлекать внимание, а поисковик просто обрезал его, сделав нелепым и не информативным. Сделайте заголовок коротким, вложите в него исключительно суть, и пусть содержание страницы сделает всё остальное.
Информативность и полезность заголовка сайта, подразумевает ещё тот факт, что в нём следует избегать различных символов, таких как (!?=/+|_»:;). Попытка «украсить» ими заголовок даст обратный эффект и понизит его в выдаче. Так же краткость заголовка учитывает то, что в нём нужно обойтись без вводных фраз и приветствий, только суть, только полезная информация.
Хорошим тоном при составлении заголовков для сайта будет наличия у них общего характерного стиля и построения фраз. Люди, занимающиеся SEO продвижением сайта в поисковиках, используют высокочастотные ключевые запросы ближе к началу заголовка, а низкочастотные, наоборот, в конце названия страницы. Это в значительной мере повышает сайт в выдаче поисковиков, главное, что нужно учитывать – целевой запрос обязан соответствовать содержанию страницы.
Итог
Тег Title можно назвать своего рода визиткой сайта, он должен быть кратким, информативным и говорить о том, что решение проблемы пользователя находиться именно здесь. Title имеет огромное значение для любого вида продвижения от SEO до контент-маркетинга, за счёт того, что люди видят его в поисковой выдаче, и при сохранении сайта в избранное. Title не нужно пытаться украшать лишними символами такими как (!?=/+|_»:;), и самое главное, он должен полностью соответствовать содержанию страницы.
NOFOLLOW в ссылках
Nofollow используется как значение атрибута rel в теге <a>. И отвечает за индексацию каждой конкретной ссылки на странице.
<a href=»url» rel=»nofollow»>ссылка</a>
Атрибут rel показывает отношение данного документа к документу, на который ссылается.
В данном случае, указывая атрибуту rel значение nofollow, мы просим поисковую систему не переходить по внешней ссылке, а также подчеркиваем то, что мы не отвечаем за содержание, на которое ссылаемся.
По ссылкам, оформленным с данным значением, не передается авторитет нашей страницы, другими словами не передается тИЦ и Page Rank. Однако стоит также учитывать и то, что в случае с PR вес все же уходит, но не на сайт, на который мы ссылаемся, а в никуда в прямом смысле этого слова. По поводу тИЦ точной информации о том, уходит вес или остается на сайте — нет.
Остановимся подробнее на распределении и передаче веса в Google.
Итак, абсолютно не важно, сколько ссылок у вас имеют атрибут rel=»nofollow», а сколько без него. Если на странице стоит 10 ссылок, то каждая ссылка получит часть авторитета вашей страницы, и каждая из них передаст этот вес, но если в одном случае вес передастся на конкретный сайт, то в другом случае – вес просто уйдет в никуда
Давайте представим немного, как видит всемирную паутину поисковая система. Все сайты связаны между собой ссылками, абсолютно все. Первый ссылается на второй, второй на третий … тысячный на тысяча первый и миллион какой-то в итоге обязательно будет ссылаться на первый.
Таким образом цепочка замыкается, все сайты находятся в цикле, и вес, который передает первый сайт всегда возвращается к нему через сотни и тысячи других сайтов. Также не забываем, и я уже писала об этом в статье про перелинковку, что этот вес передается не единожды, а постоянно, при этом с течением времени вес становится только больше, все сильнее увеличивая свой авторитет. Именно на этом принципе строится перелинковка сайта.
Теперь представим, что первый сайт закрыл свои ссылки атрибутом rel=»nofollow». Вес не перейдет на второй сайт, а утечет в никуда, и второй сайт не получит ту часть веса, которую должен был, не сможет передать его дальше по цепочке, и в итоге, пройдя весь цикл, Х-какой-то сайт, который должен был передать вес на первый сайт, передаст его в значительно меньшем количестве, чем мог бы. Итак, каждый раз не получая ту часть веса, которую вы самостоятельно пускаете в никуда, закрывая свои ссылки атрибутом rel=»nofollow», сайт не может передать вам ее, из чего следует, что закрывая свои ссылки, вы сами лишаете себя увеличения веса, и такого показателя, как PR.
Чтобы было проще это понять, представим, что каждая ссылка передает вес, равным единице.
Таким образом, если первый сайт не закрыл ссылку атрибутом rel=»nofollow», то в конце цикла получит больший вес от входящих ссылок, чем в случае, если исходящие ссылки будут закрыты.
Но есть ситуации, когда действительно необходимо закрывать ссылки значением nofollow. Обратимся к источникам, Яндекс и Google, что они говорят по этому поводу?
Выдержка из раздела Помощь Яндекса:
Выдержка из раздела Справка Google:
Мы должны закрывать ссылки в тех разделах своего сайта, где любой пользователь может оставить свою ссылку, за которую мы не сможем поручиться, гарантировать, что там качественное содержание.
Также мне хотелось бы уделить внимание ещё одному моменту. Некоторые ярые борцы за закрытые ссылки ставят rel=»nofollow» не только в самих ссылках, т.е
в теге , но и везде, на что только хватает фантазии. И в теге
Давайте не будем выдумывать свои собственные стандарты, а обратимся к существующим, которые разрабатывает международная организация W3C.
Значение rel=»nofollow» можно использовать только в теге , и в других тегах его использовать нельзя!
Итак, мы выяснили, когда стоит пользоваться атрибутом ссылки rel=»nofollow», а когда это не целесообразно. Также мы больше не будем вставлять его никуда, кроме одного единственного тега, обозначающего ссылку
Теперь уделим внимание тегу noindex.
Влияние внутренних ссылок на индексацию сайта
Внутренние ссылки являются основной и практически единственной причиной того, что нам приходится закрывать ненужные и попавшие в индекс страницы разными метатегами и директивами robots.txt. Однако реальность такова, что ненужные роботам страницы очень даже нужны пользователям сайта, а следовательно должны быть и ссылки на эти самые страницы.
А что же делать? При любом варианте запрета индексации ссылок (rel=”nofollow”) и страниц (robots.txt, meta robots), вес сайта просто теряется, утекает на закрытые страницы.
Вариант №1. Большинство распространенных CMS имеют возможность использования специальных тегов (в DLE точно это есть, я сам этим очень активно пользуюсь) при создании шаблонов оформления, которые позволяют регулировать вывод определенной информации. Например, показывать какой-либо текст только гостям или группе пользователей с определенным id и т.д. Если таких тегов вдруг нет, то наверняка на помощь придут логические конструкции (такие конструкции есть в WordPress, а так же форумных движках IPB и vbulletin, опять же, я сам пользуюсь этими возможностями), представляющие из себя простейшие условные алгоритмы на php.
Так вот, логично было бы скрывать неважные и ненужные ссылки от гостей (обычно эту роль играют и роботы при посещении любого сайта), а так же скрывать ссылки на страницы, которые выдают сообщение о том, что вы не зарегистрированы, не имеете прав доступа и все такое. При необходимости можно специально для гостей выводить блок с информацией о том, что после регистрации у них появится больше прав и возможностей, а значит и соответствующие ссылки появятся 😉
Но бывают такие моменты, что ссылку нельзя скрыть или удалить, потому что она нужна, и нужна сразу всем – гостям, пользователям… А вот роботам не нужна. Что делать?
Вариант №2. В редких случаях (хотя последнее время все чаще и чаще) бывает необходимо, чтобы ссылки или даже целые блоки сайта были недоступны и невидны роботам, а вот людям отображались и работали в полной мере, вне зависимости от групп и привилегий. Вы уже, наверное, догадались, что я говорю про сокрытие контента при помощи JavaScript или AJAX. Как это делается технически, я не буду расписывать, это очень долго. Но есть замечательный пост Димы Dimox’а о том, как загрузить часть контента с помощью AJAX на примере WordPress (линк). В примере рассказывается про подгрузку целого сайдбара, но таким же методом можно подгрузить одну только ссылку, например. В общем, немного покопаетесь и разберетесь.
Так вот, если хочется какую-то часть контента роботам не показывать, то лучший выбор – JavaScript. А после того как провернете всю техническую часть, проверить это на работоспособность поможет замечательный плагин для FireFox под названием QuickJava. Просто с помощью плагина отключите для браузера обработку яваскрипта и перезагрузите страницу, весь динамически подгружаемый контент должен пропасть 😉 Но помните, что тут тоже надо знать меру!
И, кстати, еще парочка интересных моментов, которые необходимо знать:
Яндексу в индексации сайтов помогает Яндекс.Метрика, которая автоматически пингует в индекс все посещенные страницы, на которых установлен код Метрики. Но эту функцию можно отключить при получении кода счетчика, установив соответсвующую галочку.
Возможно как то в индексации замешаны Яндекс.Бар и сборка браузера Хром от Яндекса, но в этом я не уверен.
Но вот для Гугла есть информация, что роль поискового робота выполняет сам браузер Google Chrome. Такие уж они хитрецы.
Так что, как видим, скрыть информацию от роботов почти невозможно, если не предпринимать специальные меры.
Дополнительные мета- теги:
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
<meta itemprop="name" content="Название сайта"/> <meta itemprop="description" content="Описание сайта"/> <meta itemprop="image" content="https://website.com/image250X250.png"/>
<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"/>
<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"/>
Properties
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:title | any text | The Rock | required | after a page receives 50 likes the title becomes unchangeable | |
| og:type | see below | required | after a page receives 10,000 likes the type becomes unchangeable | ||
| og:url | «proper»/canonical format for URL of current page | fully qualified URL | required | ||
| og:image | image to associate with the content of the page | fully qualified URL | required | ||
| og:site_name | human readable name of the website this page is contained in | any text | IMDb | required | |
| fb:admins | comma separated list of users who should have administrative access to any Facebook pages created about this web page | comma separated list of Facebook user ids | required if no defined | ||
| fb:app_id | Facebook ID for an application that owns this page | Facebook application ID | 118381521562237 | required if no defined | |
| og:description | description of the page | any text |
Locations
adding latitude and longitude coordinates
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:latitude | 37.416343 | ||||
| og:longitude | -122.153013 |
adding a «human» readable address
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:street-address | 1601 S California Ave | none | |||
| og:locality | Palo Alto | none | |||
| og:region | CA | none | |||
| og:postal-code | 94304 | none | |||
| og:country-name | USA | none |
Contact Information
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:email | me@example.com | none | |||
| og:phone_number | +1-650-123-4567 | none | |||
| og:fax_number | +1-415-123-4567 | none |
Videos
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:video | fully qualified URL to a SWF video | none | Facebook supports embedding video in SWF format only. You must include a valid og:image for your video to be displayed in the news feed. | ||
| og:video:width | pixel width of video described in og:video | integer ≤ 398 | 385 | must have og:video | |
| og:video:height | pixel height of video described in og:video | integer ≤ 460 | 400 | must have og:video | |
| og:video:type | mime-type of video file described in og:video | application/x-shockwave-flash | must have og:video |
Audio
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:audio | fully qualified URL to an audio file | none | not sure what all formats are supported beyond mp3 | ||
| og:audio:title | title of audio described in og:audio | any text | «Amazing Soft Rock Ballad» | must have og:audio | |
| og:audio:artist | pixel height of audio described in og:audio | any text | «Amazing Band» | must have og:audio | |
| og:audio:album | mime-type of audio described in og:audio | any text | «Amazing Album» | must have og:audio | |
| og:audio:type | mime-type of audio file described in og:audio | any text | «application/mp3» | must have og:audio |
Others
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:upc | UPC code of the item | none | may be an expectation of og:type being one under «Products and Entertainment» | ||
| og:isbn | ISBN code of book if describing a book | «978-0470878040» | none | may be an expectation of og:type being one under «Products and Entertainment» |
Conclusion
The final code for both Facebook and Twitter should look more-or-less like this:
It’s surprising how few people optimize these tags. It’s worth doing because it helps you stand out and draw more clicks and views, and it has some indirect positive impact on your SEO credibility—all things that eventually lead to more profit.
The functionalities described here don’t cover everything you can do with Open Graph. Check out some of the more advanced OG integrations with Facebook and some new features from Twitter (like Lead Generation Cards).
See How My Agency Can Drive Massive Amounts of Traffic to Your Website
- SEO — unlock massive amounts of SEO traffic. See real results.
- Content Marketing — our team creates epic content that will get shared, get links, and attract traffic.
- Paid Media — effective paid strategies with clear ROI.
Что у нас получилось
И на этом, пожалуй, все. Стоит отметить, что в документации и есть множество других мета тегов для HTML сайта, которые можно использовать для распространения контента другого типа. Но я считаю, что приведенного ниже кода будет вполне достаточно:
<!-- Essential META Tags --> <meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm"> <meta name="twitter:card" content="summary_large_image"> <!-- Non-Essential, But Recommended --> <meta name="og:site_name" content="European Travel, Inc."> <meta name="twitter:image:alt" content="Alt text for image"> <!-- Non-Essential, But Required for Analytics --> <meta property="fb:app_id" content="your_app_id" /> <meta name="twitter:site" content="@website-username">
Данная публикация является переводом статьи «The Essential Meta Tags for Social Media» , подготовленная редакцией проекта.
Тег noindex
Noindex применяется для того, чтобы сообщить роботу «Яндекса» о том, что нельзя индексировать определенные части веб-страницы. Тег размещается в HTML-коде и имеет закрывающий тег. Контент, оказавшийся между открывающим и закрывающим тегами, будет игнорироваться ботом.
Тег noindex был придуман «Яндексом», и в настоящее время только два поисковика учитывают его: «Яндекс» и «Рамблер». Боты других поисковых систем игнорируют тег и все равно индексируют всю веб-страницу полностью. Кроме того, тег не может запретить индексировать гиперссылки и передавать по ним вес другому веб-ресурсу.
Запрещающий тег Noindex для Яндекса
Тег Noindex
Валидность
Тег <noindex> не стандартизирован, поэтому его применение может привести к появлению ошибок в коде. Вследствие этого его записывают немного по-другому. В коде страницы этот тег выглядит так:
<!—noindex—>
«Текст, который не должен индексироваться Яндексом»
<!—/noindex—>
Восклицательные знаки и дефисы применяются для валидации кода. Если не использовать эти символы (а писать без них, как это бывает с обычными тегами), то проверка на валидность будет показывать ошибку.
При верном использовании этого тега страница будет правильно восприниматься «Яндексом», Google и другими поисковыми роботами. При этом «Яндекс» поймет, что часть контента надо исключить из индексации, а Google сделает вывод, что в коде нет ошибок, и будет индексировать полностью. У поисковой системы «Гугл» нет аналогичного тега, несмотря на то, что у такого элемента есть много плюсов.
Когда применяется noindex
Этот тег приносит неоспоримую пользу веб-ресурсу. Его применяют, когда надо:
-
скрыть от ботов часть HTML-кода, например коды счетчиков;
-
запретить индексировать часто меняющийся текст веб-страницы, который бессмысленно добавлять в индекс;
-
скрыть неуникальные фрагменты текста, чтобы не терять позиции в поисковой выдаче из-за неуникальности.
