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

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

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

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


Description

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

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


5 комментариев:

  1. Виктория, у меня в блогах стоит "Описание для поисковой системы" в Настойках сообщения. Ниже названия поста Описание тоже может появится? То, которое я напишу в Настройках? Интересно!

    ОтветитьУдалить
    Ответы
    1. Ирина. Посмотри на скриншоте окно где написано Description. Именно оно и появится под названием сообщения.

      Удалить
  2. Вот здесь более доступно про Title и Description -http://blog.contentmonster.ru/2014/03/title-i-description/

    ОтветитьУдалить
  3. Вика, спасибо за помощь, уже встречала частично, но не предала значения этим кодам.

    ОтветитьУдалить
    Ответы
    1. Тамара, вот так из нужных мелочей и складывается наше блоговедение. Пожалуйста.

      Удалить

Пользовательский поиск
Foto Saya
My Photo