Seo оптимизация html css

SEO для разработчика и верстальщика: основные SEO-требования к разработке сайтов

Подготовили подробную инструкцию, как сделать SEO-friendly сайт и учесть все основные SEO-требования на этапе разработки сайта.

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

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

Сформировать ЧПУ адреса для всех страниц сайта

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

Для формирования ЧПУ адресов для всех страниц необходимо следовать нескольким правилам:

• Использовать только латинские символы, цифры, и дефисы.
• Слова в адресах следует разделять дефисом, а не пробелами и нижним подчеркиванием.
• Использовать строчные буквы в адресах страниц.
• Избегать использования слишком длинных адресов страниц.
• Проверять уникальность ЧПУ адресов, чтобы избежать дублирования адресов страниц.
• Не использовать в конце URL index.html, html.
• URL для всех страниц должны быть закрыты слешем / в конце.

Кроме того, при формировании ЧПУ адресов для всех страниц сайта необходимо убедиться, что ЧПУ адреса устанавливаются автоматически для каждой новой страницы. Например, при формировании заголовка h1 автоматически подтягивать заголовок в URL, прописав его транслитом на латинице.

Настроить 301 редиректы на главное зеркало

Главное зеркало рекомендуется указать с https протоколом и без www.

Необходимо настроить 301 редиректы:

• С www на без www
• С http на https
• Со страниц без / на страницы со / в конце
• Со страниц с верхним регистром на страницы с нижним регистром символов
• C /index.php и /index.html на главную страницу

Добавить тег title на все страницы сайта

На каждой странице в тегах должен быть размещен тег с уникальным содержанием.

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

Добавить мета-тег description на все страницы сайта

На каждой странице в тегах должен быть размещен мета-тег description с уникальным описанием страницы. Мета-тег необходимо оформить следующим образом:

На этапе разработки необходимо предусмотреть возможность автоматической генерации мета-тега title по заданному шаблону. Также необходимо предусмотреть, чтобы мета-тег можно было вручную редактировать на всех страницах сайта.

Мета-тег Keyword оставлять незаполненным

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

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

Главное требование к оформлению контента: оформить весь контент в html-коде

Весь текстовый контент и все важные элементы страниц должны быть оформлены в html-коде соответствующими тегами. Не следует допускать загрузку контента с помощью скриптов.

Критично важно оформить в html-коде следующие элементы:

• Заголовки
• Весь текстовый контент
• Все ссылки
• Тексты кнопок, форм и других элементов
• Функциональные элементы (фильтрация, сортировка)
• Изображения
• Навигацию (меню, хлебные крошки, футер)
• Пагинацию (ссылки на страницы пагинации обязательно должны присутствовать в коде)
• Код микроразметки
• Выпадающие списки в главном меню

Добавить заголовок h1 на все страницы сайта

На каждой странице сайта должен быть размещен основной заголовок, размеченный тегами . Данный заголовок должен быть, в том числе, на главной странице сайта.

Тегами должен быть размечен только один заголовок на странице.

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

Подзаголовки на страницах размечать тегами h2-h3, либо стилями

Все подзаголовки, как на коммерческих страницах, так и на страницах статей и новостей, необходимо размечать тегами — , в соответствии с их иерархией.

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

Требования к разметке текста

Текстовый контент на страницах сайта необходимо размечать соответствующими тегами, например:

Почему это важно? Правильная разметка текста и его элементов позволяет улучшить восприятие контента поисковыми системами. Кроме того, некоторые элементы могут подтянуться в сниппет страницы в поисковых системах, что в свою очередь может положительно сказаться на CTR (например, в некоторых случаях, в сниппеты выводятся табличные данные).

Оформление ссылок

Ссылки, размещенные в тексте, а также все ссылки на внешние источники необходимо открывать в новом окне, добавив к ним атрибут target=”_blank”.

Ссылки необходимо оформить цветом, отличающимся от основного текста. Также можно выделить их жирным шрифтом, либо подчеркиванием. При наведении необходимо выделять ссылки.

Настроить 404 код ответа сервера для несуществующих страниц

Все несуществующие страницы должны отдавать 404 код ответа сервера.

При подстановке лишних символов в текущий URL страницы она также должна отдавать 404 код ответа.

Создать страницу 404 ошибки

При попадании на несуществующие страницы сайта, должна открывать страница 404 ошибки с навигационным меню и с предложением перейти на главную страницу или воспользоваться поиском по сайту.

Добавить тег Canonical на все страницы сайта

На всех страницах сайта необходимо разместить тег Canonical, указывающий основной адрес страницы без GET-параметров. Данный тег следует разместить в коде сайта в раздел .

При размещении тега необходимо соблюсти последовательность атрибутов тега link:

Сгенерировать xml-карту сайта

Необходимо сгенерировать xml-карту в кодировке UTF-8 со списком всех канонических страниц сайта.

Описание формата сайта можно найти по ссылке:

В карте сайта должны присутствовать только ссылки на существующие канонические страницы с 200 кодом ответа. Не следует включать в карту сайта страницы с GET-параметрами.

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

   https://site.ru/ 2022-08-01  https://site.ru/page/ 2022-08-01  

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

Карту сайта необходимо разместить в корневом каталоге сайта с название sitemap.xml.

Скорость загрузки страниц и скорость ответа сервера

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

Скорость ответа сервера не должна превышать 300 мс, а в идеале обеспечить скорость ответа менее 200 мс.

Переезд на защищенный https протокол

Перед релизом необходимо перевести сайт на защищенный https протокол и настроить 301 редирект с http на https. Например, со страницы http://site/ на https://site.ru/.

Оптимизация страниц пагинации

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

На страницах пагинации рекомендуем разместить тег Canonical в разделе , указывающий адрес страницы пагинации:

На страницах пагинации необходимо уникализировать тег title во избежание дублей страниц.

[title] — Страница [номер страницы]

Купить кроссовки в интернет-магазине — Страница 2

Для первых страниц пагинации рекомендуем настроить 301 редирект на основные страницы без GET-параметров.

Например, со страницы https://www.site/catalog/page-1/ на https://www.site/catalog/.

При этом в html-коде необходимо разместить ссылку на основную каноническую страницу с 200 кодом ответа.

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

• Сократить title, например продублировав заголовок h1 + страница (номер страницы)
• Удалить SEO-текст или описание категории (если текст присутствует на странице)

Добавить микроразметку Schema.org

Стандартные элементы сайта необходимо разметить микроразметкой Schema.org. Для разметки данных рекомендуем использовать html-код, так как JSON не распознается Яндексом.

• Хлебные крошки — https://schema.org/BreadcrumbList
• Рейтинг — https://schema.org/AggregateRating
• Контакты — https://schema.org/Organization
• Новости — https://schema.org/NewsArticle
• Товары — https://schema.org/Product
• Отзывы — https://schema.org/Review
• Статьи — https://schema.org/Article
• Вопросы и ответы — https://schema.org/FAQPage

Подробнее о том, что такое микроразметки и готовые примеры кода микроразметки приведены в статье.

Для больших проектов настроить заголовки Last Modified и If-Modified-Since

Для больших сайтов (особенно важно для интернет-магазинов с большим ассортиментом товаров) настроить заголовки Last Modified и If-Modified-Since.

HTTP заголовок Last-Modified сообщает клиенту (браузеру, поисковому роботу) время последнего изменения страницы. Если клиент получил заголовок Last-Modified, то при следующем обращении к адресу, при условии, что страница есть в локальном кэше, он добавит запрос If-Modified-Since (не изменилась ли страница после даты, полученной в Last-Modified). В свою очередь сервер, получив запрос If-Modified-Since должен сверить полученную временную метку с временем последнего изменения страницы и, если страница не изменялась ответить 304 Not Modified.

Таким образом, если поисковый робот получит ответ 304 Not Modified, то он не будет обходить страницу, а будет обрабатывать только страницы с изменениями, тем самым повышая эффективность обхода сайта.

На всех страницах сайта разместить навигационную цепочку Хлебные крошки

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

Хлебные крошки должны содержать путь к странице, начиная с главной страницы и включая последнюю страницу цепочки.

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

Хлебные крошки необходимо разметить микроразметкой https://schema.org/BreadcrumbList.

Оптимизировать изображения

Необходимо использовать современные форматы изображений:

Вес изображений не должен превышать 1,5 мб.

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

URL изображения желательно оформить в виде ЧПУ.

Если на сайте размещено большое количество изображений, необходимо сгенерировать sitemap.xml для изображений.

Подробнее ознакомиться с файлом Sitemap можно в руководстве Google.

Источник