#3-Правка текста поста

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

'Blog_PostController_actionUpdateHtml';

'#layouts_templates_updateHtml';

Правка кода HTML в тексте

Кто не имеет понятия о Каскадных таблицах стиля (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>
Продолжение следует. Приступим к улучшению готового текста!

Краткое название: Проверка сайта инструментами

Полное название Подготовка сайта к ранжированию. Проверка инструментами

Активен Редактировать название и описание

Название

Стандартный редактор Смотреть

Полное название и описание

Полное название (Заголовок)

Описание

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!