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

    Общий рейтинг статьи: 0 (проголосовало 0 )
    Опубликовано:  [просмотров 222]


    Сегодня поисковыми системами и социальными сетями придается просто огромное значение техническим моментам оформления контента представленного на 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 довольно нетривиальное, но представленный выше пример поможет вам разобраться в этом вопросе. Также, помимо этих основных элементов имеется еще огромное количество описаний для рейтингов, комментариев и т.п. обязательно используйте максимальное количество элементов схемы микроразметки.

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

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

    Используйте описанные в документации схемы для своих записей в блоге и валидатор преобразования от FaceBook  для проверки микроразметки. Валидатор разметки OpenGraph расположен по адресу: https://developers.facebook.com/tools/debug/


    Связанные записи в блоге

    Обсуждение статьи

    Ваш комментарий: