SEO vs A11Y

Сергей Раздолянский, VMGR

SEO vs A11Y

или как постараться всем угодить

Сергей Раздолянский
@frontpoterashka
Accessibility
Club Minsk

Кто я?

  • Frontend разработчик
  • Занимался SEO около года
  • Увлекаюсь доступностью

О чем сегодня поговорим

SEO

SEO (Search Engine Optimization, поисковая оптимизация) — комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах поисковой выдачи, с целью увеличения трафика и потенциальных клиентов.

A11Y

Доступность (accessibility) — это набор требований, методов и технологий разработки интерфейсов, которые делают их доступными для всех пользователей.

SEO

Цель Зарабарывать деньги и смотреть метрику
Показатели Аналитики и Метрики

A11Y

Цель Делать контент доступным для всех
Показатели Удобство UI/UX

Основа SEO

Семантическое ядро

Семантическое ядро сайта (СЯ)

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

Практики на примере

Мета теги и title

Мета-теги — часть HTML-кода, заключенная между тегом <head>...</head>. Эти атрибуты не являются обязательными: они не видны пользователю, но сообщают определенную информацию поисковой системе (описание, заголовок, ключевые слова и т.д.).

Title (46): Купить iPhone 12 и iPhone 12 mini - Apple (RU)

Description (90): Apple представляет новые iPhone 12 и iPhone 12 mini. Купите онлайн с бесплатной доставкой.

Keywords (0):

H-tags

Ссылка на расширение

Заспамленность

Заспамленность текста

Это соотношение содержащихся в статье повторяющихся слов к ее объему. Чем чаще употребляются одни и те же слова или фразы (обычно речь идет о ключевых запросах), тем выше значение. Данный параметр учитывают поисковые боты при определении качества контента.

Ссылки

  1. be1.ru
  2. advego.com
  3. ProPublica experiments with ultra-accessible plain language in stories about people with disabilities

Alt

Alt images

Атрибут alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке.

document.querySelectorAll('img:not(alt)')

Ссылка на расширение

Ссылки

  1. Image Description Guidelines
  2. Атрибуты alt и title в роли помощников по оптимизации

Google PageSpeed

Полезные ссылки по Google PageSpeed

  1. Как (не)удовлетворить Google PageSpeed (Даниил Крохмаль)
  2. Web Vitals (web.dev)
  3. Web Vitals - метрики здорового сайта (Андрей Липатцев)

SSR

Server Side Rendering

SSR (Server-Side Rendering, серверный рендеринг) — рендеринг на сервере клиентской части или универсального приложения в HTML;

Критерии SEO

Индексация

Способы

  1. robots.txt
  2. Мета тег robots

robots.txt

robots. txt — специальный файл, который содержит инструкции для поисковых роботов. Он должен размещаться в корневой папке сайта.

Мета тег robots

<meta name="robots" content="noindex" />

arsenkin.ru

Сanonical

rel canonical — это тег, который сообщает поисковикам, какую из одинаковых страниц считать дополнительной, а какую основной. Все характеристики дополнительной страницы (ссылочный вес, поведение пользователей) передадутся основной странице.

Редиректы

Редирект — перенаправление пользователя с одной страницы на другую (с одного URL на другой). Редиректы могут перенаправлять посетителей как на страницы того же сайта, так и на страницы другого сайта.

Угловые случаи

Бонус

SEO is Dead

Выводы

SEO + A11Y = ❤️

На что обратить внимание

Не пытайтесь сделать все сразу,
делайте поэтапно

@frontpoterashka

Cпасибо!