Привет всем читателям блога ООО «Текстум Винница»! Выбор темы на сегодня – визуальная составляющая статей, а именно: инфографика и картинки. Впереди вас ждет: обзор 3-х программ для создания простой и интерактивной инфографики, список сайтов, на которых можно раздобыть качественные изображения, полезная информация об alt и title картинок, и это еще не все. Как всегда между основными блюдами-разделами, десерт от нашей команды — юмор, полезные наработки и примеры из практики «Текстум Винница». Интересно? Читайте дальше!
Согласитесь, голый текст без картинок, даже супер содержательный и полезный, вряд ли привлечет внимание посетителей к вашему сайту. Это как при выборе конфет: взгляд непременно останавливается на пестрых и оригинальных фантиках, развернув которые, мы переходим к самому сладкому – внутреннему содержанию.
Так и яркие изображения в тексте манят открыть, прочитать статью, помогают не заскучать читателю при изучении объемного материала. И это еще не вся польза картинок и инфографики в статьях. Но давайте по порядку.
Инфографика: что это и зачем она нужна?
Часто пользуюсь инфографикой в своих статьях, но никогда не задумывалась о происхождении этого слова. Оказывается, произошло оно от латинского informatio – разъяснение.
Вкратце инфографика означает графический способ подачи информации с помощью блоков (разнообразных фигур ★, картинок ☯, стрелочек ➔, линий ⬤и прочего).
Она помогает быстро и максимально четко донести до читателя нужную информацию. Например, кратко и наглядно отразить преимущества компании, выделить особенности предлагаемого продукта или услуги.
Статья в тему: Продающий текст «О компании»: рекламные модели, структура и примеры.
Чтобы вы сразу поняли, что инфографику стоит применять в статьях, приведу пример:
Статья о магазине (много текста, нет инфографики)
Статья на главную от команды «Текстум Винница»
Результат, как говорится, на лицо. Первый вариант, если продолжить наше кондитерское сравнение, то такая конфетка ни внешне, ни по содержанию не придется по вкусу посетителям сайта и поисковикам. Второй – выглядит «вкусно», читается просто, хочется стать клиентом подобного интернет-магазина☺.
Итак, делаем вывод, зачем нужна инфографика:
- Упрощает подачу информации. Представим, что ваш сайт занимается продажей запчастей для авто. У автовладельцев не всегда есть время и желание разбираться в статьях, усложненными специфическими терминами (типа нажимного или ведомого диска), они хотят зайти на сайт и увидеть, что здесь есть нужный товар, сразу же обратить внимание на его комплектацию или преимущества и сделать заказ. Здесь на помощь придет инфографика, которая даже самый сложный материал разложит по полочкам.
- Визуализирует данные. Доказано, что лучше всего человек воспринимает и запоминает именно материал в картинках. Правильно расположенные данные, цвета инфографики, отвечающие оформлению веб-странички, помогут потенциальному заказчику надолго оставить в памяти ваш сайт и при необходимости возвращаться снова и снова (а также рекомендовать друзьям).
- Улучшает читабельность статьи. Допустим, у вашей компании множество преимуществ и вы хотите их все вписать в статью, но согласитесь, что огромное и безликое полотно с хвалебными одами компании не впечатлит потенциального клиента. Другое дело – краткие выжимки из этой информации, поданные на блюдечке в виде красивой инфографики.
- Оптимизировать сайт. Не секрет, что поисковикам Google и Яндекс нравятся полезные и соответственно оформленные статьи. Они скорее выведут в ТОП сайт с иллюстрированным и экспертным материалом, чем ресурс с безликими, мало информативными статьями, которые мало кто читает.
Надеюсь, убедила вас не пренебрегать использованием инфографики при написании и размещении статей на сайте.
Виды инфографики
Блоги, информационные и коммерческие сайты – везде инфографика в почете и ей найдется место. А все потому, что образы и ассоциации более запоминающиеся, чем обыкновенный текст без украшений.
Давайте кратенько пробежимся по наиболее распространенным видам инфографики:
- Статичная. Помогает отображать цифры и факты. К этому виду инфографики относятся диаграммы, графики. Например, как влияет потребление витаминов на здоровье человека.
- Отображающая процесс. Цепочка действий, последовательность – все это относится к этой инфографике. Например, описание этапов становления компании.
- Инфографика-инструкция. Здесь все просто. Это краткое пояснение к работе устройств или, к примеру, пояснение как установить нужное приложение на компьютер.
- Динамичная. Показывает динамику развития. Например, если отобразить, сколько инвестиций потребует проект на различных этапах выполнения.
- Для презентации. Лучше всего продемонстрировать все качества нового продукта или услуги помогает инфографика-презентация, которая все больше вытесняет просто иллюстрации или текст.
Относительно новое направление – видео-инфографика. Представляет собой те же блоки, графики с надписями только в видео формате. Ее можно дополнить голосовыми пояснениями или просто пустить инфографику и музыкальный ряд.
Какой вид выбрать для своего сайта? Решайте сами, я же предлагаю рассмотреть методы, как можно сделать инфографику, не прибегая к помощи профессиональных дизайнеров.
4 простых способа, как создать инфографику
Графическое изображение делается просто и даже, если вы не дизайнер, а как я копирайтер, это будет вполне по силам. Нужно только выбрать для себя, какой способ лучшего всего получается или использовать все предложенные варианты по очереди.
Создаем инфографику в Word
Предлагаю пошаговую инструкцию как это сделать, уверена, даже у новичков все получится:
- Открываем чистый лист в Word.
- Находим вверху страницы вставку и выбираем фигуры или SmartArt.
Начнем с самого простого варианты — выбираем почти готовую к использованию инфографику в разделе SmartArt. Заходим сюда и смотрим образцы:
Кликаем на понравившийся вариант и вставляем его в Ворд (допустим №1).
Теперь все дело в вашей фантазии и креативной жилке, а также не забываем о читабельности и полезности текста в блоках инфографики. Переходим к разделу работа с рисунком SmartArt:
Что можно сделать со всеми или отдельными составляющими инфографики:
Изменить форму блоков
|
Можно выбрать другой макет из предложенных или нажать на отдельную часть инфографики, кликнуть правой кнопкой мыши по ней, затем в появившемся меню выбрать Изменить фигуру. Здесь есть стрелки, блок-схемы, звезды, ленты, выноски. |
Поменять цвета
|
Выбрать вверху страницы изменить цвета или, если нужен именно цвет сайта (как его определить обсудим в следующих разделах статьи), перейти в раздел формат, выбрать заливку или контур фигуры, перейти в другие цвета и задать нужные значения красного, зеленого, синего. |
Изменить стили SmartArt
|
Можно сделать фигурки инфографики с контуром или без, выпуклые или плоские или даже трехмерные. Здесь важно не переусердствовать со стилями, лаконичность всегда в тренде. |
Выбрать эффект для фигур
|
Можно добавить к инфографике тень, отражение, свечение, рельеф, повернуть ее в разные стороны. В общем, все что угодно вашей душе или заказчику. |
И, конечно же, работа с текстом внутри инфографики. Возможно те же самые, что при обыкновенном написании в Ворд: жирный, курсив, подчеркнутый, изменить цвет, размер, шрифт.
Немного вернемся назад и вспомним, что кроме объектов SmartArt в Word предусмотрена возможность вставить отдельные фигуры и самостоятельно скомпоновать их. Делается это через знакомую уже нам вставку – фигуры.
Далее все просто: выбираем подходящие нам стрелки, блоки и прочее, располагаем их на листе и делаем с ними тоже самое, что с объектами SmartArt.
Пример, что может получиться:
На начальных этапах создание инфографики в Word займет 15-20 минут, в дальнейшем вам хватит 5-10 минут. В итоге результат – создание не только экспертной статьи, но и яркого, наглядного материала.
Как создать инфографику онлайн?
При выборе следующих программ я руководствовалась 3 критериями: бесплатно, удобно и разнообразно. Что у меня получилось, узнаем прямо сейчас.
Canva – шаблоны инфографики
Сайт оптимально подойдет тем, кто уже имеет определенную идею как должна выглядеть информация в инфографике и осталось только подобрать для нее форму. В Canva для этого предусмотрено 50 000 шаблонов. Для начала использования сайта нужно зарегистрироваться или войти через аккаунт в Фейсбук или Гугл.
Потом сайт предложит выбрать шаблон исходя из ваших занятий.
После этого вы сможете:
- выбрать подходящий вариант инфографики;
- 2 кликами мышки по тексту из шаблона изменить его на свой вариант;
- поменять шрифт, цвет надписи, размер (вверху панели);
- заменять иллюстрации на собственные картинки, иконки;
- менять фон картинки и другое.
Плюсы этой программы для создания инфографики:
- русскоязычное меню;
- огромный выбор всевозможных шаблонов;
- простота использования;
- можно скачать картинку в хорошем качестве на ПК.
Минусов здесь я не нашла. Удобный и простой онлайн-сервис для создания инфографики. А вы уже пользовались возможностями Canva? Напишите в комментариях под статьей ваши впечатления о нем.
Идем дальше.
Easel. ly – онлайн-сервис для создания инфографики
Напоминает предыдущий сервис, но с более скромным ассортиментом инфографики. Скажем так, иллюстрации менее креативные, много стандартных вариантов.
Вот как этот сайт выглядит.
В Easel. ly также можно создать инфографику в онлайн режиме бесплатно. Для этого опять же потребуется регистрация на сайте. После чего можно переходить к выбору нужного шаблона. Как вариант выбрала вот этот:
Как видите вверху, на специальной панели инструментов, можно выбирать картинки, менять текст, вставлять свои иллюстрации, дополнять их из базы сервиса. В целом Easel. ly довольно простенький сайт, разобраться по силам новичку.
Минусы:
- нет русскоязычной версии;
- PDF формат и картинки в хорошем качестве скачиваются только платно.
Сайт предупреждает, что скачивание доступно в низком качестве. Я протестировала, скачала картинку в Low Quality. Очень неплохой результат получился. Формат jpg, размеры 638х889 пикселей. Вполне можно использовать в работе.
Вот результат
Друзья, как вам такой сервис? Попробуйте и напишите мне в комментариях, интересно узнать ваше мнение.
Думаю, с простенькими сервисами разобрались. Еще как вариант могу еще предложить Pictochart, Инфограф. Там тоже все просто и доступно. Теперь предлагаю перейти к инфографике поинтереснее – интерактивной.
Thinglink: создаем интерактивное изображение
Сервис помогает немного «оживить» картинку. Посетитель сайта видит кружочки на изображении, наводит на них курсор и вуаля – всплывает сообщение (например, можно описать особенности товара, детали конструкции). Интересно? Мне тоже уже не терпится испытать этот сервис.
Начинаем. Заходим на сайт Thinglink и вот что видим.
Для начала сервис попросил зарегистрироваться. Использую для этого свою запасную электронку и прохожу дальше.
Чтобы начать работу, жмем на кнопочку Create в верхнем углу страницы. Потом выбираем откуда именно вы хотите загрузить изображение: с ПК, интернета, Фейсбука или последние фото другого пользователя программы (нужна будет ссылка на его страницу). Я выбрала первый вариант и добавила картинку с ПК.
В графу Title (вверху странички) вписываем название картинки. Затем можно кликать по любому месту на картинке и добавлять нужную надпись.
Чтобы сохранить и добавить следующий кружочек, нажимаем на кнопку Save (синего цвета) внизу странички. Количество интерактивных точек не ограничено, цвет можно выбрать. Сохранить изображение можно, кликнув на зеленую клавишу с правой стороны Save Image.
Затем нажимаем на поделиться и выбираем 1 из 3-х вариантов публикации:
- скопировать код для вставки на свой сайт.
- поделиться в выбранной социальной сети.
- скопировать ссылку на картинку.
Наведите курсор на картинки и посмотрите, что получится)
Нюанс работы в сервисе – часть функций доступна платно (например, добавить ссылку или видео). Бесплатно можно добавлять текстовые комментарии и еще – меню на английском языке, но все настолько просто, что трудностей возникнуть не должно. Попробуйте сами. Мне работа в Thinglink очень понравилась, интерактивные изображения я еще до этого не делала.
И наглядный пример – изображение с сайта компании SokolGlass:
После основных блюд пришла пора переходить к десерту и поделиться наработками команды «Текстум Винница» в вопросах создания и оформления инфографики.
Правила заполнения инфографики (шпаргалка от ООО «Текстум Винница»)
Сначала перечислю те требования, которых мы придерживаемся, создавая графики и блоки для наших статей:
- инфографику нужно создавать в цветах сайта, для которого пишем;
- по возможности в иллюстрациях используем шрифт сайта;
- не стоит применять множество разных фигур (круги, квадраты, ромбы и т.д.);
- не перегружать инфографику обилием цветов (2-3 оттенка достаточно);
- оптимальное количество инфографики для статьи 1-2 шт (смотрим на объем статьи и надобность).
Все эти требования помогают нам создать графические изображения, которые идеально подходят под стиль и оформление сайта, гармонично вписываются в статью, улучшают ее читабельность. Все это в совокупности дает дополнительный трафик сайтам, очень полезная штука для оптимизации вашего ресурса.
Немного отвлечемся.
В предыдущих разделах обещала вам рассказать, как мы определяем цвета сайтов, для которых пишем. Все предельно просто – используем мини-программку под названием ColorPix. Она очень простая, в ней не нужно долго разбираться и на ПК занимает минимум места.
Вот как она выглядит:
Использовать ее достаточно просто:
- запустить на ПК;
- открыть нужный сайт;
- навести курсор на цвет и программа выдаст результат;
- записать цвета и использовать их в инфографике.
Шрифт на сайтах также не проблема определить. Для этих целей нам пригодятся полезные расширения, например, WhatFont или Typ.io. Я пользуюсь первым вариантом. Расширение устанавливается в браузер. Если оно вам понадобится, открываем сайт, нажимаем на кнопку расширения вверху экрана, наводим на нужную надпись и узнаем название шрифта.
Про полезные инструменты для инфографики я вам рассказала, давайте перейдем на другой вариант оформления статьи – картинки. Где их можно взять, как уникализировать и еще много чего дополнительного узнаете из следующих разделов.
Где брать качественные картинки для статей?
С изображениями действуют все те же принципы, что и с инфографикой – без них статья будет смотреться тускло и уныло. Ни повышения уровня посещаемости сайта, ни дополнительный трафик это точно не принесет.
Давайте сначала честно ответим на вопрос: «Откуда берем картинки для статей?». Думаю, большинство ответит – из базы поисковиков Гугл или Яндекс. Это самый простой и доступный вариант, просто забиваем запрос в строку поиска, жмем на картинки и выбираем подходящий вариант.
Но можно не ограничиваться только этим способом и поискать красивые изображения на бесплатных фотостоках в интернете.
Предлагаю несколько вариантов из собственной коллекции:
- OpenPhoto. Никаких регистраций не нужно, просто заходим и выбираем нужную рубрику (или ищем по ключевым словам) и просматриваем изображения, на ПК скачивается бесплатно.
- Stockvault. Здесь хранятся очень красивые картинки, качественные, можно найти шаблоны логотипов, фонов, текстур. Скачивание происходит через кнопочку Free Download. От себя рекомендую именно этот сайт, тут очень большое разнообразие фото на любой вкус.
- Morguefile. Есть поиск фото по словам или рубрикам. Коллекция изображений разнообразна, качество иллюстраций очень хорошее.
Также можно воспользоваться услугами FreePhotoBank или Freemediagoo. На всех сайтах есть один нюанс – англоязычное меню. Меня это не смутило, если не знаете языка, просто выбирайте вручную, листая картинки или воспользуйтесь онлайн-переводчиком. Такие сервисы помогут подобрать красивые картинки, которые в базе поисковиков не встретишь. Как уникализировать выбранные изображения рассмотрим далее.
Программы для редактирования картинок
Итак, полдела сделано – подходящую картинку нашли. Но просто так скачать и вставить ее в статью, значит добавить в свой текст неуникальную часть.
Почему так важна уникальность картинок и как ее проверить, мы уже писали: Чек-лист для проверки текста на «профпригодность»: уникальность, SEO, иллюстрации.
Поэтому от теории сразу перейду к практике, как же уникализировать изображения. Начну с программы для картинок, которую нужно скачать и установить на ПК (пользуюсь ей уже полтора года без нареканий). Она абсолютно бесплатная и называется FastStone Image. Все простенькие действия выполняет на ура.
В FastStone Image можно:
- менять шрифт, размер, насыщенность, контрастность картинок;
- добавлять логотипы, рамочки, надписи;
- вращать изображения, клонировать, ретушевать и прочее.
Уровень пользования программой – легко. Слева выбираете место, где хранится картинка, открываете ее, вверху находится панель инструментов. Меню на русском языке. Скачивайте, устанавливайте и пользуйтесь этой бесплатной программой для картинок.
Также в вопросе редактирования картинок очень выручают онлайн-сервисы. Давайте рассмотрим один из них. Как по мне, очень удобный, не нужно регистрироваться, есть много функций. Речь идет о программе для всевозможных действий с картинками в онлайн-режиме BeFunky. В нем можно редактировать фото, создавать коллажи, выбирать шаблоны и менять цвета, элементы в них. Сразу отмечу – некоторые шаблоны платные, но и бесплатных вариантов великое множество.
Можно, например, выбрать создание коллажей и скомпоновать несколько фото в одно уникальное изображение.
В качестве примера статья «Текстум Винница» на сайте интернет-магазина «Мастер теплиц».
Еще одна достойная онлайн-программа (тоже бесплатная) – Pixlr Editor. Здесь можно редактировать уже имеющееся изображение или создать новый рисунок.
Функционал в Pixlr Editor побогаче и включает в себя возможности:
- менять размер и поворот изображения, отражать его по горизонтали, вертикали;
- накладывать новые слои, дублировать и объединять слои;
- корректировать картинку (цвет, яркость, экспозиция и т.д.);
- применять различные фильтры и делать надписи.
Освоив все или любую из перечисленных программ можно легко уникализировать и отредактировать картинку. Может у вас есть свои удобные сервисы для этого? Поделитесь с нами, жду комментарии под статьей.
Прописываем атрибуты alt и title
Финальные аккорды статьи. Нам осталось рассмотреть 2 важных элемента в изображениях – атрибуты alt и title. Они прописываются при размещении картинок на сайте.
Как вставить изображение в админку описывать не буду, т.к. это уже сделано моей коллегой здесь: Как разместить и ускорить индексацию статьи? 5 секретов успеха.
Остановимся подробнее на том, что часто не делается при размещении картинок на сайте – описание атрибутов alt и title. А зря! Почему? Разберемся вместе. Для начала посмотрим, как выглядит и где находятся атрибуты alt и title:
На нашем сайте (работает на WordPress) это выглядит так:
Вот так выглядят поля параметров, которые вы увидите при загрузке иллюстраций на сайт. Давайте подробнее остановимся на каждом из этих тегов.
Title: правила заполнения
Сразу отмечу, что первый атрибут далеко не обязательная деталь SEO-оптимизации. Он используется, чтобы дать подсказку пользователям насчет содержимого картинки. Если навести курсор на изображение, то перед вами появится содержимое атрибута title.
Хоть поисковики Google и Яндекс не придают ему особого значения, косвенно на продвижение сайта title влияет. Каким образом? Это дополнительное удобство для посетителей веб-странички. Согласитесь, намного комфортнее получать подсказки к картинкам, чем просто долго рассматривать непонятные изображения (например, если это детали авто или технического оборудования).
Чтобы title работал, нужно его правильно заполнить. Вот несколько полезных рекомендаций для этого:
- атрибут должен содержать информацию, соответствующую иллюстрации;
- не стоит слишком расписывать его, 2-3 строки описания явно перебор для одного фото;
- желательно вписать в него ключевое слово;
- он не должен дублировать основной title, заголовки.
Я думаю, если не поисковики, то посетители сайта точно оценят такую кропотливую работу по оформлению странички и дополнительное удобство для них при просмотре изображений. А популярность сайта среди пользователей – ваш дополнительный трафик.
Тег alt для картинок
Здесь уже можно поговорить о поисковом продвижении напрямую, а не через посетителей. Боты охотно индексируют alt и используют его для определения содержимого найденных картинок. Это важно для улучшения релевантности веб-страничек и для привлечения дополнительного трафика из поиска по иллюстрациям.
Очень часто контент-менеджеры, владельцы сайтов забывают или пренебрегают этим источником трафика. Как зачастую выглядят подписи к картинкам? Фото, изображение 1,2 и прочие малоинформативные надписи. Не забывайте, не прописывая alt картинок, вы лишаете свой сайт дополнительного рейтинга, который вполне может помочь SEO-оптимизации и продвинуть страничку вверх по поиску.
Отмечу, что alt в большинстве случаев не виден посетителям. Лицезреть его они могут только, если:
1. В браузере отключено отображение графического контента (редко, но бывает). Пользователи будут наблюдать иконку фото и прописанный alt. Отсюда и его название alternative (альтернатива) – сокращенно alt.
2. Вы просматриваете результаты после поиска по картинкам. В этом случае alt таится в описании фото.
Как прописать атрибут alt к картинкам? Несколько простых правил помогут вам сделать это правильно:
- Описание alt должно по смыслу соответствовать картинке. Если фото и описание разнятся, то кликов из поиска можете не ждать.
- Длина надписи не должна быть меньше 3-4 слов и больше 250 символов с пробелами. Меньше, чем 3 слова сложно описать изображение, более указанных символов – поисковики просто не учтут лишние символы.
- Использовать одно ключевое слово в одном alt, иначе это засчитают как спам. Но в тоже время ключи в атрибуте нужны для продвижения, их можно вписывать как есть или в разбавленном виде (не забываем про читабельность и органичность).
Не стоит добавлять в alt картинок слова: цена, купить, заказать, оформить и подобные. Исключение – если они напрямую относятся к картинке (например, это прайс-лист). Также в alt не нуждаются стрелочки, отдельные кнопочки. Поисковики их все равно не учитывают.
Например, я прописываю alt в статьях так:
А что делать с описанием одного товара, но в разных ракурсах? Оптимальный вариант – использовать одно описание для всех фото или добавить вставку для каждого типа «вид 1» или «вид 2». Если у вас большое количество однотипных товаров (например, джинсовые юбки), то также оставляйте одно описание. Поисковики будут показывать разные фото с сайта, учитывая их уникальность и качество.
И последний момент – alt и title заполняется на том языке, который вы используете на сайте (кириллицу лучше не использовать, чтобы не затруднять читабельность надписи).
Расскажите в комментариях, используете ли вы атрибуты alt и title в своих статьях для веб-страничек? Если вы этого не делали до сих пор, попробуйте прописать теги к картинкам и отпишитесь нам о полученных результатах. Повысилась ли посещаемость ресурса? Продвинулся ли сайт в поиске?
Послесловие
Итак, за сегодня мы выяснили с вами, что качественные и уникальные картинки – необходимый элемент SEO-оптимизации сайта. Они влияют на улучшение читабельности статей, помогают выставить в лучшем свете предлагаемые товары или услуги.
Также не забываем про alt и title картинок. Это отличные помощники в получении дополнительного трафика, они влияют на удобство просмотра изображений при посещении вашего сайта посетителями и по душе роботам-поисковикам.
У вас есть, что добавить к теме? Хотите поделиться собственными фишками в создании инфографики, редактировании картинок? Жду ваши комментарии!
P.S. Команда «Текстум Винница» с удовольствием возьмется за раскрытие интересующей вас темы в наших следующих статьях блога. Пишите, чтобы вы хотели узнать подробнее.
Получить практические навыки написания SEO-статей можно на курсе: «Креативный SEO-копирайтинг»: