Мета-тэги, Open Graph, микроразметка

#seo #open graph #микроразметка #schema.org #ruby #rails #поисковая оптимизация #сео #о блоге

Допустим вы реализовали на своём сайте красивый и понятный для людей дизайн. Но что делать, если ваш посетитель - не человек? Как роботу поисковика или соц. сети понять, что у вас и где? В этом посте я опишу 3 способа, с которыми только что сидел разбирался.

1. Мета-тэги

С мета-тэгами многие знакомы и так. Обычно они вставляются в секцию head и описывают такие вещи, как кодировка вашей страницы, её описание, ключевые слова и т.д.

Кроме них, поисковику важен ещё заголовок title страницы, именно его вы увидите в поисковой выдаче, и, возможно, другие.

Вот что живёт в секции head моего блога (пример для страницы поста):

<title>Vizvamitra's blog | Как улучшить свои навыки при написании блога</title>
<meta name="description" content="О том, что ещё можно было бы реализовать в рамках задачи написания блога" />
<meta name="keywords" content="о блоге, планы, обучение" />
<link rel="author" href="https://plus.google.com/116744773779971246072/" />

2. Open Graph Protocol

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

У себя в блоге для каждого поста я отрисовываю на его странице вот такой набор og-тэгов:

<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
  <head>
    ...
    <meta property="og:title" content="Как улучшить свои навыки при написании блога" />
    <meta property="og:description" content="О том, что ещё можно было бы реализовать в рамках задачи написания блога" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="http://vizvamitra.ru/articles/kak-uluchshit-svoi-navyki-pri-napisanii-blogha" />
    <meta property="og:image" content="http://vizvamitra.ru/og_image.jpg" />
    <meta property="og:image:type" content="image/jpg" />
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    <meta property="og:site_name" content="Vizvamitra&#39;s blog" />
    <meta property="og:locale" content="ru_RU" />
    <meta property="article:published_time" content="2015-04-29T18:26:00+03:00" />
    <meta property="article:modified_time" content="2015-05-01T18:31:43+03:00" />
    <meta property="article:author" content="vizvamitra" />
    <meta property="article:tag" content="о блоге" />
    <meta property="article:tag" content="планы" />
    <meta property="article:tag" content="обучение" />
  </head>
  ...
</html>

И при вставке ссылки на пост в VK или Facebook они рисуют её так:

vk.com facebook.com

Красивая отрисовка ссылок в соц. сетях - далеко не всё, что можно делать используя OpenGraph, но это тема отдельной большой статьи, а я ленивый.

3. Семантическая разметка (микроразметка)

Вот что пишет о ней Яндекс (источник):

Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.

Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.

Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов

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

Сравните сниппеты в поисковой выдаче для страницы сайта, участвующего в партнерской программе Яндекс.Словарей – неразмеченного и размеченного семантической версткой.

  • Сайт не использует семантическую разметку:

  • Сайт использует семантическую разметку:

Назначение в целом понятно, теперь посмотрим на пример. Для примера возьмём html-код поста:

<article itemscope itemtype='http://schema.org/BlogPosting'>

  <header>
    <meta content='description' itemprop='description'>
    <h1 itemprop='headline'>Тестовая запись</h1>
    <div>
      <a href="/?tags[]=test">
        #<span itemprop="keywords">test</span>
      </a>
      <a href="/?tags[]=schema">
        #<span itemprop="keywords">schema</span>
      </a>
    </div>
  </header>

  <div class='body' itemprop='articleBody'>
    <p>Тут какой-то текст</p>
  </div>

  <footer>
    <div class='row'>
      <div>
        <time datetime='2015-04-27T21:11:00+03:00' itemprop='datePublished'>
          2015.04.27, 21:04
        </time>
      </div>
      <div>
        <a href="/">Назад</a>
      </div>
    </div>
  </footer>

</article>

Сначала объявляются itemtype (blogPost) записи и itemscope (область, содержимое которой будет запись описывать), а потом с помощью атрибута itemprop указываются элементы, содержащие те или иные атрибуты поста.

Названия атрибутов приписаны в описании itemtype'а (http://schema.org/BlogPosting для поста в блоге).

Проверить правильность разметки можно валидатором гугла либо валидатором Яндекса

Живой пример можно посмотреть, почитав исходники блога schema.org

Напоследок о реализации этого всего в моём блоге

Для рендеринга мета-тэгов и Open Graph'а я использовал гем meta-tags.

В layout'е вставляем в head следующее:

%head
  = display_meta_tags
  -# ...

В ApplicationController'е:

class ApplicationController < ActionController::Base
  before_action :set_blog_info, only: [:index, :show, :new, :edit]

  # ...

  def set_blog_info
    set_meta_tags(
      site: 'Vizvamitra\'s blog',
      author: 'https://plus.google.com/116744773779971246072/',
      og: {
        image: "#{root_url}og_image.jpg",
        'image:type' => 'image/jpg',
        'image:width' => 200,
        'image:height' => 200
      }
    )
  end
end

В ArticlesController'е:

class ArticlesController < ApplicationController
  # ...

  # GET /articles/:id
  def show
    @article = Article.published.find(params[:id])
    set_meta_tags meta_tags_for_show
  end

  # ...

  private

  def meta_tags_for_show
    {
      title: @article.title,
      description: @article.description || @article.title,
      keywords: @article.tags,
      og: {
        title: @article.title,
        description: :description,
        url: article_url(@article),
        type: 'article',
        locale: 'ru_RU',
        site_name: 'Vizvamitra\'s blog'
      },
      article: {
        published_time: @article.published_at.try(:iso8601),
        modified_time: @article.updated_at.try(:iso8601),
        expiration_time: @article.expires_at.try(:iso8601),
        author: @article.author.name,
        tag: @article.tags
      }
    }
  end

end

(конечно, держать такую гору лишнего в контроллерах не хорошо, так что советую перенести всё, что генерирует хэш опций для set_meta_tags, куда-нибудь в отдельный класс)

Ну а микроразметку прописываем в шаблоне поста.