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

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

 
 
Логотип GITA-DEV

Автор: Черноусов Антон aka Gita-Dev
Опубликовано: 06 Мар 2018 (последние правки 1 месяц)

content cv dev видео

Я конечно не 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/

Похожие статьи

Запуск Web-приложений Django в Production-режиме (UWSGI/Nginx)

Запуск Web-приложений Django в Production-режиме (UWSGI/Nginx)

Django-приложения довольно сильно отличаются от php-приложений как структурой проекта, так и методом запуска.  Django-приложения по методу запуска больше похожи на Java, чем на PHP и классические ASP-проекты. Сегодня мы будем строить классическую связку из python-приложения и web-сервера Nginx обслуживающего реверс-проксирование запросов к приложению и предоставление файлов из каталогов media и static. LXC-изоляция в моем случае используется для поддержания python-окружения проекта и именно таким способом я предпочитаю изолировать проекты, а виртуальное окружение я предпочитаю не использовать, так как пару раз уже были проблемы при переносе Django-проектов.


Сбор данных из Yandex Wordstat при помощи Splinter Web Testing Tool

Сбор данных из Yandex Wordstat при помощи Splinter Web Testing Tool

Для одного из свежих небольших проектов мне потребовался актуальный словарь запросов из Yandex и Google. У каждого из этих поисковых гигантов есть свои методы проведения запросов для анализа потенциальной поисковой выдачи. Естественно, что эти инструменты активно используются в черном и сером SEO, поэтому за множественные запросы вас скорее всего сразу забанят или предложат ввести капчу.


Мои сертификаты WEB Frontend-разработка (Javascript и jQuery)

Мои сертификаты WEB Frontend-разработка (Javascript и jQuery)

Как вы наверное поняли, я обычно работаю один и поэтому мне приходится писать и Front и Back, до недавнего времени, я обходился банальными Django-формами и шаблонами для построения интерфейса, но все таки пришел 21-ый век и теперь уже без JS просто никуда.


Отзывы и комментарии