SEO vs A11Y

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

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

Кто я?

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

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

Что такое SEO и как его готовить
A11Y и как её подружить с 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

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

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

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

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

Ссылки

Alt

Alt images

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

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

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

Ссылки

Google PageSpeed

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

SSR

Server Side Rendering

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

Критерии SEO

Индексация

Способы

robots.txt
Мета тег robots

robots.txt

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

Мета тег robots

arsenkin.ru

Сanonical

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

Редиректы

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