​​Чек-лист по 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 оптимизации, как ни как, оно очень зависит от качества разработки, верстки и соблюдением мелочей, о которых легко забыть при разработке.

👉 @frontendInterview