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

Как правильно называть картинки на вашем сайте | 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 рублей.

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

Комментарии (41)

  • Ваааа-аа-аря (тут представь, что я делаю глаза как у котика в «Шреке»), значит ли это, что теперь мне надо исправить все-все-все картинки за всё время существования блога? Восхищаюсь и паникую одновременно. Восхищаюсь тобой, что ты разобралась во всем этом и так просто и понятно все описала. А паникую, потому что я использую нижние подчеркивания, пишу названия на английском, а не транслитом, и почти никогда не обращаю внимания на title… грусть-печаль! Alt я, слава блогу, прописываю. Но всё остальное… эх, пошла вписывать в план на март большой рефакторинг картинок))

    • Аня, я понимаю, что это много работы. Тут менять или нет все картинки в блоге, решать тебе. Я для себя поняла следующее, в hometocome.com я не стала менять все предыдущие посты, потому что слишком много. НО… я постаралась навести порядок во всех тех постах, которые колонные и которые по статистике популярные. Я навела порядок в сезонных постах (например, в начале декабря я зашла во все старые новогодние посты и как следует их перешурудила, исправила картинки, добавила внутреннюю перелинковку и т.д.). В общем, я бы порекомендовала тебе посмотреть на топ посты и в первую очередь исправить их, а остальные – по желанию. И без паники!

      • Варя, а я так еще и не разобралась, чем же полезна внутренняя перелинковка? Особенно если свой блог еще совсем новичок. Стоит ли оно того?

        За статью спасибо огромное! Как помню из разговора с тобой и Катей Никитюк, это очень действенный способ привлечь читателей в блог.

        • Алёна, насколько я знаю, внутренняя перелинковка важна для SEO, чтобы твой сайт находился по запросам в поисковых системах. Но там тоже есть свои хитрости (например, текст, с которого ведет ссылка хорошо бы, чтобы включала ключевые слова). В общем, там много тонкостей, я надеюсь, что больше об этом Маша расскажет как раз на Блог Бранче через неделю.

          • У меня тоже возник вопрос о переименовании картинок у уже опубликованных постах. Не плохо ли это для сохраненных копий, поиска? У меня бывает так, что если я редактирую пост, то поисковик продолжает выдавать его старую версию либо перестает находить.

          • Я не переименовывала старые картинки. Лучше посоветоваться с SEO экспертом по такому вопросу.

    • Ань, можно вообще не использовать подчеркивания, сайт ссылку на картинку потом сам дефисы расставит. Т.е. я пишу например ‘London coffee shop’, а он загружает как ‘London-coffee-shop’. Вуаля!

  • Варвара! Как всегда у тебя на сайте (ничего, что на «ты»?) — ценная информация. Чётко и понятно. У меня паники меньше, чем у @anya_dvornikova (:)), ибо пока я загрузила в свой блог не так много фотографий. Но в мозгу начало что-то постукивать: не забыть! Да-да, я помню твой совет слишком не закапываться пока в технических тонкостях, но знать, что они существуют, блогеру нужно.
    Поэтому спасибо, Колумб-от-российского-блогинга, за этот пост!

    • Эльвира, привет! Да, на «ты» как раз очень правильно. :))

      Рада, что эта информация полезная. На самом деле она, вроде, и не сложная, но я долго потихоньку разбиралась, как правильно. Надеюсь, что мой текст поможет. :))

      Да, я, правда, сторонница не закапываться, иначе можно чокнуться и вообще не начать вести блог. :)) Я за то, чтобы вечером каждого дня спрашивать себя «что сегодня я сделала для своего блога» Если сделана одна какая-то, пусть маленькая, вещь, по супер, можно спать спокойно. 🙂 И так потихоньку очень многое можно поменять. 🙂

  • Варя! Привет! Почему-то мне не пришло уведомление про твой новый пост в Вордпресс:(( Хотя я бы не успела на Блог Бранч, потому что в командировке мы всей семьей в Сочи! Так что пойду поинтересуюсь видео трансляцией…

    А вопрос у меня очень глупый, наверное, что такое Pinterest? И зачем он нужен? только не смейся:)

    И вот, кстати, про рассылку давно хочу поинтересоваться. Чем она отличается от просто подписки, в чем ее преимущества?? Я на твою рассылку подписалась! Спасибо за подарочный вебинар, жду первой порции рассылки!

    • Настя, Pinterest – это социальная сеть, визуальная. Я в блоге «Дом, в который хочется приходить» писала как-то про нее http://www.hometocome.com/2014/03/how-to-be-creative-with-pinterest.html В Штатах она очень сильно развита и используется активно для продвижения. У нас скорее используется для хранения интересных ссылок в визуальном формате.

      Про рассылки – это очень большой вопрос. В целом, просто обновления – это зависимость от блога, т.е. читателям будет рассыпаться только то, что ты в блоге напишешь. Но не всегда это актуально. Рассылка по адресам, это как письма, которые ты друзьям высылаешь, только таких адресов и друзей у тебя ну очень много. Там ты можешь сообщать гораздо больше, чем просто в блоге, писать что-то эксклюзивное, дарить, например, подарки. Это возможность продавать через рассылку. В общем, это очень классный инструмент, которым обязательно нужно пользоваться. Я вот сейчас активно его изучаю.

  • И снова привет! Попробовала в редакторе html на вордпресс пометь атрибут alt с номера имдж на нормальный текст, картинка перестала отображаться в посте. Пробовала написать этот атрибут в соответствующем пункте прямо в каталоге картинок блога. Вроде все сохраняется, только я не поняла, про «когда наводишь мышкой на картинку, появиться этот текст». У меня по прежнему ни чего не появляется. Или это только про атрибут title?
    И самое главное! Я правильно поняла, что картинку нужно нормально назвать ещё до того, как загрузишь в каталог блога? Потому что в каталоге у меня такой опции как поменять название с имдж на что-то другое нет.

    Надеюсь, понятно объяснила.

    P.S.- купила билет на Бранч! Жду с нетерпением;)

    • Урааа! До встречи на Бранче.

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

    • Ура! Да, вроде несложная тема, но попробуй найти нормально сформулированную информацию для девичьих блогов – не так-то просто.

      • Согласна. Я очень ценю такую информацию, где все разложено по полочкам для чайников. А то я всякую ерунду писала. Спасибо, что делитесь)
        Мне очень понравился ваш вебинар «Запланируй год успеха». Воодушевили и замотивировали!

  • У меня вопрос по подписям к картинкам. Я прочла твой пост в startblogup, но не совсем поняла, где я должна подписывать латиницей и через дефис. И как это делать правильно с такими словами, как, например, слово «правильный». Можно написать pravilniy а можно pravilny. Т.е. есть ли место, где это смотреть или надо самим транскрипцию составлять? Щас пришлю фото, как я подписываю.
    И ещё вопрос по фотографиям с flickr. Если мне нужно указывать сслыку на фотографа, то это надо указывать в разделе «подпись»? Но ели у меня эта фотка идёт на миниатюру, то тогда подписи не будет видно. или достаточно просписать это в alt и title,?

    • Марина, латиницей и через дефис нужно назвать файлы картинок. То есть ты это изначально делаешь ещё на компьютере у себя перед тем, как заливать файлы в библиотеку картинок на сайт к себе. Для того, чтобы перевести слово в транслит можно воспользоваться сервисами транслита. Например, я пользовалась http://translit.net, но потом я научилась сама писать транслитом и не пользуюсь уже дополнительными сайтами и подсказками.

      По поводу подписи фотографий нет каких-то правил, но я думаю, что если у тебя фотография маленькая и нет возможности сделать подпись непосредственно под ней, то можно в конце текста поста написать «В посте использовались фотографии ХХХ» и дать ссылку. Я не стала бы прописывать источник в alt и title, потому что они не дают тебе возможность дать ссылку на автора.

    • Марина, латиницей и через дефис нужно назвать файлы картинок. Это изначально нужно сделать ещё на компьютере у себя перед тем, как заливать файлы в библиотеку картинок на сайт к себе. Для того, чтобы перевести слово в транслит можно воспользоваться сервисами транслита. Например, я пользовалась http://translit.net, но потом я научилась сама писать транслитом и не пользуюсь уже дополнительными сайтами и подсказками.

      Окошко «Заголовок» у тебя на картинке – это и есть title, там уже можно и нужно писать текст кириллицей.

      По поводу подписи фотографий нет каких-то правил, но я думаю, что если у тебя фотография маленькая и нет возможности сделать подпись непосредственно под ней, то можно в конце текста поста написать «В посте использовались фотографии ХХХ» и дать ссылку. Я не стала бы прописывать источник в alt и title, потому что они не дают тебе возможность дать ссылку на автора.

  • Как жаль, что не знала об этом раньше!
    Спасибо за полезную информацию, уже исправила)

  • Варя, спасибо, как раз думала как же в вордпрессе картинки назвать правильно)
    Вопрос: в подписи и описании что писать?

  • До чего же вовремя нашла эту статью! Как раз задавалась вопросом, как и зачем называть картинки. А то «слышала звон», что это нужно и помогает продвижению, а разобраться что да как всё руки не доходили. Особенно убедили слова о слабовидящих.
    И спасибо большое за вебинар по подписке! Столько практического, что вот прям бери и делай.
    Так что беру и делаю)

    • Ура! Меня тоже слабовидящие убедили. 🙂 И я тоже всё знала-знала, что как-то там нужно это правильно делать, в итоге села, разобралась раз и навсегда уже, ну и пост написала заодно. 🙂

      За вебинар по подписке, пожалуйста. 🙂

  • Варвара, спасибо за статью. Только возник вопрос — и сразу получен ответ! Всего хорошего Вам!

  • Здравствуйте, Варвара!
    Когда-то я просмотрел рекомендации инженера Google, в котором Мэтт Каттс советовал называть изображения с использованием дефиза, а не нижнего подчёркивания. С 2008 года я всегда использовал нижнее подчёркивание, и потому решил последовать совету специалиста.
    В итоге сейчас у меня файл изображения получает ссылку вида: /uploads/2017/06/nameofsomepicture.jpg
    Дефизы пропали. А если выложу изображение с нижним подчёркиванием, то после публикации поста нижнее подчёркивание не исчезает.
    Открыл свойства картинки на вашем блоге — у вас всё в порядке, дефизы в названии сохраняются.
    Не подскажете в чём может быть дело?

  • Спасибо за статью. Конечно пришлось повозиться с переименование, но оно того стоило. Есть описания и при просмотре фотографий вместо 0098 и тд прекрасные названия на русском ) Можете зайти и полюбоваться ) viktorkanon.ru

  • Здравствуйте, Варвара!
    Пару лет назад я участвовала в вашем курсе по блоггингу, и он мне очень помог сориентироваться в теме. Некоторые вещи были особенно полезны, например, оформление картинок в блог, чтобы его находила поисковая система. Я выучила эту статью наизусть))
    Это очень хорошо работало до недавнего времени, а несколько месяцев назад пошло вниз, и теперь ко мне из яндекса никто не приходит. Значит ли это, что что-то изменилось в алгоритмах Яндекса? И, в связи с этим, нет ли у вас информации на тему, как в новых условиях оформлять фото, чтобы поисковые системы их видели?
    Спасибо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *