Настройка сайта для поисковиков и скринридеров

Современный сайт — это не только интерфейс пользователя. Чтобы сайт «взлетел» нужно многое добавить после реализации макета в вёрстке. Наряду с быстродействием, оптимизацией загрузки контента и кода, важно уделить внимание настройке сайта под поисковые системы и социальные сети, отработать вариант использования сайта с помощью скринридеров и другое.

Для этого необходимо разобраться с тем, как различные сервисы, службы, приложения «читают» сайт, как подготовить его для них и как сделать это правильно.

Наверняка вы слышали про SEO — поисковую оптимизацию (Search Engine Optimization), суть которой заключается в том, чтобы вы сначала появились в поисковом индексе Yandex, Google, Bing и прочих поисковых системах, а потом стали приближаться к первой странице выдачи по определённым поисковым запросам пользователей. Процесс такой оптимизации состоит из двух больших этапов:

1. Настройка сайта, которая нужна, чтобы сайт стал доступен в индексе.
2. Оптимизация контента сайта и добавление ссылок на него со сторонних ресурсов.

Разберём особенности первого этапа и рассмотрим, что нужно, чтобы сайт был максимально удобным для чтения поисковой системой.

Поисковики регулярно индексируют сайты. Как правило, индексация проходит в несколько этапов:

1. Обнаружение новых ссылок.
2. Индексация страниц.
3. Определение поведения пользователя на странице.
4. Постоянное обновление индекса страницы.

На первом этапе работает специальная программа, которая вносит в базу данных поисковика новые и проверяет старые ссылки. Если программа обнаруживает новую ссылку, то она выполняет несколько действий: проверяет её на спам, на обнаружение вредоносных программ, нормализует, проверяет на дубликаты и так далее. Если ссылка прошла все проверки, то она будет добавлена в базу данных поисковой системы.

По адресам страниц из базы данных регулярно заходит поисковый робот (веб-паук, веб-краулер), основной функцией которого является составить поисковый индекс.

Индексация — это составление статистического отчёта о содержимом страницы по определённым правилам. На основе этого отчёта и ряда других факторов определяется положение страницы в рейтинге релевантности по тому или иному поисковому запросу пользователя. Современные поисковые системы содержат тысячи критериев для определения этого положения относительно других страниц. Важно подготовить каждую страницу для встречи с поисковым ботом, результаты этой встречи сильно повлияют на популярность вашего сайта.

Попасть в индекс — это только первый шаг. Рейтинг страницы в интернете всё время меняется. На положение страницы в рейтинге оказывают влияние не только количество страниц, которые ссылаются на вашу страницу, но и контент. Большое значение имеет и поведение пользователя на странице. Чем больше пользователь взаимодействует со страницей, тем лучше. Поэтому важно уделять внимание содержимому, дизайну и пользовательскому опыту.

Веб-краулер регулярно проходит по существующим адресам в базе и проверяет наличие страницы или ответ сервера при запросе страницы. Если статус страницы корректен, но содержимое изменилось, то бот производит индексацию и заново обновляет информацию о странице в базе данных. Период проверок меняется, как правило, в зависимости от популярности страницы.

Для того, чтобы поисковая система смогла правильно проиндексировать страницу, существует несколько способов подсказать поисковой системе, какая информация содержится на странице. Есть ряд общепризнанных способов и ряд способов, специфичных для конкретных поисковых систем. Мы разберём первую группу, поскольку она является универсальной.

При формировании веса слов в индексе страницы поисковый робот опирается не только на частоту их употребления, но и на теги, внутри которых эти слова употреблены. Заголовкам, как правило, отдаётся наибольший вес (для поисковиков имеет значения заголовки первых трёх уровней). Затем идут ссылки (анализируется текст внутри <a></a> и атрибут title), описания картинок (атрибут alt в теге <img>), выделенный текст (парные теги <strong>, <b>, <em>, <i>, <mark>, <u> и прочие). Алгоритм определения весов у каждого поисковика свой, но выделенный текст анализируется особым образом.

Имеет значение структура тегов. Например, будет иметь значение, каким образом расставлены секции (<section>) внутри текста статьи (например, <article>), для формирования структурированного текста. Весовые коэффициенты имеют огромное значение в ранжировании, они влияют на положение страницы в поисковой выдаче.

Мета-описание — это информация, которая не отображается браузером, но помогает поисковым системам понять общую тематику страницы и правильно отобразить сайт (сформировать сниппет) в результатах выдачи. Мета-описание страницы указывается в специальных тегах в шапке страницы внутри секции <head>. Наиболее важными для поискового робота являются два тега: тег заголовка страницы <title> и
мета-тег описания страницы <meta name="description" content="...">. В атрибуте content содержится краткое описание страницы.

Особым классом мета-тегов являются теги, которые позволяют красиво отобразить ссылку на вашу страницу в социальных сетях и мессенджерах. Необходимости в таких тегах нет. Любой современный мессенджер или социальная сеть сформирует минимальный сниппет на основе заголовка страницы и краткого описания. Но специальные теги позволяют настроить отображение намного тоньше.

Для пользователей очень важно как выглядит ссылка. Количество переходов на ваш сайт из социальных сетей учитывается поисковыми системами через подключение специальных скриптов, например, Google Analytics или Яндекс Метрика. Эти переходы используется поисковой системой для определения рейтинга сайта в поисковой выдаче.

Признанным стандартом являются теги схемы Open Graph. Они хорошо описаны в документации от Facebook и Google.

Формат мета-тегов выглядит так:

        
          
          <meta property="og:title" content="Заголовок"><meta property="og:type" content="website"><meta property="og:url" content="https://www.example.com/">
          <meta property="og:title" content="Заголовок">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Первый тег отвечает за заголовок карточки, в виде которой отображается ссылка, второй — задаёт тип карточки, третий — определяет абсолютную ссылку. Доступны и другие возможности. Можно установить описание с помощью og:description, задать ссылку на картинку с помощью og:image, определить ссылку на соответствующее странице видео и прочие. Во время разработки можно использовать валидаторы, наиболее известные из которых:

• Facebook Object Debugger (отладчик от Facebook, компании, которая была одним из инициаторов использования данного типа мета-тегов.
• Google Rich Snippets Testing Tool (отладчик от Google, который обеспечивает валидацию совместимых с поисковыми системами мета-теги).
• LinkedIn Post Inspector (отладчик представления ссылок в этой социальной сети).
• Card validator (отладчик представления постов в Twitter).
• Meta Tags (агрегатор, который позволяет увидеть, как будет выглядеть карточка ссылки сразу в нескольких социальных сетях).

Существуют и другие схемы мета-тегов для дополнительного описания страниц сайта, например, от компании Twitter (существует официальный валидатор).

Например, если мы захотим поделиться одной из статей с сайта smashingmagazine.com «Search Engine Optimization Checklist (PDF)», мы получим вот такие карточки и сниппет:

Существует альтернативный способ разметить элементы страницы так, чтобы поисковая система понимала их назначение, — это микроразметка. Это даёт возможность поисковой системе разбираться в контенте точнее, правильно расставляя акценты и тонко настраивая сниппет показа страницы в поисковой выдаче (если поисковая система решит, что это необходимо).

Если набрать в поисковой строке Google фразу «best screen reading software», то результаты поискового запроса могут выглядеть примерно так:

Микроразметка реализуется на основе словарей. Словарь — это набор атрибутов для данных определённого типа. Существует несколько словарей микроразметки, наиболее важным из которых является Schema.org.

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

В словаре Schema.org существуют три важных атрибута, которые нужно использовать при описании элемента страницы:

• itemscope — определяет контекст, то есть раздел словаря. Например, можно указать, что страница — это пост в блоге или страница новости на новостном портале.
• itemtype — определяет тип объекта. Например, Product (Продукт) используется для товаров.
• itemprop — определяет свойства выбранного объекта (цена, описание, рейтинг, опции, спецификации и прочие).

Рассмотрим пример с информацией об авторе какой-то статьи. Выберем контекст Person. Для него доступны, например, такие объекты, как имя, фамилия (givenName, familyName) и занимаемая должность (jobTitle).

Для того, чтобы применить тот или иной словарь необходимо использовать один из доступных синтаксисов:

• Microdata - данные размечаются в HTML-коде.
• RDFa - данные размечаются в HTML-коде (сейчас почти не используется, и мы его затрагивать не будем).
• JSON-LD - самый актуальный на сегодняшний день формат.

В рамках синтаксиса Microdata код страницы в части реализации микроразметки будет выглядеть так:

        
          
          <article itemscope itemtype="http://schema.org/Article">  <section itemscope itemtype="http://schema.org/Person" itemprop="author">    <p>      Автор статьи:      <span itemprop="givenName">Василий</span>      <span itemprop="familyName">Иванов</span>      (<span itemprop="jobTitle">Штатный корреспондент</span>)    </p>  </section></article>
          <article itemscope itemtype="http://schema.org/Article">
  <section itemscope itemtype="http://schema.org/Person" itemprop="author">
    <p>
      Автор статьи:
      <span itemprop="givenName">Василий</span>
      <span itemprop="familyName">Иванов</span>
      (<span itemprop="jobTitle">Штатный корреспондент</span>)
    </p>
  </section>
</article>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В рамках синтаксиса JSON-LD в тег <head> страницы нужно встроить отдельную секцию <script> следующим образом:

        
          
          <head>  <script type="application/ld+json">    {      "@context": "http://schema.org",      "@type": "Article",      "author": {        "@type": "Person",        "givenName": "Василий",        "familyName": "Иванов",        "jobTitle": "Штатный корреспондент"      }    }  </script></head>
          <head>
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Article",
      "author": {
        "@type": "Person",
        "givenName": "Василий",
        "familyName": "Иванов",
        "jobTitle": "Штатный корреспондент"
      }
    }
  </script>
</head>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С 2014 года для микроразметки предпочтительнее использовать синтаксис JSON-LD. Больше примеров доступно на сайте с примерами «Steal Our JSON-LD». Полную спецификацию можно посмотреть на сайте с документацией.

Для людей с нарушениями зрения внешний вид вашего сайта может не иметь никакого значения. Незрячие люди вообще его не увидят, дальтонизм может помешать увидеть какие-то элементы или блоки, которые не обладают достаточной контрастностью, корректным с точки зрения другого цветового восприятия цветом и оттенком. Есть люди, которые не могут использовать мышь или любой другой способ указатель (перо, стилус или даже свой палец).

Очень важно не только как выглядит ваш сайт, но и как он «звучит». Существуют специальные расширения для браузера (скринридеры), которые позволяют прочитать вслух контент вашего сайта. Это помогает услышать ваш сайт — выход из положения для многих.

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

В большинстве скринридеров используется движок Text To Speech (TTS), который читает текст голосом. Наиболее полный список известных скринридеров доступен в Википедии. Среди всех доступных наиболее популярны:

• VoiceOver, который используется в операционных системах устройств от компании Apple.
• JAWS, удобный платный клиент под Windows и бесплатный под DOS.
• NVDA, в меру удобный, но бесплатный клиент под Windows.

Скринридеры поддерживают специальные манипуляторы, а не только стандартные устройства ввода (клавиатуру, мышь, сенсорные панели и экраны, перья с планшетами). Также они могут взаимодействовать и с устройствами вывода, например, дисплеями Брайля.

Существуют специальные руководства по подготовке сайта для людей с нарушениями зрения. В российском сегменте интернета существует ресурс «Веблайнд», на котором изложены существующие практики. Весь контент этого сайта соответствует российским и международным стандартам: ГОСТ Р 52872-2012, руководство WCAG 2.0 от W3C и Section 508. Рассмотрим основные моменты, без которых сайт будет совершенно недоступен для людей с нарушениями зрения.

Тестировать сайты на доступность очень не просто. Есть автоматические утилиты, встроенные в браузер, это позволяет понять, как «звучит» сайт, но этого не достаточно. Хорош ли сайт для пользователя понять можно на сегодняшний день только в рамках ручного тестирования.

Ссылку важно формировать таким образом, чтобы было понятно, куда она ведёт. Вместо «нажмите здесь» лучше написать «посмотреть полный список товаров». Важно также заполнять атрибут title, если он не дублирует содержимое ссылки. Навигация по тексту выстраивается на основе заголовков, навигация по сайту на основе главного меню или его аналога, которое лучше размещать внутри парного тега <nav>. Изображения, которые важны для правильного понимания контента сайта (контентные изображения), важно описывать в атрибуте alt. В формах нужно пометить назначение каждого поля.

Существуют специальные атрибуты для тегов, которые начинаются с префикса aria-, которые позволяют настроить работу скринридера детальнее, не отдавая всё на откуп автоматики. Подробнее можно ознакомиться в спецификации.

Итак, что нужно сделать с сайтом, чтобы всё везде правильно отображалось и индексировалось?

Нужно протестировать:

Скорость загрузки.
Семантику.
Адаптивность.
Валидность вёрстки.
Последовательность кода.
Доступность.

Нужно реализовать:

Принять необходимость перечисленных ниже пунктов.
Сделать сайт адаптивным.
Сделать сайт контрастным.
Сформировать структуру заголовков.
Сделать ссылки доступными.
Сделать контентные картинки доступными.
Сделать аудио и видео доступными.
Сделать формы доступными (если есть формы).
Сделать таблицы доступными (если есть таблицы).
Сделать заголовки страниц (тег <title>).
Сделать описания страниц (тег <meta name="description" content="...">).
Сделать мета-описание в рамках OpenGraph.
Сделать мета-описание в рамках Twitter (если необходимо).
Сделать микроразметку в синтаксисе JSON-LD.