Как правильно называть картинки на вашем сайте

Как правильно называть картинки на вашем сайте | StartBlogUp.com

“Я так рада, что нашла Вас. Искала картинки как покрывать печенья глазурью, наткнулась на Ваш блог и не могу оторваться, перечитала уже пол-архива”.

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

До этого все мои картинки назывались примерно так: «IMG_0345.jpg». Тут я стыдливо прячу взгляд в пол.

Свой «пинок» я получила на конференции Wordcamp, где попала на доклад Анны Ладошкиной о сайтах для слабовидящих. Я слушала вполуха, пока не услышала, что в России до 10 миллионов человек испытывают проблемы со зрением. Для таких людей сайты читают специальные программы и, в том числе, они читают картинки. Получается, что у меня они прочитали бы что-то вроде «IMG_0345.jpg».

Если сделать сайт более usefriendly для слабовидящего человека, то это поможет улучшить пользовательский опыт от вашего сайта в целом. Не буду пересказывать все выступление Анны, если вам интересно, его полностью можно посмотреть на сайте Wordcamp.tv.

Итак, я засела за гугл и учебники блоггинга и достаточно быстро разобралась с тем, как правильно называть картинки. Как всегда, всё оказалось гораздо легче, чем казалось.

Если вы ещё этого не делаете, то делюсь с вами, как это делать как следует.

Зачем называть ваши картинки правильно

  • Система для поиска в ваших архивах. Вам самим будет легче ориентироваться в ваших архивах и библиотеках картинок, если все они будут названы единообразно.
  • SEO или поисковая оптимизация. По ключевым запросам поисковик будет выдавать ваши картинки в поиске и к вам придут люди не только по поисковым запросам, но и по поиску по картинкам.
  • Использование сайта слабовидящими или слепыми людьми.
  • Корректное отображение картинок. Если возникли технические сложности и сайт не показывает картинки, то пользователь вместо них увидит описания того, что на них изображено.
  • Красивые подписи под нашими картинками на Pinterest!

Как правильно называть картинки на вашем сайте | StartBlogUp.com

Этап первый. Правильно назвать файл с картинкой

  • Используйте систему – называйте картинки однообразно. Это не будет влиять на SEO, но вам это поможет навести порядок в файлах.
  • Используйте транслит (если хотите, чтобы ваши картинки искались по запросу на русские слова) и ключевые слова (например, moj-sposob-vedeniya-ezhednevnika).
  • Используйте только дефисы в качестве разделителя. Не используйте нижние подчеркивания! Дефисы разделяют слова — логическое разделение, подчеркивания работают просто как визуальное отделение. Нижнее подчеркивание поисковики “не видят”, поэтому использовать их неэффективно. Подробнее о том, почему именно так, в видеокомментарии от Google (язык: английский).
  • Можете добавить название своего блога, чтобы обозначить, что картинка с вашего сайта.
  • Если у вас несколько картинок с одинаковыми названиями, используйте порядковые номера. В таком случае, ставьте двузначные номера для картинок (например, -01, -02).

Финально файл, будет выглядеть следующим образом:
moj-sposob-vedeniya-ezhednevnika-hometocome-03.jpg

Этап второй. Прописать атрибуты title и alt

Атрибут TITLE: Атрибут title входит в язык html. Данное описание будет показываться пользователю сайта при наведении на картинку курсором. Данный атрибут не участвует в продвижении сайта, но он позволяет увеличивать поведенческий фактор, который также влияет на позицию сайта в поисковой системе. Пишется оно так title=“Описание картинки с использованием ключевых слов”. И вот тут как раз можно и нужно использовать кириллицу. Именно то, что написано в этом атрибуте будет показано в описании картинке на Pinterest, если ее кто-то запинит.

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

Атрибут ALT: Атрибут alt также входит в язык html. Назначение его заключается в описании какого-то объекта с целью дать дополнительную информацию об объекте (в нашем случае картинки). Пишется оно так alt=“Описание картинки с использованием ключевых слов”. Тут тоже используйте кириллицу.

Атрибут ALT и TITLE могут быть одинаковыми. Я их почти всегда оставляю одинаковыми.

В WordPress прописание этих атрибутов предусмотрено редактором. Это, кстати, очень удобно и еще один плюс в копилку WordPress.

Как правильно называть картинки на вашем сайте в вордпресс | StartBlogUp.com

В Blogger вам нужно в формате редакции поста нажать на картинку и выбрать “Свойства”.

Как правильно называть картинки на вашем сайте на blogspot | StartBlogUp.com

Блог “Дом, в который хочется приходить” у меня сделан на другой платформе, поэтому там мне приходится прописывать эти атрибуты в html коде поста (но это не сложно, просто занимает больше времени).

Как правильно называть картинки на вашем сайте в коде html | StartBlogUp.com

Финально код картинки выглядит следующим образом:
alt=“Мой способ ведения ежедневника | Блог Дом, в который хочется приходить”
title=“Мой способ ведения ежедневника | Блог Дом, в который хочется приходить”

Всё не так сложно, как кажется на первый взгляд. Если разобраться, то вы улучшите пользовательский опыт на вашем сайте и ваш блог будут находить новые читатели.

Хотите узнать больше о том, как работают поисковые системы, и что делать для того, чтобы ваш блог выпадал в топе по поисковым запросам ваших читателей?

У вас есть возможность получить видеозапись Блог Бранча «SEO без бороды. О поисковой оптимизации для девочек от девочки». Мария Кошенкова, автор женского портала NameWoman.ru понятно и просто расскажет нам о том, как работают алгоритмы поисковиков, как правильно подбирать ключевые слова для вашего сайта и как их использовать.

Стоимость видеозаписи (2 часа) – 500 рублей.

Посмотреть фрагмент видеозаписи