#3-Техническое СЕО. Правка

Первый пост в разделе "Практические примеры"

Идентификатор ссылки (англ.)	pervyy-post-v-razdele-prakticheskie-primery
Статус:	Активен

Описание:

Идентификатор ссылки (англ.)	perekhodim-k-praktike-3
Статус:	Активен

Описание:

'#8. Посты : posts';

'Blog_PostController_actionUpdate_';

'#blog_post_update';

Техническое СЕО. Правка

Активен

Почистить кэш постов Экспресс-правка Разметка ред. Summernote ред. Quill ред. CKEditor ред. Trumbowyg ред. Imperavi ред. Jodit

Общая информация

Сменить блог

Название

Рейтинг SEO (от 1 до 100)

Всего знаков в посте: 13753

id (статус)	43 (3)
Идентификатор ссылки (англ.)	tekhnicheskoye-seo
Сайт (ID сайта)	shopnseo.ru. #3
Смотреть на сайте	https://shopnseo.ru/posts/sayty/tekhnicheskoye-seo/
Время последнего обновления	23-03-2025 в 14:53:56
Ссылка в БД	https://shopnseo.ru/posts/sayty/tekhnicheskoye-seo/

Текст поста

Ключевое слово отсутствует

Полный текст < > & " ' « » – — … • · ← → ↑ ↓ ↔

Валюты: € £ ¥ ¢

Типографика: § ¶ ° ± × ÷

Дроби: ½ ⅓ ⅔ ¼ ¾ ⅛ ⅜ ⅝ ⅞

Греческие: α β γ δ ε λ μ π σ ω Δ Σ Ω

Математические: ≈ ≠ ≤ ≥ ∞ √ ∑ ∫ ∂ ∇

Итак, я время зря не терял. Создал четыре раздела, по которым мы будем раскручивать сайт в поисковых сетях.
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_91731766411706290622432.webp" alt="панель управления Shopnseo. Разделы" width="750" height="582" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
С сутью показанных выше разделов разберемся во время строительства и продвижения сайта. Теоретическая часть рассматривается в соседнем <a title="блоге о продвижении" href="https://shopnseo.ru/seo-blog/seo-optimization">блоге о продвижении</a>. Здесь только практика.
Практика диктует, что первым делом перед началом работ по развертыванию и продвижению сайта, следует провести его техническое обслуживание &ndash; хорошо ли сайт отвечает на запросы, не зависает ли, понятен ли он пользователю и &ndash; внимание! &ndash; поисковым роботам?
На все вопросы даст ответ Техническое СЕО.
Приступаем!
Теоретическое пособие по этой теме размещено в нашей библиотеке &ndash; <a title="Продвинутое техническое СЕО" href="https://shopnseo.ru/seolibrary/prodvinutoye-tekhnicheskoye-seo">Продвинутое техническое СЕО</a>. Можете ознакомиться! С практической частью будем знакомиться прямо сейчас с парой оговорок:
Если вы пользуетесь платформой Shop'n'SEO, вам не надо читать главы
<ul>
<li>#2 <a title="SEO-хостинг" href="https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/seo-khosting-74948" target="_blank" rel="noopener">SEO-хостинг</a>,</li>
<li>#3 <a title="Руководство по созданию URL-адреса" href="https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/rukovodstvo-po-sozdaniyu-url-adresa-91773" target="_blank" rel="noopener">Руководство по созданию URL-адреса</a>,</li>
<li>#4 <a title="XML-карты сайта для улучшения SEO" href="https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/xml-karty-sayta-dlya-uluchsheniya-seo-94436" target="_blank" rel="noopener">XML-карты сайта для улучшения SEO</a>,</li>
<li>#5 <a title="Настройки мета-тегов robots.txt" href="https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/nastroyki-meta-tegov-robotstxt-97936" target="_blank" rel="noopener">Настройки мета-тегов robots.txt</a>,</li>
<li>#7 <a title="SEO-оптимизация для HTTP-статус-кодов" href="https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/seo-optimizatsiya-dlya-http-status-kodov-04060" target="_blank" rel="noopener">SEO-оптимизация для HTTP-статус-кодов</a></li>
<li>#11 <a title="HTTP или HTTPS?" href="https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/http-ili-https-42690" target="_blank" rel="noopener">HTTP или HTTPS?</a></li>
<li>#20 <a href="https://shopnseo.ru/texts/prodvinutoye-tekhnicheskoye-seo/rukovodstvo-po-seo-parametrov-url-67050">Руководство по SEO параметров URL</a>.</li>
</ul>
Все вопросы, обсуждаемые в этих главах, решены платформой. По остальным главам есть решения на уровне "Бизнес-пак" и выше.
Я заказал самый дешевый тариф и соответственно, сео-оптимизацией буду заниматься самостоятельно! Как вы помните, я заказал сайт на готовом шаблоне. Само собой, шаблон никакой сео-технической оптимизации не имел.
Проведем оптимизацию самостоятельно. Но сначала небольшое погружение в теорию: что такое веб-страница на сервере? Это сборище скриптов, которые по запросу пользователя формируют файл с расширением HTML и отправляют на компьютер пользователя. В этом файле, как положено, есть шапка, подвал, меню навигации и полезный контент с красивыми картинками.
Браузер пользователя получает html-файл и смотрит в его код. Код выглядит примерно так:
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_19666259421706290704255.webp" alt="Исходный код веб-страницы" width="727" height="520" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Как видите по картинке выше, первые десятки строк посвящены чему угодно, но только не контенту. Структура страницы, которую мы обсуждали в прошлом посте, в мире HTML называется телом страницы (body) и размещается между тегами &lt;body&gt; и &lt;/body&gt;. На картинке представлена голова страницы, которая командует телу &ndash; где, чего, когда и как показывать. Так же в html-коде любой страницы есть чуланчик, находящийся сразу перед закрывающим тегом &lt;/body&gt;. В чуланчике хранятся всякие разные плюшки, которые могут понадобиться на странице, а могут полежать до лучших дней.
Вернемся к голове html-страницы. Команды по правильному показу контента можно не размещать на самой странице, а вынести в отдельный файл. Для всего сайта эти команды в принципе одинаковы. Так зачем множить сущности? Пусть команды лежат в одном месте, а страницы (их головы) к ним обращаются.
Самая главная команда для html-страниц &ndash; это файл со стилями.
Вот скриншот страницы без стилей
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_29729455121706272160174.webp" alt="скриншот страницы без стилей" width="758" height="465" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
скриншот страницы без стилей 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':
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_84952750031706272191991.webp" alt="скриншот страницы со стилями CSS" width="900" height="723" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
скриншот страницы со стилями CSS
Феерическая разница!
Как указывал выше, сайт заказан на самом дешевом тарифе, без технического СЕО. Глядя на обилие файлов со стилями, понимаю, что придется повозиться. Считаю нужным напомнить пост про библиотеку, в котором <a title="вы кидали записочку с запросом" href="https://shopnseo.ru/posts/sayty/baza-dannykh">вы кидали записочку с запросом</a> библиотекарю: "А принеси-ка, милейший, мне файл, лежащий по адресу "https://seoforger.ru/catalog/web-development". Файл был принесен, как писал и показывал выше, в формате html. После попадания на компьютер пользователя, теперь уже браузер командует библиотекарю: "Так-так-так! А принеси-ка файл стилей reset.css. Так, молодец! А теперь файл стилей font-awesome.min.css. Тоже молодец!..."
Что могу сказать? Файлов указано много:
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_89139327311707340024676.webp" alt="ссылки на файлы стилей" width="727" height="81" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Библиотекарь таскает файлы, указанные в голове html-документа (смотри картинку выше), а браузер пристраивает их в дело. Когда все файлы стилей получены, браузер приступает к чтению тела документа HTML, получает файлы изображений, отрисовывает страницу c картинками и стилями и показывает пользователю.
Сами понимаете, что если файлы стилей указано во множестве и картинки присутствуют десятками, то отрисовывать это хозяйство &ndash; долгий и громоздкий труд. А как пишут в <a title="соседнем блоге" href="https://shopnseo.ru/posts/seo-optimization/povedeniye-polzovatelya">соседнем блоге</a> &ndash; одним из важных показателей СЕО является скорость отрисовки страницы, менее 2-х секунд.
Ну что же! Пришло время заниматься техническим СЕО и уменьшать скорость отрисовки. Кстати, а какая она?
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_8856769341706272226150.webp" alt="скриншот PageSpeed Insights" width="815" height="773" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Цифры в кружочках среди специалистов СЕО называются "попугаями" и показывают они, как видно из подсказки, проценты от идеального значения. Так же среди специалистов бытует мнение, что попугаи ничего не решают. Но мы то знаем, что это не так. Наша цель &ndash; сделать всех попугаев зелеными!
Тут небольшое замечание. Сайты из коробки от Shop'n'SEO изначально нацелены на получение высоких оценок Core Web Vitals, но все ли шаблоны нацелены на это?
Отвечаю &ndash; не все!
Выбранный мною шаблон не сильно испортил показатели Accessibility, Best Practices и SEO. Технически испортить их тяжело, но можно. И открою небольшой секрет &ndash; я изначально выбирал шаблон, в котором есть проблемы только с показателем Performance. Если есть понимание, как работают CSS и Javascript, то загнать это показатель в зеленую зону &ndash; дело пары часов. Тем более PageSpeed Insights сам дает подсказку, что и как надо поправить:
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_29576167651706272419353.webp" alt="PageSpeed Insights" width="798" height="831" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Приступаем к исправлениям согласно списку! Предварительно почитав <a title="Гид по On-Page SEO" href="https://shopnseo.ru/seolibrary/on-page-seo-guide" target="_blank" rel="noopener">Гид по On-Page SEO.</a>

Скопировано в буфер!

Вставлено из буфера!

Техническое СЕО. Правка

Дополнительные символы