ТЗ на разработку страницы блога под SEO

Собрал наверное все самые важные и базовые элементы для блога, которые я внедряю на своих проектах. Тут блоки, которые подойдут для 90% сайтов. Не брал вообще никаких нишевых. Как искать и внедрять нишевые блоки, я описал в конце статьи.

Важно! Не брал блоки, которые связывают контент между друг другом (перелинковка). Это лучше в отдельную подтему.

Структурные элементы
1. Хлебные крошки
2. Первый экран
3. Уровни заголовков
4. Семантическое выделение
5. Размер холста, шрифтов, интервалов
6. Поясняющая подпись под фото
7. Рейтинг статьи по бальной шкале звездочками
8. Кнопки “Поделиться в соц. сетях и мессенджерах”
9. Счетчик просмотров статьи
10. Дата публикации
11. Система комментариев
Блоки для оформления текста и навигации
1. Блоки внимания
2. Автогенерируемое содержание статьи
3. Цитата эксперта
4. Вопрос-ответ
Автор
1. Как разработать страницу
2. Разметка автора
3. Вывод автора

Микроразметка
1. Размечаем саму статью
2. Разметка автора
3. Хлебные крошки
4. Вопрос-ответ
5. Разметка комментариев
Рекомендации по разметке и блокам
1. Галерея поиска Google
2. Прямые конкуренты
3. Похожие

Главная, рубрика, страница

Название статьи и первый абзац должны быть отображены на первом экране мобильного. Чем больше контента входит на первый экран и чем меньше хедера тем лучше.

Смотреть в соотношении 349x812. Это размер скриншота, который делает Google при проверке страницы.

Чтобы сэкономить место можно перенести заголовок на изображение из превью статьи. Или перенести изображение превью под первый абзац и под другие элементы страницы.

Уровни заголовков должны отличаться визуально друг от друга

Для тегов strong / b и em / i должны быть прописаны стили. Это самые популярные теги для выделения важных участков предложений, абзацев.

Референсы:

Сделать через тег figure, а текст добавить в его дочерний тег figcaption. Это показывает их связь.

Где попало не стоит добавлять описание, а только на важных изображениях, где это требуется.

Должна быть возможность проголосовать, вывод количества проголосовавших и рейтинг.

Выводить можно в двух местах:

Чтобы люди могли поделиться со своими друзьями, сохранить себе контент, репостнуть на стену.

Например, я скидываю себе статьи в Избранное в Телегу или ВК. Чтобы их потом прочитать. Возможно не у меня одного такой паттерн поведения:)

Обычно указывается сверху.

Дата, месяц, год

Стандартное содержание страницы. С возможности выводить свернутый и развернутый формат.

Визуально отобразить вложенность заголовков.

Нужна возможность автогенерации содержания статьи. С возможностью ручного редактирования.

Юзерстори:

Я хочу нажать на кнопку, которая сгенерирует мне содержание статьи и вставит его в код страницы. После чего я хочу иметь возможность редактировать его руками..

Этот функционал должен вызываться только по ручной активации. Если в теге заголовка уже есть id, то для якоря брать его, а не добавлять новый.

Два хороших блока, которые позволят повысить качество оформления страницы:

Если у вас WP, то проще купить эти плагины. Они входят в набор плагинов Expert Review. За 1,5к суммарно они выводят сайты на новый уровень качества оформления.

Информация об эксперте, который дает ответ, возможность задать вопрос, сами вопросы и ответы на них

- Фотографии;

- Должность;

- Описание, биография, награды, образование

- Сайт, соц. сети;

В содержании title следует указать имя автора и специализацию.

Типа разметки Person Shema.org .

Можно воспользоваться - https://technicalseo.com/tools/schema-markup-generator/

Пример:

<script type="application/ld+json">

{

"@context": "https://schema.org/",

"@type": "Person",

"name": "Максим Котенков",

"url": "https://vc.ru/u/453679-maksim-kotenkov-seo-specialis",

"image": "https://leonardo.osnova.io/92b33755-c59f-5bf4-b983-4b4270167f72/-/format/webp/",

"sameAs": [

"https://www.instagram.com/",

"https://www.youtube.com/"

],

"jobTitle": "SEO-специалист",

"worksFor": {

"@type": "Organization",

"name": "Частник"

}

}

</script>

Например, развернутый блок про автора в конце статьи.

1. Размечаем саму статью

https://developers.google.com/search/docs/advanced/structured-data/article?hl=ru

2. Разметку автора описал в блоке “Автор” этой статьи

Подробно тут

3. Хлебные крошки

https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?hl=ru

4. Вопрос-ответ

https://developers.google.com/search/docs/advanced/structured-data/qapage?hl=ru

5. Разметка комментариев

https://webinmind.ru/html/schema-org-markup/the-data-markup-schema-comments-org

Проверять тут

1. Изучите Галерея поиска Google

Выберите подходящие типы разметки, внедрите себе эти блоки, разметьте их.

2. Прямые конкуренты

3. Похожие ниши

Нет идей от конкурентов? Идите в соседнюю более конкурентную нишу.

Например, для видеопродакшена я смотрю идеи из сферы разработки сайтов. Ниши по подходу очень похожи.

Попробуйте заполнить несколько разных типов разметки, которые предлагает этот конструктор

https://technicalseo.com/tools/schema-markup-generator/

Это помогает наглядно пощупать работу микроразметки.

Надеюсь, что контент вам понравился и будет полезен.

ТЗ в формате документа можно скачать тут.

Чтобы сказать мне спасибо:
1. Поставьте лайк статье
2. Подпишитесь на мой ТГ-канал