Как сделать сайт, который будет оптимизированным под поисковые системы — этим вопросом задаются все, кто делает сайт своей компании. SEO-оптимизация — так общепринято говорить, хотя это масло масляное (SEO — это Search Engine Optimisation, то есть оптимизация под поисковые движки). Но пусть будет так. Ниже рассмотрим некоторые методы и приемы оптимизации вашего сайта, как в процессе разработки, так и в процессе его эксплуатации.
Да, и следует понимать, что оптимизация сайта процесс непрерывный и его нельзя завершить. Как ремонт жилища ;).
Главные SEO-факторы для сайта на 2019 год
Примечание: мы будем обсуждать сайты с коммерческой направленностью с известной тематической дифференциацией. И мы не будем говорить о порталах и новостных сайтах. Там конечно же всё тоже играет роль, но там преобладает новизна, уникальность и социальная вовлеченность — эффект вирусного распространения.
- Скорость открытия сайта и время реакции на действия пользователя.
- Регулярное обновления новыми тематическими материалами.
- Уникальный текстовый и графический контент по тематике сайта.
- Адаптивность верстки сайта под различные устройства.
- Использование защищенного https-протокола и SSL-сертификата
Далее рассмотрим вторичные SEO-факторы для сайта
"Правильная" html-верстка сайта под SEO:
Это вовсе не означает, что html-верстка должна быть валидной и по стандартам W3C, хотя это и было бы хорошо. Но мы понимаем, что многие фишки работают быстрее при нестандартном использовании и отступлении от правил. Поэтому не стоит сильно заморачиваться о валидности html-кода.
1. Использование семантических фишек HTML5 разметки.
Это header, nav, footer, section, article и так далее. Поисковым роботам будет проще вычленять важный контент.
2. Главные теги расставляем правильно.
title, meta description и meta keywords должны быть легкие и не перегруженные и точно на 100% соответствовать контенту на странице. Это важно! Увеличение количества текста в этих тегах приведет к "размазанности смысла". Да, и keywords уже не используется поисковиками для ранжирования. В принципе, title и meta description достаточно.
Что интересно, не всегда Яндекс использует ваш title в выдаче. Иногда берется ключевая фраза из контента страницы, которая, по мнению поисковика, наиболее точно отражает смысл странцы и ожидания пользователя. Есть повод задуматься о смене title страницы.
3. Тег H1 должен быть единственный на странице и отражать суть страницы, далее подразделы или под-смыслы оформляем H2, H3 И так далее.
4. Не забываем про breadcrumbs "хлебные крошки" и оформляем путь нахождения нас в виде Главная > Раздел > Подраздел > Конечная страница, при этом все эти меню являются ссылками на соответсвующие разделы, а "Конечная страница" не имеет ссылки.
5. Максимально выносим все стили в отдельный css-файл.
Называем классы семантически. То есть если у нас цена товар: то класс желательно, чтобы был "price". Да, вы скажете есть микро-разметка и будете частично правы. Но об этом позже. "Старые" методы работают и сейчас.
6. Желательно включить базовый набор стилей в head страницы (ниже подробнее), а остальные файлы стилей объеденить в один файл и сжать, очистив от пробелов и комментариев и включить ниже, после завершения тега html. Да, это нестандартно и невалидно, но так сайт откроется быстрее.
Про базовый набор css-стилей: это набор сброса css-стилей, базовой разметки сетки - это позволит сразу при загрузке отобразить сайт и блоки так, как он должен выглядеть, пока без картинок, но уже блоки и шрифты будут в нужных пропорциях и размерах. А потом, загрузятся остальные стили снизу страницы и сайт обретет свой естественный вид. То есть сверху в head включаем прямо стили, а не подключаем файл. А остальные стили файлом снизу. В этом фишка ускорения.
7. Используйте микроразметку Open Graph, указывая базовые теги на странице meta property="og:title" content=""
Справочники по Open Graph есть в интернете, например просто и понятно от Яндекс - https://yandex.ru/support/webmaster/open-graph
8. Используйте семантическую микроразметку Shema.org.
Она позволяет точнее выделять важные элементы для поискового робота, например цену, карточка товара с моделью, описанием и картинками товара. Или микроразметка позваляет точно вычленить поисковику адрес вашей компании. Документация также представлена в интернете, например в Яндексе - https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.html
Но не перестарайтесь. Если у вас интернет-магазин - достаточно будет выделить микроразметкой адрес компании и карточки товара.
9. Указывайте кодировку страницы в самом верху страницы.
Лучше это будет UTF-8, т.к. будет меньше проблем со спецсимволами.
10. По возможности уберите все вызовы javascript-файлов вниз страницы после html.
Если это не прокатит, добейтесь максимума внизу, а сверху в head оставьте один файл, в котором будет базовая инициализация javascript-программ.
11. Сжимайте все javascript-файлы программ в один файл (или два - см. п. 10) с помощью систем типа gulp (только для разработчиков сайтов).
12. Постараться уменьшить использование нестандартных шрифтов на сайте.
Как выход: использовать довольно обширную бесплатную (Что важно! А вы не знали, что почти все шрифты объект копирайтинга и они платные?!) коллекцию Google-шрифтов - https://fonts.google.com, которые корректно открываются на разных устройствах.
13. Прописывайте мета-тег "canonical" в head для того, чтобы исключить дубли страниц. Канонический URL (canonical) позволяет указать поисковой системе, какая ссылка является предпочтительной для индексации. Настройкой canonical необходимо заниматься, если у вас на сайте имеются страницы с одинаковым содержанием.
Например, link rel="canonical" href="http://site.ru/product-1" можно выдавать, если у вас могут быть и другие ссылки на эту страницу типа http://site.ru/product?id=1
14. Используйте CDN-ссылки на общеупотребительные файлы типа jquery или fontawesome или другие js-плагины, что позволит загружать эти файлы с других (быстрых) серверов, так как обычно на хостинге на отдачу есть не так много одновременных параллельных потоков, например 5. А если у вас куча файлов в странице (что обычно так и есть), то это немного улучшит ситуацию, т.к. очередь на отдачу уменьшится.
15. Верстка должна быть адаптивной.
Даже не знаю, что тут объяснять. Сейчас мобильный трафик превышает десктопный. Это уже реальность. И никому не хочется масштабировать неудобный интерфейс "не мобильных" сайтов. Такие сайты будут просто закрывать и искать что-то другое.
16. Адаптируйте контент страницы под то, что ищут.
То есть и подача материала и порядок слов и какиеми словами ищут пользователи. Да, это возможно только при анализе сайта со временем. При этом динамическая подмена контента или ключевых фраз под запросы пользователя не приветствуется.
Технические тонкости сайта для SEO-оптимизации. Для разработчиков only
1. Наличие SSL-сертификата на сайте важно.
Т.е. чтобы он работал на протоколе https. Тут все просто - покупаем на хостинге или еще где, прицепляем к сайту. Если под-доменов много (региональные сайты), то покупаем мульти-доменный сертификат. Да, есть и бесплатные SSL-сертификаты, но их статус невысок для поисковиков, поэтому не экономьте 1500р в год на нормальный платный SSL-сертификат для сайта.
2. Используйте файл robots.txt для тонких настроек.
robots.txt — это файл в котором задаются правила включения/исключения разделов индексации, указываются домен, файл sitemap. Подробнее о robots.txt https://yandex.ru/support/webmaster/controlling-robot/robots-txt.html
Как минимум, укажите в файле robots.txt что сайт открыт для индексации, а какие-то (технические) разделы закрыты, например раздел корзины или результатов поиска можно закрыть. Также укажите домен с https и сгенерированный файл sitemap.xml.
3. Используйте файл sitemap.xml,
в котором будет содержаться структурированная карта ссылок на сайте в виде XML-формата, которые легко "парсят" (правильно считывают) поисковые роботы. Данный файл показывает какие ссылки добавились на сайте и какие нужно индексировать в первую очередь (веса).
Файл sitemap.xml лучше всего создавать автоматически при обновлении контента сайта, при наличии CMS у вас на сайте. А серьезных сайтов без CMS сейчас практически нет.
4. Все картинки нужно "жестоко" сжимать и минимизировать.
Для этого есть, графические редакторы (недостаточно сжимают, как ни бейся), так и как массовые системы типа gulp с плагинами (только для разработчиков) или веб-сервисы типа https://tinyjpg.com. Да, конечно можно обязать верстальщиков минимизировать это в графических редакторах. Но это не поможет добиться нужного (максимально возможного) сжатия.
Проверяем по Google Pagespeed — https://developers.google.com/speed/pagespeed/insights/ - и вы удивитесь, что Google все равно считает ваши картинки "убого огромными". Как добиться максимального сжатия без потерь визуального качества - читаем в интернете. Методы постоянно меняются и совершенствуются. И старайтесь не использовать нестандартные форматы. Только jpg для фото, а png и gif для картинок иллюстраций, графиков, иконок и прочего.
5. Добаляйте сайт в Яндекс Вебмастер и Google Webmaster и анализируйте (!!!) спустя время, как поисковики воспринимают ваш сайт, есть ли ошибки, есть ли неверности. Исправляйте по мере сил.
6. Правильно используйте ошибки http-протокола:
например, страница не найдена — это ошибка 404, при этом ваш сайт и должен отдать страницу с кодом 404. Нормальный код без ошибок - это 200. В случае если страница переехала, отдавайте код 301 и делайте редирект на новую страницу.
7. Обязательно используйте ЧПУ-ссылки и семантический домен.
ЧПУ — это известная "в узких кругах" аббревиатура "Человеко Понятный Урл". Да это ужасная лингвистическая каша, но суть проста — домен и ссылки на страницы должны содержать ключевые слова страницы, например если у вас страница продает пластиковые окна Rehau 1000x2000мм в Воронеже, то ссылка должна быть примерно такой: http://plastikovye-okna-vrn.ru/catalog/plastikovoe-okno-rehau-1000x2000mm
8. Исключайте дубли страниц из выдачи либо на уровне генерации страниц в CMS, либо через robots.txt. Например, банальный корень сайта - у вас есть http://site.ru/ и есть http://site.ru/index.php, что открывает одно и тоже - Главную страницу - такое нужно исключить, редиректнув /index.php с кодом 301 на корень сайта /
Также бывает, что страница открывается и со / "слешом" в конце и без - это тоже исключаем, чтобы на было одинаковых страниц http://site.ru/page и http://site.ru/page/ - оставляем только одну, а другую на 301.
9. Исключайте идексацию подбора параметров с GET-запросами в урл. То есть, если у вас в каталоге есть фильтр подбора и при этом появляются длинные ссылки на результаты этого подбора, то лучше это исключить из поиска в robots.txt с помощью директивы Clean-param. То же самое про utm_метки в GET-запросах ссылок. Их тоже исключаем.
Например, так:
User-agent: *
Disallow: /*utm_
Clean-param: param1&m2&m3
10. Используйте кэширование в вашей CMS, если оно там есть.
Обычно, кэширование — это пре-генерация страниц или отдельных html-блоков в статический html. Это значительно ускоряет первоначальную отдачу страницы.
Нормальной скоростью отдачи первоначального контента страницы считается 0.05 - 0.3 сек. Это именно то время, сколько тратит программа генерации контента (CMS) на вашем сайте.
Кстати, вы можете проверить скорость отдачи вашего сайта с помощью обычных браузеров Chrome или Firefox — Cttr+Shift+I (Дополнительные инструменты - Инструменты разработчика) - далее вкладка Network - All и далее нажимаем Ctrl+R — и смотрим 2-й сверху блок, где табличка Name - Status - Type ... Time — нас интересует самый верх где ссылка на ваш сайт и Type=document - смотрим Time (время) и если оно больше 200-300 ms — то вашим программистам нужно работать и оптимизировать код генерации страниц сайта. Либо ускорять хостинг, например взяв VDS с SSD диском.
11. Для ускорения разработки верстки сайта применяйте известные css-фреймворки типа Bootstrap, Foundation, Bulma. Для крупных и быстрых проектов с большой нагрузкой наоборот, не применяйте никаких фреймвороков — это наложит ограничения и избыточность будет тормозить проект.
12. Анализ работы с сайтом.
Это очень важно! Уставновите на сайт Яндекс.Метрику и Google Аналитику. Расставьте цели по точкам взаимодействия (отсылка формы, заявка и т.д.). Смотрите как пользователи видят ваш сайт и как с ним работают — это можно увидеть по записи действий в Вебвизоре Яндекса. Можно отловить и затем исправить много эргономических ошибок работы с интерфейсом сайта.
13. Ускоряйте сайт. Ускоряйте постоянно.
Проверяйте в том же Google Pagespeed — https://developers.google.com/speed/pagespeed/insights/
Уникальный контент на сайте.
В идеальном случае — это главный фактор успешной идексации и его нахождения вообще. Будет уникальный контент (картинки, текст) — ожидайте, что вас будут хорошо находить.
Важно понимать, что уникальные тексты должны быть тематическими. Это увеличит социальную вовлеченность.
Социальныя вовлеченность
Это фактор показывает, насколько часто ссылка на ваш сайт публикуется на других сайтах или соцсетях. Есть даже некоторые "измерялки" этого индекса — это ТИЦ у Яндекс (стал ИКС) или Pagerank у Google. Чем показатель этого фактора выше, тем с точки зрения поисковика важнее показать в выдаче результатов поиска именно ваш сайт.
Как увеличить этот фактор: раньше было просто — покупка прямых ссылок на "жирных" сайтах. В какой-то мере степени это осталось и сейчас. Либо есть возможность продвижения в соцсетях с эффектом вирусной рекламы, или через лидеров мнений. Как минимум, заведите свою компанию во всех соцсетях и поставьте ссылку на свой сайт в каждой соцсети.
А дальше контент и интересные людям продукты, которые найдут дорогу сами.
И поймите, невозможно какой-угодно рекламой или SEO-оптимизацией пробить дорогу неинтересному никому продукту.
---
P.S. Статья не закончена, как и оптимизация любого сайта ;)
