Оптимизация изображений на blogger. Галерея картинок

Сегодня тема статьи: "Оптимизация изображений на blogger". Картинки, фото или галерея изображений на блоге являются очень важным элементом для продвижения в поисковых системах. При правильной оптимизации, они создают дополнительный трафик на ваш ресурс, привлекая целевую аудиторию.

Оптимизация изображений.

Галерея изображений/картинок или фотографий — интересное дополнением к статьям, а так же полезный инструмент для блогеров.

Где брать картинки?

Как правило, берутся изображения в Гугл или Яндекс. В строке поиска впишите интересующий вас запрос. Нажмите Картинки в подменю строки и перед вами откроются изображения на заданную тему.

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

Сейчас много бесплатных редакторов онлайн с набором инструментов и инструкциями по редактированию. Скриншоты с компьютера аналогичны изображениям. В статье Как сделать скриншот на компьютере подробно описан этот процесс. Изображения, картинки или векторы по разным темам можно найти и скачать на сайте pixabay.com. Это абсолютно бесплатно.

Как добавить изображение в статью?

В верхнем меню сообщения или страницы нажмите кнопку Вставить изображение и загрузите выбранное изображение (файл). Далее, жмём Добавить выбранное изображение.

Оптимизация изображений на blogger

Для оптимизации изображения на blogger, нажмите на картинку в статье и пропишите её свойства. Можете поставить подпись (надпись) под картинкой. Лишним не будет, но не обязательно. В тексте заголовка продублируйте название статьи. Альтернативный текст должен шире раскрывать тему публикации. Добавьте несколько ключевых фраз/слов через запятую.

Ссылка в изображениях

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

Обязательно поставьте галочку напротив команды Открывать в новом окне. Это более удобно для читателя. Так же, такой метод увеличит время пребывания пользователя на вашем ресурсе. Некоторые изображения/скриншоты с компьютера несут полезную информацию для пользователей. Поэтому, нуждаются в том, чтобы читатель мог их хорошо рассмотреть.

Как увеличить картинку при клике?

В горизонтальном меню сообщения нажимаем HTML и находим код картинки:

<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-RrFSY6J7c9U/WczX60l1H0I/AAAAAAAAAsI/DPT7iiexPw4LBdE4stkbC3u1c7l_LjOZgCLcBGAs/s1600/2017-09-28%2Bat%2B21-01-53.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="100" data-original-width="784" height="40"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCMXHnd7oqdRIhgwxWR1SGX2HzhMhIwoP3uZWLzjPIjddy9NkccEwWXRKkyov8-_5Jwm9LL7lTAPHRLem_87YQ4ZKZaCklcjXytL_kU1nPO3GO_59sGCJV3-Z7Qzc1C2QehF5DvYAab1OZ/s320/2017-09-28+at+21-01-53.png" width="320" /></a></div>

<a href="https://2.bp.blogspot.com/ — это начало кода вашей картинки.

Вставляем после  imageanchor="1" строчку rel="nofollow".

Отделите строчку пробелами. Вот как должно это выглядеть правильно:

   imageanchor="1" rel="nofollow" style="margin-left: 


Готово! Теперь ваше изображение при клике будет увеличиваться. Со временем, вы научитесь делать это простое действие на автомате, за пару минут. Результат будет виден только после публикации сообщения.

Галерея картинок

Галерея картинок/фото на блогере не предусмотрена. Поэтому, крайне затруднительно сделать что-то качественное, не используя сторонние инструменты.

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

<table>
<tbody>
<tr>
<td>столбец1</td>
<td>столбец2</td>
<td>столбец3</td>
</tr>
</tbody>

</table>

При добавлении кода, картинки будут располагаться в ряд по горизонтали, по 3 шт. Но, вы можете изменить их количество на своё усмотрение. Например, вам нужно разместить 4 картинки в ряд. Добавьте в код строчку <td>столбец4</td>. Не забудьте изменить порядковый номер.

В итоге, у вас получится:

<table>
<tbody>
<tr>
<td>столбец1</td>
<td>столбец2</td>
<td>столбец3</td>
<td>столбец4</td>
</tr>
</tbody>

</table>

Если требуется разместить 2 картинки, то из кода нужно убрать строчку с номером 3.
Думаю, что это понятно.

Как добавить код и разместить галерею?

Допустим, вы написали текст и ниже хотите добавить несколько картинок.
Открываем HTML (на рис.1), вставляем код (рис.2), нажимаем Создать (рис 3).

Вставляем в отмеченные поля картинки, подгоняем по размеру, стираем надписи кода.

Если нужно добавить картинки в несколько рядов, то добавляем код снова столько раз, сколько вам необходимо. Удаляем действующие ссылки с изображений. Так же, можно добавить свои ссылки на каждую картинку. Не забываем проставлять галочку напротив функции Открыть в новом окне.

Важно! Загружаемые в галерею картинки должны быть одинакового размера. Заранее об этом позаботьтесь.

Вот и всё. Галерея картинок готова. Кстати, главная страница моего блога с разделами статей сделана с помощью такого же кода и создана по принципу галереи.

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