ТЗ на разработку страницы блога под 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. Похожие
Структурные элементы
1. Хлебные крошки
Главная, рубрика, страница
2. Первый экран
Название статьи и первый абзац должны быть отображены на первом экране мобильного. Чем больше контента входит на первый экран и чем меньше хедера тем лучше.
Смотреть в соотношении 349x812. Это размер скриншота, который делает Google при проверке страницы.
Чтобы сэкономить место можно перенести заголовок на изображение из превью статьи. Или перенести изображение превью под первый абзац и под другие элементы страницы.
3. Уровни заголовков
Уровни заголовков должны отличаться визуально друг от друга
4. Теги выделения
Для тегов strong / b и em / i должны быть прописаны стили. Это самые популярные теги для выделения важных участков предложений, абзацев.
5. Размер холста, шрифтов, интервалов
Референсы:
6. Поясняющая подпись под фото
Сделать через тег figure, а текст добавить в его дочерний тег figcaption. Это показывает их связь.
Где попало не стоит добавлять описание, а только на важных изображениях, где это требуется.
7. Рейтинг статьи
Должна быть возможность проголосовать, вывод количества проголосовавших и рейтинг.
Выводить можно в двух местах:
- Вначале страницы информацию о рейтинге,
- По окончанию статьи большой блок с призывом проголосовать.
8. Кнопки “Поделиться в соц. сетях и мессенджерах”: ВК, FB, OK, Твиттер, Ватсап, Вайбер, Телеграм и так далее
Чтобы люди могли поделиться со своими друзьями, сохранить себе контент, репостнуть на стену.
Например, я скидываю себе статьи в Избранное в Телегу или ВК. Чтобы их потом прочитать. Возможно не у меня одного такой паттерн поведения:)
9. Счетчик просмотров статьи
Обычно указывается сверху.
10. Дата публикации
Дата, месяц, год
11. Система комментариев
- Количество комментариев к статье.
- Автор комментария.
- Дата публикации.
- Голосование за комментарий.
- Количество положительных голосов.Количество отрицательных голосов.Общая оценка комментария, которая складывается из положительных и отрицательных голосов.
- Текст комментария.
Блоки для оформления текста и навигации
1. Блоки внимания
- Информация
- Успешно
- Осторожно
- Ошибка / Опасно
- Цитата с указанием источника.
2. Содержание статьи
Дизайн
Стандартное содержание страницы. С возможности выводить свернутый и развернутый формат.
Визуально отобразить вложенность заголовков.
Для тех кому проще заплатить один раз программисту, чем возиться руками
Нужна возможность автогенерации содержания статьи. С возможностью ручного редактирования.
- функционал должен работать в полуавтоматическом режиме;
- активироваться после его вызова;
- расставляет якоря по заголовкам h2, h3;
- формировать содержание из тегов h2, h3;
- текст заголовка = пункт в содержании;
- должна сохраняться иерархия и вложенность.
Юзерстори:
Я хочу нажать на кнопку, которая сгенерирует мне содержание статьи и вставит его в код страницы. После чего я хочу иметь возможность редактировать его руками..
Этот функционал должен вызываться только по ручной активации. Если в теге заголовка уже есть id, то для якоря брать его, а не добавлять новый.
Блоки, которые можно создать плагином Expert Review
Два хороших блока, которые позволят повысить качество оформления страницы:
- Цитата эксперта. Например, приглашенный эксперт для статьи.
- Ответы на вопросы. Отличия от стандартного FAQ в том, что тут ответ дает эксперт и есть возможность задать вопрос, что вызывает больше доверия.
Если у вас WP, то проще купить эти плагины. Они входят в набор плагинов Expert Review. За 1,5к суммарно они выводят сайты на новый уровень качества оформления.
3. Цитата эксперта
4. Вопрос-ответ
Информация об эксперте, который дает ответ, возможность задать вопрос, сами вопросы и ответы на них
Автор
Создать страницу автора
- Фотографии;
- Должность;
- Описание, биография, награды, образование
- Сайт, соц. сети;
В содержании 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. Размечаем саму статью
2. Разметку автора описал в блоке “Автор” этой статьи
Подробно тут
3. Хлебные крошки
4. Вопрос-ответ
5. Разметка комментариев
Проверять тут
Рекомендации по разметке и блокам
1. Изучите Галерея поиска Google
Выберите подходящие типы разметки, внедрите себе эти блоки, разметьте их.
2. Прямые конкуренты
- собираете жирных конкурентов из поиска Google,
- закидываете их сюда https://developers.google.com/search/docs/advanced/structured-data,
- собираете все типы разметки, которые находите,
- собираете интересные блоки со страниц,
- внедряете.
3. Похожие ниши
Нет идей от конкурентов? Идите в соседнюю более конкурентную нишу.
Например, для видеопродакшена я смотрю идеи из сферы разработки сайтов. Ниши по подходу очень похожи.
Как лучше разобраться в структурированных данных?
Попробуйте заполнить несколько разных типов разметки, которые предлагает этот конструктор
Это помогает наглядно пощупать работу микроразметки.
Заключение
Надеюсь, что контент вам понравился и будет полезен.
ТЗ в формате документа можно скачать тут.
Чтобы сказать мне спасибо:
1. Поставьте лайк статье
2. Подпишитесь на мой ТГ-канал
Прикольно, спасибо:)
Пожалуйста :)
У меня есть еще 2 статьи такого же формата
https://vc.ru/seo/247459-kak-oformit-stranicu-kontakty-dlya-seo-na-maksimum-chek-list-i-prototip
https://vc.ru/seo/301049-kak-oformit-stranicu-o-kompanii-dlya-seo-na-maksimum-chek-list-prototip
Может быть будет полезно.
Благодарю, на досуге прочту
Все думаю начать осваивать SEO как дополнительный навык, много уже знаю, но все время что-то останавливает, постоянно какую-то новую инфу узнаю, про подклейки домена, накрутку ПФ, закупку ссылок, непонятную микроразметку и желание сразу пропадает...
Освойте следующие навыки:
1. Сбор нишевых лидеров для анализа
2. Базовый сбор конкурентов
3. Текстовая оптимизация
оптимизация текстовых элементов
оптимизация зоны внутренних ссылок
мета-теги
7. Базовая техническая оптимизация сайта
8. Коммерческие факторы ранжирования
9. Базовые ссылки
10. Базовая аналитика
Не нужно углубляться в сложные темы. Они на старте не нужны. Особенно они не нужны владельцам бизнеса и маркетологам.
Это вы добавили, чтобы желание и не возникало? :)
И где СЯ, структура сайта, UX (чтобы понимать, как проектировать страницы)?
Опечатка. Спасибо, добавил про СЯ.
Попробовал вершки самые описать. Так как Михаил написал, что как дополнительный навык.
Спасибо за наводку!
Я занимаюсь контекстной рекламой, так что с семантикой и структурой сайта особых проблем не возникает:) Основная сложность это разборки с технической частью...
Вы все разметки и структуру пишете сами или составляете ТЗ для заказчика?
Тут есть 3 пути:
1. Писать все самому. Ну нафиг :)
2. Создавать инфоструктуру подрядчиков.
3. ТЗ для заказчика. И нанимает подрядчиков.
Я сначала шел по пути 2. Потом переключился на 3. Так как у большинства моих заказчиков есть свои подрядчики, с которыми он работает.
От меня обычно копирайтеры и иногда дизайнер.
Описался. В пункте 2. Базовый сбор семантики.
Максим, круче чем в 100500 курсах написал)) Маркетологам нужны тем кто в SEO хочет )). Я хочу ))