Привет всем!

Сегодня хотелось бы затронуть тему SEO оптимизации, как ее проводить, для чего и что для этого надо. Как ни как, сейчас это один из мощных инструментов для жизни веб-сайта или приложения.

Что такое SEO

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

Как это работает

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

Как нам оптимизировать сайт для SEO

Оптимизация сайта для SEO по большой части подразумевает то, что мы должны разработать сайт таким образом, чтоб роботы/пауки поискового движка могли легко понимать наш сайт.

Нам как фронтенд разработчикам для этого надо позаботиться о следующих вещах:

Семантичная и структурированная верстка. На данный момент поисковики обращают внимание на семантику HTML, и если все на div-ах или таблицах, то сайт навряд ли попадет на первые строчки поискового запроса. Семантичная верстка наполняет смыслом теги, и структуры, которые мы создаем в HTML, и это облегчает роботам понимать где и что находится на странице нашего сайта.
Правильно использовать и структурировать заголовки на страницах. У каждой страницы должен быть один и единственный тег <h1>, который считается основным заголовком и говорит о чем страница, далее должна соблюдаться вложенность заголовков, то есть h2, у вложенного в него элемента заголовок h3 и т.д.
Никогда не забывать alt атрибут у тега <img>, таким образом мы объясняем роботам, что это за картинка.
Указать язык страницы, используя атрибут lang на теге <html>.
Правильно указывать название страницы, то есть тег <title>, он должен быть уникален для каждой страницы и быть длиною до 55 символов, помимо этого значение тега должно отличаться от значения от тега <h1>.
Использовать мета-тег description: тут пишется описание страницы, на каждую страницу оно должно быть уникальным и длиною до 150 символов.
Подключить favicon и иконки для Apple Web Meta, Windows Tiles и прочие иконки
Настроить и добавить OG-теги, то есть Open Graph теги: og:type, og:title, og:site_name, og:description, og:image, og:url, og:error для социальных сетей.
Удалить комментарии в HTML, это в целом считается хорошей практикой, заливать сайт на продакшн без комментариев в коде/разметке.
Подключать стили и скрипты и сторонние библиотеки и прочие не блокируя отрисовку сайта, можно использовать асинхронную загрузку сайта <script async src="...">.
Обязательно иметь страницу ошибки 404.
Оптимизировать производительность сайта, производительность и доступность сайта очень важна для поисковых движков, для этого надо:
- Использовать как можно меньше узлов HTML, т.е. отказаться от лишних оберток в врестке.
- Оптимизировать картинки, кропать их до нужных размеров отображения и сжимать, лучше всего использовать формат webp, и fallback на jpg картники в браузерах, где не поддерживается формат webp. Помимо этого, если на странице много картинок, то лучше использовать ленивую загрузку картинок (lazy loading).
- Оптимизировать JS, удалить мертвый код, не использовать большие библиотеки, если из всей библиотеки вам нужен всего один или несколько методов. Писать код так, чтоб не было утечек памяти.
- Сжимать все файлы HTML, CSS, JS.
Если вы работаете над SSR(Server Side Rendered) приложениями, то не забыть про такие вещи как:
- robots.txt - это конфиг файл, при помощи которого мы можем указать, какие директории, страницы могут индексировать роботы/пауки.
- sitemap.xml - это файл, который хранит в себе все пути к страницам, он нужен для того, чтоб роботам/паукам было проще найти те или иные страницы у вас на сайте.
Также, если вы пишите SSR или SPA приложение, то лучше хорошо подумать о том, как вы формируете навигацию(роутинг) в приложений. Навигация должна быть лаконичной, все вложенности должны быть сохранены, и соответствовать семантическим URL . К примеру, если у вас есть пользователь, и в личном кабинете пользователя есть страница "Мои оплаты", то стоит формировать навигацию, к примеру: https://example.com/profile/courses Где, https://example.com/ - хост, profile/ - роут до личного кабинета, courses/ - вложенная страница "Мои курсы"

Лучше с самого начала разработки думать о SEO оптимизации, как ни как, оно очень зависит от качества разработки, верстки и соблюдением мелочей, о которых легко забыть при разработке.

Чек-лист по SEO оптимизации для фронтенд разработчика