Как добавлять миниатюры для записей блога

Прежде чем сказать как добавлять миниатюры, хочу объяснить что именно нужно добавлять в миниатюры.

Микроразметка Schema.org/BlogPosting

Чтобы ваш сайт на базе темы дизайна занимал более высокие позиции в поисковой выдаче, в тему дизайна внедрена микрозаметка формата schema.org.

У данной микроразметки есть определённые обязательные требования, за соблюдением которых следит Google.
Одно из обязательных требований – наличие изображений для каждой записи блога.
Но не просто изображений, а также мета-данных об этом изображении – высоте и ширине изображения.

Приблизительно так должен выглядеть код изображений для записи блога:

<img itemprop="url" src="ссылка на изображение" class="post-thumb" alt="подпись к изображению"/>
<meta itemprop="width" content="ширина изображения">
<meta itemprop="height" content="высота изображения">

Куда вставлять данный код

Данный код нужно вставить в дополнительные параметры записи в приложении Блог.
Чтобы их найти нужно открыть редактор записи и в правом сайдбаре нажать на кнопку "редактировать" под заголовком Мета

Вот в данное поле и нужно вставить код.

Как вставлять код

Дополнительные параметры Webasyst устроены таким образом, что там новая строка равняется новому параметру. И если вставить туда код в читаемом виде, то это может вызвать ошибки.

Поэтому вставлять код нужно следующим образом:

Копируете код:

<img itemprop="url" src="ссылка на изображение" class="post-thumb" alt="подпись к изображению"/>
<meta itemprop="width" content="ширина изображения">
<meta itemprop="height" content="высота изображения">

И вставляете его в поле "Дополнительные параметры".
Затем указываете ссылку на ваше изображение в атрибуте src, меняете alt на свой, а также указываете размеры изображения в мета-тегах.

Затем в самом начале кода вам нужно указать имя параметра и знак равно: g_thumb=

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

Вот как это приблизительно должно выглядеть:

Изображение во всю ширину

При добавлении данного кода, ваше изображение будет ужато до размеров 250px в ширину и обведено рамкой.
Если вы хотите, отображать изображение во всю ширину блока, то вам нужно удалить из кода изображения class="post-thumb". То есть код с изображением должен выглядеть так:

<img itemprop="url" src="ссылка на изображение" alt="подпись к изображению" itemprop="image"/>

Как и куда загружать изображения

О том куда и как загружать изображения можно прочитать в этом топике.