Что нужно знать девелоперу о SEO на этапе проектирования сайта

КАК УСТРОЕН ПОИСК

Как работает Google Поиск - https://support.google.com/webmasters/answer/70897?hl=ru

Запрос
Подбор
релевантных
страниц
Ранжирование
согласно сигналам
качества
сайта/страницы
Выдача
Google

«Зачем вам так много страниц?»
Релевантная посадочная страница = точка входа для поискового трафика
Максимальная релевантность = максимальный стартовый бонус для ранжирования
страницы по запросу
Страница «АК-47» — не тоже самое, что «АК-47 для девушки»
И не тоже самое, что «розовые AK-47 для девушки»
СТРУКТУРА САЙТА — ПОСАДОЧНЫЕ СТРАНИЦЫ

● Классическое меню

● Портальные страницы

● На самые важные страницы ссылка с главной

Гайд на английском - https://ahrefs.com/blog/internal-links-for-seo/
● Связываются тематические категории внутри и не перелинковываются между собой.
● Подкатегории связываются внутри подкатегорий но не смешиваются в рамках
категории. При этом иногда может быть перелинковка со схожими подкатегориями,
если это логически оправдано.
● Товары связываются между собой горизонтально блоком “Смотрите похожие
товары” с товарами своей подкатегории. Для пользователей и конверсий также
может быть блок “С этим также покупают”
СТРУКТУРА САЙТА — Siloing

● Домены - геопривязка возможна
Плюсы: если один домен попадает по санкции, с остальными все в порядке; каждый
сервер с сайтом в своем регионе; относительно просто можно сайт какого-то региона
сделать совсем по другому.
Минусы: ссылки, поведенческие факторы и факторы авторитетности каждого домена не
суммируется. Дорого.
● Поддомены - геопривязка возможна
Плюсы: как домены, только дешевле
Минусы: как у доменов
● Подпапки - геопривязка возможна
Плюсы: наследуются все хостовые факторы (возраст, поведенческие, траст, ...); все ссылки
на едином домене; у общего сайта больше страниц = больше внутреннего веса; олин
хостинг; проще вносить общие изменения.
Минусы: если с сайтом проблема, то падает сразу все; тяжелее в отдельном регионе
сделать все по другому.
СТРУКТУРА САЙТА — Мультирегиональность

https://support.google.com/webmasters/answer/189077?hl=ru
● Атрибут hreflang применяется в трёх случаях:
○ Для указания региональных версий контента;
○ Для указания контента на разных языках;
○ Для комбинации разных языков и региональных отличий.
● <link rel=”alternate” hreflang=”LG-RG” href=”URL” />, где:
○ LG – язык страницы;
○ RG – ее региональность;
○ URL – конечный адрес страницы с указанным языком и региональностью.
● Теоретически позволяет избежать дублирования контента на сайте.
Если страница доступна на русском языке для жителей Украины и Белоруси и содержит
аналогичный контент для обеих стран, атрибут hreflang поможет указать поисковой
системе, что эти версии сайта предназначены для разных регионов.

Пример: гипотетическая компания Example Widgets, Inc владеет веб-сайтом, который
предназначен для пользователей из Великобритании, Германии и США.
● http://en.example.com/page.html – главная страница на английском языке с информацией о тарифах на международную
доставку из США.
● http://en-gb.example.com/page.html – страница для клиентов из Великобритании с ценами в фунтах стерлингов.
● http://en-us.example.com/page.html – страница для клиентов из США с ценами в долларах США.
● http://de.example.com/page.html – главная страница на немецком языке.
● http://www.example.com/ – страница по умолчанию, для которой не определен язык или страна. Здесь пользователи
могут выбрать свой язык и регион.
Реализация:
<head>
...
<link rel="alternate" hreflang="en" href="http://en.example.com/page.html" />
<link rel="alternate" hreflang="en-gb" href="http://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us" href="http://en-us.example.com/page.html" />
<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default" href="http://www.example.com/" />
...
</head>

https://rozetka.com.ua/mobile-phones/c80003/preset=smartfon/
В категории 15 значимых типов характеристик товаров, которые люди ищут. И по 3-10
характеристик в каждом типе. И их пересечения. И под все нужны страницы. Ну, правда,
не совсем под все.
- Первый уровень открываем для индексации.
- 2+ уровень фильтров по умолчанию закрываем (noindex). Открываем точечно -
только то, что ищут.
- Если товаров в фильтре нет, то ссылки на фильтр нет, или она не активна.
- Если в фильтре меньше 2-5 товаров, фильтр закрыт от индексации.
СТРУКТУРА САЙТА — ФИЛЬТРЫ

Материалы:
➔ Руководство по SEO JavaScript-сайтов. Часть 1. Интернет глазами Google -
https://habr.com/ru/company/ruvds/blog/350976/
➔ Руководство по SEO JavaScript-сайтов. Часть 2. Проблемы, эксперименты и
рекомендации - https://habr.com/ru/company/ruvds/blog/351058/
➔ JavaScript Google YouTube channel -
https://www.youtube.com/playlist?list=PLKoqnv2vTMUPOalM1zuWDP9OQl851WMM9.
➔ Как сравнить сырой и отрендеренный код, и что видит Google -
https://www.searchengines.ru/js-html.html. Плагин View Rendered Source.
➔ Angular и SEO: как их подружить - https://habr.com/ru/post/423739/.
➔ React и SEO: как их подружить - https://habr.com/ru/post/418619/.
➔ Как сделать SPA доступным для Google и Facebook -
https://habr.com/ru/company/renderjs/blog/327612/.
ИНДЕКСАЦИЯ — JS

● Google bot в первый заход краулит и индексирует только HTML код.
Выполнение JS требует ресурсов, поэтому этот контент идет в отдельную очередь на
обработку и рендеринг. Разница между индексацией основного и JS контента может
измеряться неделями.
● Google может не видеть весь JS, который рендерится в браузере.
Google процессор рендеринга использует Chrome 41 - сейчас Chrome 72.
● Какой выход? Пререндеринг.
Используют свой Server Side Rendering для Google bot или сторонние сервисы:
prerender.io, renderjs.io и др.
ИНДЕКСАЦИЯ — JS

● Нужен только для сайтов условно 10000-50000+ страниц.
До этих размеров и так все проиндексируется хорошо (если все страницы полезные и
хорошего качества).
● Формат Sitemap
○ Лучше всего делать XML
○ Файл Sitemap может содержать не более 50 000 URL, а его размер в несжатом
виде не должен превышать 50 МБ.
● Добавить Sitemap в Search Console и robots.txt
В robots.txt добавить в виде строки в конце Sitemap: http://example.com/adres_sitemap.xml.
ИНДЕКСАЦИЯ — SITEMAP

● Отдельный sitemap для новых продуктов;
● Priority; ChangeFreq:
○ Главная - 1; daily
○ Категории - 0,9; weekly
○ Подкатегории - 0,8; weekly
○ Фильтры/теги - 0,7; weekly
○ Товары - 0,6; monthly
○ URLs в Sitemap с новыми товарами - 0,8; daily
○ Остальное - 0,5; monthly
○ Страницы блога - 0,6; monthly
● В Search Console можно посмотреть статус индексирования каждого Sitemap.
Но выгрузить можно только 1000 URLs. Можно разбивать sitemap по 1000 URLs каждый и
добавлять до 500 штук.

Можно указать связанные URL других языковых версий в одном Sitemap.
<url>
<loc>http://www.example.com/english/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://www.example.com/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="http://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://www.example.com/english/page.html"/>
</url>
https://support.google.com/webmasters/answer/189077 — раздел “Файл Sitemap”.
ИНДЕКСАЦИЯ — SITEMAP + HREFLANG

Другие возможности Sitemap:
➔ Sitemap для видео - https://support.google.com/webmasters/answer/80471
➔ Sitemap для новостей - https://support.google.com/webmasters/answer/74288
➔ Sitemap для изображений -

● Sitemap для изображений нужен если:
○ очень много картинок,
○ есть изображения, на которые нет ссылок на сайте (например, вызываются из
JS).
<url>
<loc>http://example.com/primer.html</loc>
<image:image>
<image:loc>http://example.com/kartinka.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
*Чтобы получать трафик из Google Images, изображения должны быть уникальны.
ИНДЕКСАЦИЯ — SITEMAP ДЛЯ ИЗОБРАЖЕНИЙ

ИНДЕКСАЦИЯ — ПЕРЕЛИНКОВКА
1. Контекстная:
“В этой презентации мы рассматриваем вопросы перелинковки (<=ссылка на страницу 1). Первые
слайды посвящены общим понятиям внутренней перелинковки, в то время как на 10
слайде мы рассматриваем, как может выглядеть типичная SEO-перелинковка (<=ссылка на
страницу 2).”
2. Блочная:
Урок №3
Структура
Урок №9
Тексты
Урок №7
Индексация
Смотрите также:

3. Меню и футер сайта:
4. Хлебные крошки:

● На Homepage можно делать блок ссылок с новыми страницами/страницами
не в индексе.
Ссылки на эти страницы будут каждый раз обновляться, когда заходит Google bot.
● Не все ссылки нужно показывать роботам!
Решение — Ajax. Почитать тут.
● Ссылки для людей не менее важны, чем для роботов.
Ссылки для людей улучшают поведенческие факторы и способствуют конверсии.
● На контентных проектах рулит контекстная перелинковка.
Образец очень четкой контекстной перелинковки — Википедия.
● На E-commerce проектах контекстная перелинковка ТОЖЕ рулит.
Потому что позволяет передавать вес с правильными анкорами.

● Теги noindex, canonical проставляются по правилам для нужной группы URLs.
Пример ТЗ:
○ Все страницы поиска с вложенностью /list/ должны содержать noindex, nofollow.
Noindex будет на страницах типа https://www.olx.ua/list/q-2-badroom-appartments/
○ Все URL, которые содержат параметр color_group, должны в canonical
указывать на свою родительскую страницу
Для https://www.hellyhansen.com/en_no/mens/jackets/parka?color_group=482849 будет
<link rel="canonical" href="https://www.hellyhansen.com/en_no/mens/jackets/parka"/>
ИНДЕКСАЦИЯ — noindex, canonical

● Чем отличается мета-тег noindex от robots.txt:
○ если страница уже в индексе, то закрытие в robots.txt не выбросит ее оттуда. А
noindex выбросит.
○ если страница закрыта в noindex, то Google узнает об этом только когда
переходит на страницу, поэтому единица краулингового бюджета* на нее
тратится. Важно только для больших сайтов.
*Что такое краулинговый бюджет - https://www.searchengines.ru/google-crawl-budget.html.
● Алгоритм действий, если страница закрыта в robots.txt и находится в индексе:
○ добавить мета-тег noindex;
○ открыть в robots.txt и подождать, пока она выпадет из индекса;
○ закрыть в роботс, чтобы зря не тратился краулинговый бюджет.
● Noindex, follow со временем начинает восприниматься как noindex, nofollow
ИНДЕКСАЦИЯ — noindex, robots.txt

● Тег canonical на всякий случай указывает сам на себя
Для всех полезных и открытых для индексации страниц. Но отсутствие такого тега - не
ошибка.
● На каких страницах обычно используют:
○ если у вас дубли, но по какой-то причине 301-й редирект поставить нельзя;
○ страницы различных сортировок;
○ страницы печати;
○ страница «Смотреть все товары»;
○ если например есть две языковые версии, но отличаются только переводом
меню и футера, а основной контент одинаковый;
○ если URLs одного и того же товара отличаются, в зависимости от пути к нему -
нужно выбрать одну основную версию;
○ если есть товары, которые отличаются, например, только объемом или цветом -
делаем один из них основным (либо заморачиваемся с уникализацией).
ИНДЕКСАЦИЯ — noindex, canonical

ОБЩИЕ ТЕХНИЧЕСКИЕ
ЗАДАЧИ

● Mobile-friendly сайт - плюс в ранжировании.
Алгоритм Google Mobile-first в ранжировании отдает предпочтение сайтам,
оптимизированным под мобильные устройства.
● Как проверить:
○ Сервис проверки, наксолько страница сайта mobile-friendly -
https://search.google.com/test/mobile-friendly.
○ Также можно посмотреть в Google Search Console как бот видит страницы
сайта.
● Проверять нужно каждый тип страниц.
Главная, товар, категория, фильтр, страницу контактов, и т.д.
ОБЩИЕ ТЕХНИЧЕСКИЕ ЗАДАЧИ
Mobile – friendly

● Мобильная версия – example.com и m.example.com
На обычной странице (http://www.example.com/page-1) добавьте следующий код:
<link rel="alternate" href="http://m.example.com/page-1">
На странице для мобильных устройств (http://m.example.com/page-1) использовать атрибут:
<link rel="canonical" href="http://www.example.com/page-1">
● Адаптив
Единое и более предсказуемое ранжирование:
○ один URL,
○ один контент,
○ один сайт.
Google помощь - https://developers.google.com/search/mobile-sites/mobile-seo/?hl=ru
Mobile – friendly

➔ Что такое AMP - https://habr.com/ru/post/327108/
➔ Документация AMP - https://www.ampproject.org/ru/learn/overview/
● Плюсы:
○ Скорость растет.
○ Лучше поведение пользователей из-за пункта выше.
● Минусы:
○ Можно внедрить для статического контента, типа блога или новостей. И не
получится для высокофункционального динамического контента.
○ Поведенческие метрики не накапливаются на вашем домене.
Пример: Фактическим адресом статьи https://www.ua-
football.com/ukrainian/news/1552605412-chelsi-razbil-dinamo-shalke-uvolil-trenera-vse-
chetvertfinalisty-le-glavnye-novosti-za-14-marta.html
является https://www.google.com/amp/s/www.ua-
football.com/amp/ukrainian/news/1552605412-chelsi-razbil-dinamo-shalke-uvolil-trenera-vse-
chetvertfinalisty-le-glavnye-novosti-za-14-marta.html
AMP

● Скорость загрузки - фактор ранжирования
https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
○ Хорошая скорость загрузки страницы - 2-3 секунды.
○ Хорошая скорость ответа сервера - меньше 200 мс.
Инструмент проверки Google https://developers.google.com/speed/pagespeed/insights/
● Для проверки производительности Google использует Lighthouse
“Lighthouse is an open-source, automated tool for improving the quality of web pages.” —
https://developers.google.com/web/tools/lighthouse/
Скорость загрузки

Как уменьшают:
● сжимать картинки и обрезать их метаданные
● сокращать количество соединений:
○ объединять JS файлы
○ объединять СSS файлы
○ объединять иконки в один спрайт
● выносить статику на поддомен: изображения, видео, т.п.
● CDN
Скорость загрузки

● Любое различие в любом символе URL - для Google это разные URL.
● Какие дубли мы склеиваем:
○ Склейка зеркал сайта:
■ www / без www,
■ http и https,
■ со “/” на конце и без “/”.
○ Любое количество заглавных букв в URL -> 301 редирект -> все буквы в URL
строчные.
● Следим за URL в ссылках.
Если у вас URLs в абсолютном виде и сайт вида https://www, то все ссылки должны быть с
такими адресами. Если у главного зеркала все URLs заканчиваются на “/”, то и ссылки
должны быть такими. Иначе генерируется множество цепочек редиректов.
Дубли URL

Страницы сортировки — canonical на основную страницу.
Для https://www.paulsmith.com/uk/womens/shirts?esp_sort=FSM_price&esp_order=desc
будет canonical=https://www.paulsmith.com/uk/womens/shirts
Страницы с различным количеством товаров
Для https://www.paperchase.com/en_gb/stationery/pens/ballpoint?product_list_limit=192
будет canonical=https://www.paperchase.com/en_gb/stationery/pens/ballpoint
Страницы различным видом вывода товаров на экран: плитка или вертикально с
описанием
Для https://shop.landrover.com/uk/men?product_list_mode=list будет
canonical=https://shop.landrover.com/uk/men
Служебные дубли

Как искать дубли
● Парсеры Screaming Frog, Netpeak Spider, JetOctopus - проверять одинаковые Title,
Meta Description, H1
Бесплатный вариант - Majento Site Analyzer
● Операторы site: в комбинации inurl: или -inurl:
Пример: site:president.gov.ua inurl:status=
● Поиск части текста в “” или оператор site: плюс текст “”
Пример: «Україна - миролюбна нація без планів експансії або територіальних
претензій» — найдено 257 сайтов с этим текстом
Операторы Google — https://tools.pixelplus.ru/news/operatory-google
Служебные дубли

1. Теги rel=prev/next
1. Canonical указывает на основную страницу категории
2. Ссылки на первую страницу пагинации должны быть site.com/landing-page, а не
site.com/landing-page?p=1
3. site.com/landing-page?p=1 301 редирект site.com/landing-page
Пагинация

● С точки зрения SEO URLs можно делать как абсолютные так и относительные.
Вопрос исключительно прикладной - если нужно переезжать на другой домен. другой
протокол или зеркало сайта, то не возникает проблем с битыми ссылками.
Исключения: в canonical и hreflang URLs должны быть только в абсолютном виде.
● Вложенность URLs может быть различной:
○ https://example.com/category/subcategory/subsubcategory/product
Плюс - всегда в Google Analytics можно легко сегментировать трафик по
разделам.
○ https://example.com/product
Если меняет структуру, не будет никаких потерь трафика, так как URL никак не
изменится.
URLs

● Шаблон для генерации Title и Meta-Description для фильтров:
Title: [Характеристика фильтра1] [Характеристика фильтра2] [Название категории] купить в Готеме,
Метрополисе. Цена от [min price] до [max price]. | Интернет магазин Кажан
Meta Description: Низкие цены на [Характеристика фильтра1] [Характеристика фильтра2] [Название
категории] в интернет-магазине Кажан ✅ Самые низкие цены в Готеме! [Кол-во товаров в категории]
товаров в наличии c доставкой по Украине ✅ Заказывайте прямо сейчас ☎ Тел: 666-73-37.
● Как будет выглядеть в готовом виде:
Title: Твердосплавные обоюдоострые бетаранги купить в Готеме. Цена от $250 до $530. | Интернет
магазин Кажан
Meta Description: Низкие цены на твердосплавные обоюдоострые бетаранги в интернет-магазине Кажан
✅ Самые низкие цены в Готеме! 12 товаров в наличии c доставкой в Метрополис ✅ Заказывайте прямо
сейчас ☎ Тел: 666-73-37.
*По такому же принципу метатеги Title и Meta Description генерируются для категорий, товаров, и т.п.
КОНТЕНТ
Метатеги

● Какова важность заголовков <H> для ранжирования?
В общем случае H1 чувствительный фактор ранжирования, H2 не очень, Н3 еще меньше, а
H4-H6 - просто текст.
● Рекомендации:
○ Не использовать заголовки <H> для оформления дизайна;
○ Один H1 на странице;
○ Соблюдать логику подзаголовков: внутри H1 есть H2, внутри H2 есть H3 и т.п.;
○ Внутренние ссылки не оформлять с помощью заголовков <H>.
КОНТЕНТ
Заголовки

● Сниппет выдачи Google - короткое описание содержания страницы.
Google обычно берет из Meta-Description.
● Привлекательный сниппет значительно влияет на CTR:
○ больше трафика при тех же позициях в выдаче;
○ выше CTR на выдаче - выше позиция в SERP.
КОНТЕНТ
Structured data

Запрос «travel insurance usa»
● Сниппет в выдаче Google без Structured Data
● Сниппет в выдаче Google с Structured Data
КОНТЕНТ
Structured data

Виды микроразметки - https://developers.google.com/search/docs/data-types/article
● Есть примеры как разметки Schema.org
● так и JSON
КОНТЕНТ
Structured data

● Сервис проверки Structured Data - https://search.google.com/structured-data/testing-
tool/u/0/
● Основные типы разметки для интернет магазинов:
○ Product / Товар - https://developers.google.com/search/docs/data-types/product
○ Corporate Contact / Контактные данные -
https://developers.google.com/search/docs/data-types/corporate-contact
○ Local business / Местные компании - для локальных типов eCommerce -
https://developers.google.com/search/docs/data-types/local-business
○ Logo / Логотип - https://developers.google.com/search/docs/data-types/logo
○ Sitelinks searchbox / Окно поиска по сайту -
https://developers.google.com/search/docs/data-types/sitelinks-searchbox
○ Social profile / Ссылки на соцсети -
https://developers.google.com/search/docs/data-types/social-profile
КОНТЕНТ
Structured data

● Подстановка переменных: https://poezd.ru/nalichie-mest/Nijniy_Novgorod/Kirov/
“ЖД билеты
Минимальная цена билета на поезд [Город отправления] — [Город прибытия]: сидячие места
[min_price_сидячие_места] руб., в плацкартном вагоне [min_price_плацкарт] руб., в купе [min_price_купе] руб.
Продажа билетов открывается за 90 дней до отправления поезда. Расписание и цены, а также информация о
наличии мест обновляются автоматически. Ближе к отправлению стоимость билетов растёт.
Маршрутные данные
❏ Расстояние между [Город отправления] и [Город прибытия] составляет [distance_Город
отправления_Город прибытия] км.
❏ Время в пути – [min_time_Город отправления_Город прибытия].
❏ По направлению курсирует [кол-во поездов между_Город отправления_Город прибытия] поездов
дальнего следования. Из них [кол-во скорых поездов между_Город отправления_Город прибытия]
скорых поездов.”
КОНТЕНТ
Тексты

● Синонимизация
Пример синтаксиса
If {despair|grief|sorrow} {is the only thing which|is all that} {this world|the planet} can
{spare|give|offer}, then {consider|try thinking of} {humanity|mankind|the human race} as
{dead|lifeless|dull}.
КОНТЕНТ
Тексты

Что нужно знать девелоперу о SEO на этапе проектирования сайта

Что нужно знать девелоперу о SEO на этапе проектирования сайта

More Related Content

What's hot

Similar to Что нужно знать девелоперу о SEO на этапе проектирования сайта

More from Magecom UK Limited

Что нужно знать девелоперу о SEO на этапе проектирования сайта