Мой блог - SEO-оформление статей для поисковых и социальных сетей

SEO-оформление статей для поисковых и социальных сетей

Сегодня поисковыми системами и социальными сетями придается просто огромное значение техническим моментам оформления контента представленного на web-странице. К этим техническим-аспектам относятся разного рода мета-теги, микроразметка Schema.org и Open Graph, элементы подтверждения прав на владения контентом и многое другое. И хотя SEO-оптимизаторы и говорят, что разного рода мета-теги ушли в прошлое и все что вам требуется, это писать сайты для людей мне все же кажется, что они немного лукавят. Точнее много лукавят, так как на форумах они говорят одно, а в рекомендациях SEO-аудита говорят совершенно другое. Эта заметка является компиляцией технических аспектов оформления web-страниц подсмотренных мной в разного рода SEO-учебниках и документах по SEO-аудитам сайта которые мне попадались в руки. Обратите внимание, что аспекты подбора ключевых слов и т.п. я не рассматриваю, а рассматриваю только кодовую часть оформления web-страниц.

Фотография автора

Автор: Антон Черноусов
Опубликовано: 4 месяца, 1 неделя (последние правки: 0 минут назад) - 0 комментариев
Категории записи: SEO, WEB


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

Сегодня поисковыми системами и социальными сетями придается огромное значение техническим моментам оформления контента представленного на web-странице и к этим техническим аспектам относятся разного рода мета-теги, микроразметка Schema.org и Open Graph, элементы подтверждения прав на владения контентом и многое другое. И, хотя, SEO-оптимизаторы и говорят, что разного рода мета-теги ушли в прошлое и все что вам требуется - это писать сайты для людей, мне все же кажется, что они немного лукавят. Точнее, много лукавят, так как на форумах они говорят одно, а в рекомендациях SEO-аудита говорят совершенно другое.

Эта заметка является компиляцией технических аспектов оформления web-страниц подсмотренных мной в разного рода SEO-учебниках и документах по SEO-аудитам сайта, которые мне попадались в руки, но обратите внимание, что аспекты подбора ключевых слов и т.п. я не рассматриваю, а рассматриваю только кодовую часть оформления web-страниц.

HTML-элементами первостепенной важности являются следующие теги:

  • title - Основной SEO-тег, описывающий заголовок web-страницы, отображаемый в таб-закладке браузера, должен быть уникальным для каждой страницы, так же считается, что он должен совпадать с текстом заголовка H1 страницы, но я считаю, что это не обязательно.
  • description - По поводу этого html-тега споры между SEO-шниками не утихают и большинство сходится на мнении, что этот тег более не используется. Но, обратите внимание, на панель google-вебмастера в раздел HTML-оптимизация и можете увидеть там ошибки "Повторяющееся метаописание" (или не увидеть если у вас все описания уникальны). Какой мы можем из этого сделать вывод? Правильный вывод - это то, что мета-тег description является важным тегом и должен быть уникален.
  • keywords - Насчет этого, некогда очень важного тега, я сейчас сильно сомневаюсь, но я все же предпочитаю выставлять ключевые слова в этот тег.

Пример тегов:

<title>SEO-оформление статей для поисковых и социальных сетей</title>
<meta name="description" content="Сегодня вы просто обязаны использовать микроразметку Schema.org и Open Graph" />
<meta name="keywords" content="Web, SEO, Social networks, HTML">

Мета элементы второстепенной важности:

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

  • author - Читаемое имя автора документа
  • copyright - Сведения о авторских правах
  • publisher - Ссылка на профиль Google+ автора статьи. Обратите внимание, что желательно размещать анонсы статей заранее на Google+ перед публикацией на основном сайте (если ваша CMS позволяет так делать), таким образом, вы подтверждаете авторство уникального текста.

Пример тегов:

<meta name="author" content="Chernousov Anton"/>
<meta name="copyright" content="HELP-ME-24.COM Team">
<link rel="publisher" href="https://plus.google.com/b/116808512852552582069/+Help-me-24" />

Микроразметка Schema.org

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

Различные варианты оформления схем данных вы можете найти на официальном сайте http://schema.org/docs/schemas.html. Просто выберите подходящую схему данных, опишите как можно больше элементов на странице и проверьте валидатором получившийся результат.

Рассмотрим типовое использование схемы для оформления записи в блоге:

<div id="blog_post" itemscope="" itemtype="http://schema.org/BlogPosting">
<h1 itemprop="name headline">Заголовок статьи</h1>
<div itemprop="datePublished" content="2017-03-09T05:40:51+01:00">Опубликовано: 9 Марта 17</div>
<div itemprop="dateModified" content="2017-03-22T14:55:06+00:00">Обновлено: 22 Марта 17</div>

<div itemprop="author">
<span itemscope itemtype="http://schema.org/Person">
Posted by: <span itemprop="name">Anton Chernousov</span>
</div>

<span itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="name" content="HELP-ME-24.COM">
<span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url image" src="/static/main-logo.png" style="display:none;"/>
</span>
</span>

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="/seo-tags/seo-about-image-header.png" alt="SEO-оформление">
<meta itemprop="width" content="138">
<meta itemprop="height" content="138">
</div>

<meta itemscope itemprop="mainEntityOfPage"
itemType="https://schema.org/WebPage" itemid="{{record.document_url}}"
content="{{record.document_title}}"/>

<div class="content" itemprop="articleBody">Контент статьи...</div>

</div>

Валидатор микроразметки с подсветкой предупреждений и анализом микроданных на html-странице можно найти по адресу https://search.google.com/structured-data/testing-tool.

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

  • headline - Ключевые заголовки H1 и H2
  • datePublished - Дата публикации статьи
  • dateModified - Дата последней модификации
  • articleBody - Текст статьи (обязательно используйте этот тег чтобы показать поисковой системе где у вас находится основной контент)
  • author -  Автор записи (описывается блоком Person)
  • image - Рекомендуется использовать микроразметку для всех изображений статьи, но, на мой взгляд, это перебор, хотя, это может повысить вероятность попасть в поиск по картинкам от Google. Я, в свою очередь, применяю полную микроразметку на иконку статьи, исключительно для того чтобы валидатор не ругался.
  • publisher - Сайт где опубликована статья (для гугла валидной является специфичная схема Organization с логотипом компании и т.п.)
  • mainEntityOfPage - Основная страница (необязательный элемент, но можно добавить и этот элемент что бы валидатор не показывал предупреждения).

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

Проверка микро-разметки валидатором от Google

При проверке валидатором микроразметки от Google у вас не должно остаться предупреждений и ошибок.

Подсказки для социальных сетей OpenGraph

С оформлением контента для поисковиков мы разобрались и теперь переходим к социальным сетям. OpenGraph - система похожая на микроразметку Schema.org и в некотором смысле ее дополняющая, как и рассмотренная ранее Schema.org она предназначена для подсказки социальным сетям о контенте размешенном на странице. Официальный сайт OpenGraph находится по адресу: http://ogp.me/

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

Валидатор разметки OpenGraph расположен по адресу: https://developers.facebook.com/tools/debug/

Пожалуйста, оцените мою статью (всего оценок 0, средняя оценка 4.00):

Комментарии к статье:

Пока комментариев нет

Оставьте комментарий:

обязательно

обязательно (не публикуется)

необязательно

обязательно

обязательно

Последние записи

Архив

2018

Категории

Ленты

RSS / Atom