Показать описание Description ниже заголовка поста BLOGGER

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

Я не буду посвящать этот пост подробному разъяснению того, что такое Title и Description и как они важны для ранжирования блога поисковиками. В сети очень много полезной информации на эту тему. Просто вбейте в поиск и изучайте тему. Настоятельно рекомендую начинающим блогерам ознакомиться с этим основными моментами продвижения блога.

Буквально 2 строчки для наглядности.

Title это заголовок веб - страницы и именно он отображается в поисковой выдаче.

Description - описание веб - страницы. Посмотрите на скриншот, чтобы понять где что.

Мы даём название нашему посту Title. И в Блоггере есть отличный инструмент в редакторе сообщений. Описание для поисковых систем ━ Description. Это поле обязательно должно быть заполнено. Описание должно быть уникальным для каждой страницы и отображать ее содержание. При неправильном составлении или вообще отсутствии мета - тега поисковик сам подбирает из текста на своё усмотрение релевантный текст.

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

Вы добавляете описание в свой пост во время публикации, а простой код извлекает это описание и отображает его в нужном месте сообщения. Давайте уже посмотрите на тестовом блоге как это будет выглядеть.

Демонстрация

Для реализации нужно сделать всего лишь 2 шага.

1. Откройте Blogger> Тема> Редактировать HTML. Найдите строку

<div class='post-header'/>

или

<div class='post-header-line-1'/>

Сразу после неё установите следующий код

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='meta-description'><data:blog.metaDescription/></div></b:if>

2. Сейчас зададим стили CSS, чтобы выделить это описание. Там же в шаблоне нужно найти знакомую всем строку ]]></b:skin> и над ней устанавливаем следующий код -

.meta-description{background: #f9f9f9;
    margin: 0 -20px;
    padding: 20px;
    line-height: 30px;
    font-size: 12px;
    font-style: italic;
    color: grey;
    font-weight: bold;
    word-spacing: 1px;box-shadow: 0px 4px 3px -2px #ccc}

При желании можно поиграться с фоном background: #f9f9f9; размером и стилем шрифта. Изменить цвет тени box-shadow: 0px 4px 3px -2px #ccc.

Сохраните шаблон.

Таким образом, вы можете отображать Meta Description в любом месте вашего сообщения.

Спасибо вам за внимание и до встречи. У меня сегодня всё.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email