Добро пожаловать на двадцать первый урок. Сегодня поговорим про SEO-оптимизацию сайта и плагин Rank Math.
SEO (Search Engine Optimization) — это комплекс методов и стратегий, которые используются для улучшения видимости сайта в поисковых системах, таких как Google, Yandex и др. Основная цель SEO — сделать сайт более привлекательным для поисковых систем и удобным для пользователей. Для этого применяются различные подходы.
Для контент-специалиста — выявление и использование ключевых слов. Это помогает понять, какие запросы пользователей наиболее актуальны для вашего сайта и какие слова и фразы следует использовать в контенте. Создание качественного и уникального контента. Поисковые системы отдают предпочтение сайтам, которые предлагают полезную информацию.
Для верстальщика — оптимизация технических аспектов сайта. Включает в себя работу над скоростью загрузки, адаптивностью для мобильных устройств, структурой URL и наличием карты сайта. Всё это помогает поисковым системам лучше проиндексировать сайт. Наличие внешних и внутренних ссылок, которые указывают на ваш сайт. Качественные обратные ссылки с авторитетных ресурсов повышают доверие к вашему сайту.
Для дизайнера — удобство навигации, дизайн и общее восприятие сайта. Хороший пользовательский опыт способствует снижению показателей отказов и увеличению времени, проведённого на сайте. SEO играет важную роль в продвижении сайта, так как помогает привлечь органический трафик посетителей, которые находят сайт через поисковые системы, улучшить его видимость и, как следствие, увеличить количество клиентов и конверсий.
Перейдём в консоль WordPress и в плагинах добавим новый плагин — Rank Math. Он у нас самый первый. Этот плагин как раз и даёт нам инструменты для SEO.
Давайте установим. Активируем. Появляется мастер установки, но давайте всё пропустим и сразу же перейдём в консоль. Попадаем в настройки и сразу же поставим «Мониторинг 404» — включим переключатель. У нас есть Advanced custom fields. Это пользовательские поля, как вы помните. Модуль включен, оставляем по умолчанию.
Далее у нас идёт SEO изображений, давайте тоже включим переключатель. И в принципе у нас для всего остального уже всё включено, оставляем как есть.
Далее давайте перейдём в «Общие настройки». И в первом разделе «Ссылки» у нас можно поменять ссылки, первые три оставляем как есть, а вот для «Nofollow внешних ссылок» и «Nofollow ссылок изображений» давайте включим переключатели. Это нужно для ссылок, которые ведут на сторонние ресурсы. Например, на прошлом уроке мы вставляли ссылки видео, которые шли со сторонних ресурсов, таких как YouTube, Vimeo, VK-видео и т. д.
Давайте сохраним изменения и перейдём в следующий раздел — «Цепочки навигации». В наших макетах цепочки навигации не используются, но я вам покажу. Давайте перейдём: «Шаблоны» — «Конструктор темы». Откроем ссылку в новой вкладке. И вот у нас есть, например, шаблон для страницы товара. Давайте его отредактируем.
Откроем в редакторе, и у нас здесь есть для товаров такой виджет: «Хлебные крошки WooCommerce». Давайте его добавим и посмотрим. Для этого можно открыть контейнер сверху. Перенесём, и вот у нас появилась цепочка навигации (или по-другому это называется «хлебные крошки»).
Также можно добавить стили. Давайте цвет ссылки рыжий поставим. Или опять графит. Меняется типографика. Обновим. И ещё покажу: давайте опять перейдём в «Конструктор тем». Вот у нас есть шаблон клиники и шаблон экскурсий. Давайте туда зайдём.
Шаблон клиник, например. Здесь у нас такого виджета, как хлебные крошки (или цепочка навигаций), нет. Но его можно вставить при помощи шорткода. Для этого зайдём в «Настройки» — «Цепочки навигации», включим функцию цепочек навигации. Тут есть какие-то настройки. Например, можно символ-разделитель поставить. Свой можно поставить. Давайте вот такой поставим.
Ярлык главной страницы давайте поменяем. Напишем, например, «Главная». Ссылка на главную у нас остается. Далее можно скрыть заголовок или показать рубрику. Давайте пока оставим всё как есть и сохраним изменения.
Теперь скопируем вот этот шорткод. Скопируем. В редакторе найдём виджет «Шорткод» и добавим его наверх. Давайте сюда и вставим. И вот у нас появилась цепочка навигации. Или, по-другому, «хлебные крошки».
И после этого мы уже стилизуем в «Пользовательских CSS». Давайте обновим и посмотрим. И вот можно переходить, например, на экскурсии. Я архив не делал, поэтому всё так, по умолчанию, было.
Но давайте вернёмся в настройки SEO. Далее у нас идёт вкладка «Изображения». Включаем оба переключателя. Это нужно для того, чтобы если вы забыли прописать атрибут Alt то он автоматически заполнится. Но я настоятельно рекомендую, как я говорил на прошлых уроках, самостоятельно заполнять атрибут. Причём писать что-то осмысленное или описание изображения.
Давайте сохраним изменения. Следующие вкладки. Мы ничего тут не делаем. В принципе все эти вкладки для SEO-специалистов, поэтому оставляем как есть. Давайте теперь перейдём на какую-нибудь страницу, например на главную. «Редактировать в Elementor». Теперь у нас в редакторе появилась новая вкладка — SEO.
Давайте зайдём туда, и можно отредактировать сниппет. Сниппет — это блок информации (саму информацию называют description) о странице сайта, которая отображается в результатах поиска. Сниппет состоит из заголовка и описания страницы, а также может содержать дополнительную информацию о сайте. Благодаря сниппету пользователь получает представление о странице или нужную информацию, не заходя на сайт.
Тут можно поменять заголовок. Давайте на примере покажу. Например, главная страница. У нас отображается как «Главная» и название сайта. То же самое происходит и здесь, на вкладках. Давайте поменяем название, например давайте вот это удалим.
И так как у нас сайт называется «Гармония природы», давайте так и напишем — «Гармония природы». Также можно выбрать из выпадающего списка, но мы пока это не будем делать. Оставляем. Для главной страницы изменить постоянную ссылку невозможно.
«Описание» — подтягивается из первой секции: «Сезонные фермерские продукты с доставкой на дом». Вот, оно сюда подтянулось.
Также можно поменять. Но я думаю оставить.
В принципе все эти настройки для SEO-специалистов, но нам тоже необходимо это знать. Например, поле «Фокусный ключевик». Если вы не знаете его, то можно уточнить у того, кто присылает вам текстовый контент для сайта. Давайте первым сделаем название сайта — «Гармония природы». «Гармония природы». И вот у нас уже ошибок гораздо меньше.
Также давайте посмотрим. Как я уже раньше говорил, надо везде правильно проставить теги. Например, заголовку, так как он у нас главный, давайте поставим H1. Следующему заголовку давайте правильно поставим H2. Если вы не делали этого ранее, при вёрстке, то самое время их поменять.
Этому зададим H3 и т. д. Обязательно задаём правильный тег для секций. Опять же, если вы этого не делали ранее, давайте сделаем section. Здесь у нас… Проверим. Уже стоит, хорошо.
Проверяем картинки, наличие у них alt-атрибутов. Атрибут Alt у меня уже здесь написан. Давайте оставим. Также проверяем кнопку. Давайте её отредактируем. «Перейти в каталог». Давайте, например, динамический тег добавим.
Добавим динамический тег. Например, перейдём на «Внутреннюю ссылку». Найдем тип «Содержимое» и, например, давайте введем «Магазин». Также проставляем для всех ссылок. Проставляем здесь, проверяем всё везде, чтобы работало. Проверяем здесь.
Также можно поставить внутреннюю ссылку, например для консервации. Давайте сделаем также. «Содержимое», «Консервация». Так, нет у нас. Тогда мы поставим URL архива. «Внутренняя ссылка», «Таксономия» и выберем «Консервация». Рубрика «Консервация».
Категория товаров «Консервация». Проверяем, чтобы везде на картинках было полное разрешение (full) и везде атрибут Alt. У меня уже тут написано. Проделываем это на всех страницах. Обновляем. Выход. Отмена. Выход.
Давайте ещё в «Доставку и оплату» зайдём. Также здесь задаём SEO, «Доставка и оплата». Например, давайте заголовок добавим. Тоже «Гармония природы».
Описание, заголовок слайда у нас, как я говорил, подтягиваются. Так что давайте здесь правильно что-нибудь напишем. Например, давайте посмотрим «Доставка и оплата». Давайте добавим описание. Вот это скопируем. И, например, сюда вставим «Доставка продуктов по Нижнему Новгороду».
Также везде проставляем правильные теги ко всем изображениям. Делаем Alt, если не сделали ранее, добавляем везде к секциям правильные теги. И у нас в шаблонах нет ссылки SEO, но здесь тоже надо всё сделать правильно. Правильно к секциям добавить, правильно к картинкам, правильно к заголовкам и т. д.
Сегодня мы установили плагин Rank Math, настроили SEO, поставили правильные теги. На сегодня у меня всё. Пока.
