Итак, я время зря не терял. Создал четыре раздела, по которым мы будем раскручивать сайт в поисковых сетях.
С сутью показанных выше разделов разберемся во время строительства и продвижения сайта. Теоретическая часть рассматривается в соседнем блоге о продвижении. Здесь только практика.
Практика диктует, что первым делом перед началом работ по развертыванию и продвижению сайта, следует провести его техническое обслуживание – хорошо ли сайт отвечает на запросы, не зависает ли, понятен ли он пользователю и – внимание! – поисковым роботам?
На все вопросы даст ответ Техническое СЕО.
Приступаем!
Теоретическое пособие по этой теме размещено в нашей библиотеке – Продвинутое техническое СЕО. Можете ознакомиться! С практической частью будем знакомиться прямо сейчас с парой оговорок:
Если вы пользуетесь платформой Shop'n'SEO, вам не надо читать главы
- #2 SEO-хостинг,
- #3 Руководство по созданию URL-адреса,
- #4 XML-карты сайта для улучшения SEO,
- #5 Настройки мета-тегов robots.txt,
- #7 SEO-оптимизация для HTTP-статус-кодов
- #11 HTTP или HTTPS?
- #20 Руководство по SEO параметров URL.
Все вопросы, обсуждаемые в этих главах, решены платформой. По остальным главам есть решения на уровне "Бизнес-пак" и выше.
Я заказал самый дешевый тариф и соответственно, сео-оптимизацией буду заниматься самостоятельно! Как вы помните, я заказал сайт на готовом шаблоне. Само собой, шаблон никакой сео-технической оптимизации не имел.
Проведем оптимизацию самостоятельно. Но сначала небольшое погружение в теорию: что такое веб-страница на сервере? Это сборище скриптов, которые по запросу пользователя формируют файл с расширением HTML и отправляют на компьютер пользователя. В этом файле, как положено, есть шапка, подвал, меню навигации и полезный контент с красивыми картинками.
Браузер пользователя получает html-файл и смотрит в его код. Код выглядит примерно так:
Как видите по картинке выше, первые десятки строк посвящены чему угодно, но только не контенту. Структура страницы, которую мы обсуждали в прошлом посте, в мире HTML называется телом страницы (body) и размещается между тегами <body> и </body>. На картинке представлена голова страницы, которая командует телу – где, чего, когда и как показывать. Так же в html-коде любой страницы есть чуланчик, находящийся сразу перед закрывающим тегом </body>. В чуланчике хранятся всякие разные плюшки, которые могут понадобиться на странице, а могут полежать до лучших дней.
Вернемся к голове html-страницы. Команды по правильному показу контента можно не размещать на самой странице, а вынести в отдельный файл. Для всего сайта эти команды в принципе одинаковы. Так зачем множить сущности? Пусть команды лежат в одном месте, а страницы (их головы) к ним обращаются.
Самая главная команда для html-страниц – это файл со стилями.
Вот скриншот страницы без стилей
скриншот страницы без стилей CSS
И та же страница с подключенными файлами стилей 'css/reset.css', 'fonts/font-awesome-4.7.0/css/font-awesome.min.css', 'css/main.css', 'css/magnific-popup.css', 'css/slick.css', 'css/bootstrap.css', 'css/owl.carousel.min.css', 'css/media.css':
скриншот страницы со стилями CSS
Феерическая разница!
Как указывал выше, сайт заказан на самом дешевом тарифе, без технического СЕО. Глядя на обилие файлов со стилями, понимаю, что придется повозиться. Считаю нужным напомнить пост про библиотеку, в котором вы кидали записочку с запросом библиотекарю: "А принеси-ка, милейший, мне файл, лежащий по адресу "https://seoforger.ru/catalog/web-development". Файл был принесен, как писал и показывал выше, в формате html. После попадания на компьютер пользователя, теперь уже браузер командует библиотекарю: "Так-так-так! А принеси-ка файл стилей reset.css. Так, молодец! А теперь файл стилей font-awesome.min.css. Тоже молодец!..."
Что могу сказать? Файлов указано много:
Библиотекарь таскает файлы, указанные в голове html-документа (смотри картинку выше), а браузер пристраивает их в дело. Когда все файлы стилей получены, браузер приступает к чтению тела документа HTML, получает файлы изображений, отрисовывает страницу c картинками и стилями и показывает пользователю.
Сами понимаете, что если файлы стилей указано во множестве и картинки присутствуют десятками, то отрисовывать это хозяйство – долгий и громоздкий труд. А как пишут в соседнем блоге – одним из важных показателей СЕО является скорость отрисовки страницы, менее 2-х секунд.
Ну что же! Пришло время заниматься техническим СЕО и уменьшать скорость отрисовки. Кстати, а какая она?
Цифры в кружочках среди специалистов СЕО называются "попугаями" и показывают они, как видно из подсказки, проценты от идеального значения. Так же среди специалистов бытует мнение, что попугаи ничего не решают. Но мы то знаем, что это не так. Наша цель – сделать всех попугаев зелеными!
Тут небольшое замечание. Сайты из коробки от Shop'n'SEO изначально нацелены на получение высоких оценок Core Web Vitals, но все ли шаблоны нацелены на это?
Отвечаю – не все!
Выбранный мною шаблон не сильно испортил показатели Accessibility, Best Practices и SEO. Технически испортить их тяжело, но можно. И открою небольшой секрет – я изначально выбирал шаблон, в котором есть проблемы только с показателем Performance. Если есть понимание, как работают CSS и Javascript, то загнать это показатель в зеленую зону – дело пары часов. Тем более PageSpeed Insights сам дает подсказку, что и как надо поправить:
Приступаем к исправлениям согласно списку! Предварительно почитав Гид по On-Page SEO.