#3-Проверка сайта инструментами. Правка

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

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

Описание:

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

Описание:

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

'Blog_PostController_actionUpdate_';

'#blog_post_update';

Проверка сайта инструментами. Правка

Активен

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

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

Сменить блог

Название

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

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

id (статус)	44 (3)
Идентификатор ссылки (англ.)	perekhodim-k-praktike-3
Сайт (ID сайта)	shopnseo.ru. #3
Смотреть на сайте	https://shopnseo.ru/posts/sayty/perekhodim-k-praktike-3/
Время последнего обновления	23-03-2025 в 14:56:34
Ссылка в БД	https://panel25.seowebdev.ru/seowebdev.ru/posts/sayty/perekhodim-k-praktike-3/
Картинка	https://static.seowebdev.ru/cache/8/44-perekhodim-k-praktike-3_col-12.webp

Текст поста

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

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

Валюты: € £ ¥ ¢

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

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

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

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

Кто не имеет понятия о Каскадных таблицах стиля (CSS) и Javascript, тому этот пост интересным не будет, но может оказаться познавательным. Пробегите взглядом наискосок и, возможно, что-то интересное узнаете о волшебном мире фронтенда.
Всем прочим докладываю, как получить 100% попугаев. На всякий случай, рассказываю самым простым языком, доступным даже школьнику начальных классов.
Итак, смотрим в код шаблона, в ту его часть, которая посвящена стилю сайта:
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_63348312411706638355752.webp" alt="файлы css в проекте" width="775" height="142" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Видим восемь файлов, которые создают внешний вид сайта. Ничего лишнего! А что у нас со скриптами? Еще 11 штук!
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_62500133821706638518652.webp" alt="файлы js в проекте" width="758" height="174" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Вспоминаем аналогию с библиотекой: "А сходи-ка, милейший за файлом media.css!" и далее по всем файлам. 20 раз придется бегать с учетом главного файла. На эту беготню уходит половина времени, отданная браузеру на отрисовку страницы. Другая половина растекается по мелочи, за которой будем охотиться потом. Для начала посмотрим, какие файлы нам нужны на этой странице, а какие оставлены про запас. Фронтендеры &ndash; они как хомяки, тащат на страницу, как в нору, всякий мусор!
Избавляемся от мусора.
Все нужные файлы объединяем в два файла! Один для стилей &ndash; main.css, другой для скриптов &ndash; main.js.
<h2>Проверка на CoreWebVitals</h2>
Накануне я погорячился, сказав, что на это уйдет два часа. Двое суток прошли в конкатенации, минификации и отладке! Грузим все добро на сервер и тестируем. Тут примечание &ndash; потратил еще один день на отладку сайта с новыми стилями и скриптами, а так же на очистку кэша со стороны сервера.
Вуаля! Проверка на CoreWebVitals с помощью инструмента от Гугл <a title="PageSpeed Insights" href="https://pagespeed.web.dev/">PageSpeed Insights</a> показала, что в погоне за попугаями чуть-чуть поломались "Доступность / Accessibility" и "Лучшие практики/ Best Practices"
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/Screenshot5.webp" alt="Скриншот проверки сайта на CoreWebVitals" width="785" height="745" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Исправляем на месте! Тем более, если поскроллить вниз, будут указаны ошибки, снижающие балл!
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/Screenshot19.webp" alt="Ошибки, снижающие балл в секции Доступность." width="710" height="581" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
На их исправлениt уйдет вечер, а наутро получим сайт, стопроцентно оптимизированный с точки зрения PageSpeed Insights. Пока оптимизирую, вам имеет смысл почитать в соседнем блоге "<a title="Мини-гид по структуре сайта" href="https://shopnseo.ru/posts/seo-optimization/struktura-sayta-mini-guide">Мини-гид по структуре сайта"</a>, чтобы понимать дальнейшие шаги.
И кстати, "<a title="Гид по On-Page SEO" href="https://shopnseo.ru/seolibrary/on-page-seo-guide" target="_blank" rel="noopener">Гид по On-Page SEO</a>" уже прочитали? Чтобы были в курсе &ndash; половину работ из этой книги мы уже сделали!
Тем более я за полчаса все поправил:
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/Screenshot7.webp" alt="Проверка на CoreWebVitals" width="755" height="785" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
С такими цифрами можно смело приступать к продвижению! Однако спешить мы не будем. Проверим сайт на предмет наличия ошибок!
<h2>Проверка микроразметки Schema.org</h2>
<a title="Сервис проверки расширенных результатов" href="https://search.google.com/test/rich-results?hl=ru">Сервис проверки расширенных результатов</a> от гугла показал, что ошибок нет. Этот сервис проверяет разметку сайта на соответствие требованиям <a title="Схемы.орг" href="https://shopnseo.ru/texts/spravochnik-po-seo-onlayn-torgovle-i-internetu/slovar-seo-ot-s-do-z#schema">Схемы.орг</a>.
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/Screenshot8.webp" alt="Проверка расширенных результатов" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Требованиям соответствует!
<h2>Служба проверки разметки</h2>
<a href="https://validator.w3.org/">Служба проверки разметки</a> так же подтвердила, что с точки зрения верстки сайт сверстан идеально. Претензий нет!
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/Screenshot9.webp" alt="Служба проверки разметки" width="534" height="554" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
<h2>Проверка битых ссылок</h2>
Несмотря на то, что сайт только начал работать, невалидные ссылки могут иметь место! Для такой проверки существует огромное множество инструментов и какое-то одно выделить трудно, потому что я пользуюсь встроенным в панель управления инструментом LinkCommander. Вам же имеет смысл воспользоваться любым доступным инструментом, которых в гугле пруд пруди.
Тен менее советую воспользоваться официальными инструментами того поисковика, на продвижение в котором нацелились! Если вы наметили продвижение в Гугл, то логично будет узнать мнение самого Гугла о ваших ссылках. Тут в помощь <a title="Google Search Console" href="https://search.google.com/" target="_blank" rel="noopener">Google Search Console</a> (раздел "Ссылки" находится в левом нижнем углу панели управления):
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/_Screenshot20.webp" alt="Google Search Console" width="944" height="670" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Кто нацелился на продвижение в Яндексе, тому поможет Яндекс.Вебмастер, где можно проверить:
<ul>
<li>внутренние ссылки,</li>
<li>внешние ссылки</li>
<li>неработающие ссылки.</li>
</ul>
Скриншоты ниже:
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/mceu_50975788311708494344344.webp" alt="Неработающие ссылки. Яндекс" width="878" height="638" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Неработающие ссылки
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/_Screenshot22.webp" alt="Внутренние ссылки" width="807" height="127" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Внутренние ссылки
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/_Screenshot23.webp" alt="Внешние ссылки" width="807" height="219" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Внешние ссылки
Заполировать проверку можно на сеошных ресурсах <a title="ahrefs.com" href="https://shopnseo.ru/texts/faq/rasskazhite-ob-ahrefs-28827" target="_blank" rel="noopener">ahrefs.com</a> или <a title="semrush.com" href="https://www.semrush.com/projects/" target="_blank" rel="noopener">semrush.com</a>. Бесплатный онлайн-инструмент проверки ссылок тоже существует &ndash; <a title="smallseotools.com" href="https://smallseotools.com/ru/website-link-analyzer-tool/">smallseotools.com</a>. Так же можно установить на компьютер десктопное приложение <a title="Screamingfrog Seo Spider" href="https://shopnseo.ru/texts/faq/instrumenty-seo-40284" target="_blank" rel="noopener">Screamingfrog Seo Spider</a>. В бесплатной версии оно проверяет до 500 url. Нам для старта достаточно.
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/_Screenshot24.webp" alt="Screaming Frog screenshot" width="900" height="668" style="display: block; margin-left: auto; margin-right: auto;" loading="lazy">
Что делать с битыми ссылками, если вдруг обнаружились? Алгоритм действий прост:
<ul>
<li>отредактировать страницу и заменить битые ссылки на действующие;</li>
<li>отправить сайт на переобход поисковыми роботами (об этом позже);</li>
<li>ждать!</li>
</ul>
Продолжение следует. Приступим к улучшению готового текста!

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

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

Проверка сайта инструментами. Правка

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