Правильная оптимизация картинок

Правильная оптимизация картинок

Правильная оптимизация картинок

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

Оптимизация картинок – зачем и почему.

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

Советы по оптимизации картинок
Сначала вспомним, чему нас учили или чему мы учились сами, осваивая html. Картинки вводятся в веб-страницу тегом image. Внутри него, в атрибут src мы вписываем нужный URL, и порой забываем о других полезных атрибутах этого тега. Каким же должен быть графический тег, чтобы изображение правильно отображалось на странице сайта и помогало его продвижению?

Крайне желательно применять тег такого вида:

<a href=»http://pro321.ru/wp-content/uploads/2012/02/pravilnaya-optimizaciya-kartinok.png»><img title=»pravilnaya-optimizaciya-kartinok» src=»http://pro321.ru/wp-content/uploads/2012/02/pravilnaya-optimizaciya-kartinok-300×228.png» alt=»как правильно оптимизировать картинки на блоге» width=»300″ height=»228″ /></a>

Вникая в детали:

SRC
В атрибут src вписан адрес картинки. Все просто. Но тут есть ряд тонкостей.

Несомненно, вы используете уникальную графику… Нет? Дело ваше. Но это не есть хорошо. Как бы то ни было, сначала оптимизируйте саму картинку.

Во-первых, не грузите на хостинг огромных фотографий. Это утяжеляет сайт и засоряет сервер. Измените размер и сократите вес, после чего сохраните картинку в формате, удобном для читателей и для роботов, лучше всего .jpeg или .png.

Другие графические форматы могут не попадать в результаты поиска. Сохраняйте файл со значимым названием. Помимо того, что читабельное имя картинки подскажет поисковику, что на ней изображено, всегда удобнее иметь файл с именем nazvanie-kartinki.jpeg, а не %B8%V0%BA%BE%D0%.jpeg или 111.jpeg. Используйте имя файла, как еще одну возможность прописать ключевую фразу, под которую оптимизируется страница.

ALT
Следующий по важности атрибут alt, его задача — подменять собой картинку так, чтобы пользователи с отключенной в браузере графикой понимали, что изображено. Именно в это поле введите краткое описание изображения. Алгоритмы поисковых роботов учитывают этот атрибут при ранжировании сайта, а при использовании рисунка в качестве ссылки, текст из поля alt становится ее анкором. Не ленитесь прописывать в alt ключевую фразу. Однако, если изображений на странице много, то сильно увлекаться не стоит. При отключенных картинках браузера, забор ключевых фраз скроет от читателя искомый текст.
Отдельно отметим, что оптимизация атрибута alt и имени графического файла дает заметный положительный эффект в специальных сервисах поиска по картинкам.

TITLE
Атрибут title содержит текст, который видит пользователь, наводя курсор на картинку. В этом поле полезно прописать ключевую фразу, возможно, частично повторив текст из alt

Размеры изображения
Высота и ширина графических элементов задаются атрибутами height и widht. Они удобны, если размер картинки на сервере отличается от того, что диктует дизайн страницы. Заведите за правило ставить размеры в пикселях. Вам все равно, а браузеру удобно.

Давайте посмотрим, где прописываются все эти атрибуты, смотрим картинку ниже:

Правильная оптимизация картинок

Где в wordpress происходит оптимизация картинок?

И напоследок про надписи на картинке.
Могут быть любыми и на оптимизацию не влияют. Многие считают, что нанося на картинки адрес сайта, они защищают их от воровства. Если вам так спокойнее, используйте эту опцию.

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

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

Жду ваших комментариев, опишите, как вы оптимизируйте картинки? Чем пользовались из этих пунктов, а чем еще нет.

Полезна ли вам оказалась статья?

Если эта публикация оказалась Вам полезной, поделитесь ею со своими друзьями!
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
  • Правильная оптимизация картинок
Понравилась публикация !? Хотите получать новые прямо в свой почтовый ящик ? Нет ничего проще !

23.02.2012 · Виктория Смирнова · 52 комментария (-ев)
Метки:  · Рубрики: Seo новичкам

52 комментария (-ев)

  1. Надежда - 23.02.2012

    Про оптимизацию все хорошо написано. Мне кажется, надо еще добавить «target=_blank», чтобы открывалось в новом окне

  2. Любовь - 23.02.2012

    Спасибо, Вита, за полезную информацию!Узнола новое.

  3. Зоя - 23.02.2012

    Статья очень полезна, так как до этого я не заполняла некоторые поля, потому что в разных источниках были разные толкования.Спасибо — начинаю въежать по полной. :yahoo:

  4. Виктория Смирнова - 23.02.2012

    А я никогда не добавляю в картинки этот атрибут. Не понимаю зачем он нужен. При нажатии на картинку, благодаря прописанному в галерее на блоге адресу, картинка и так открывается в новом окне. Побродив по блогам я увидела, что некоторые убирают путь на картинку, тогда картинка отображается, но не кликабельна. Вот по этому поводу, я не нашла пока достоверной информации. Правильно ли это? Будем искать ;-)

  5. Люба - 23.02.2012

    Виктория, спасибо, за очень быстрое реагирование на наши проблемы. Я нашла почти все ответы, которые я задала в комменте к правильности написания статей (я сама случайно и удалила их в VK). Я не учила нигде HTML и анг. яз., поэтому трудновато с ними. И, если можно, пару вопросов.Обязательно-ли сначала загружать фото в галерею или можно прямо из компюьтера? И какой максимальный размер фото должен быть без вреда для сайта?

  6. Виктория Смирнова - 23.02.2012

    Спасибо за отзыв Любовь. Отвечаю на вопросы: 1. Я загружаю сразу с компьютера на блог. 2. Вес картинки должен быть не велик. Так как это влияет на скорость загрузки страницы. Пожалейте своих посетителей. Не у всех высокоскоростной интернет. Я думаю максимальный размер 100 кб, не более. Если картинка большая, уменьшите ее с помощью программ. Их много. Самый простой способ в Paint.net или в диспетчере изображений от майкрософт, что находится в офисном пакете на любом компьютере.

  7. Люба - 23.02.2012

    Я поняла, СПАСИБО. А я же делаю их минимум 500, чтобы лучше можно было рассмотреть блюда и это важно очень в кулинарных рецептах. Но вот видела на других сайтах, что при просмотре в ленте они маленькие, а при нажатии — увеличиваются. Может быть знаете, что это за программа? А фото я уменьшаю сразу в вордпрессе, там по % можно это делать, но страдает немного качество, которого я достигаю в пикнике после своей мыльницы.
    Да, я хочу сказать огромное спасибо за Ваш сайт :good: , как-то мне намного проще, чем на аналогичных мужских :mail:

  8. Виктория Смирнова - 24.02.2012

    Спасибо еще раз! Стараюсь писать как раз для новичков ;-) Собираю потихоньку обо всем полезном и нужном! Насчет увеличивания картинок, скорее всего это плагин. Задайте в поисковик вот такой запрос — «плагин wordpress увеличение картинок при наведении» и подберите нужный! Удачного поиска!

  9. Люба - 24.02.2012

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

  10. Виктория Смирнова - 24.02.2012

    У меня есть обратная связь на блоге. Давайте общаться через нее :-) Чем смогу, помогу.

  11. Люба - 24.02.2012

    Спасибо, Виктория. Я обещаю не очень надоедать. :yes:

  12. Виктория - 24.02.2012

    Вика, мне очень понравилось как ты изложила материал.На самом деле совершенно зря некоторые блоггеры не уделяют внимание оптимизации изображений.Можно получить дополнительный трафик на блог.Хоть и небольшой ,но все таки.Что касается Подписи, то заполнять этот пункт нужно только в том случае, если нужно подписать картинку.Это видимая часть .Поэтому насчет совпадения с title не совсем согласна.А что касается description-его практически никогда для картинок не заполняют.Бесполезно.8-)

  13. Наталья - 24.02.2012

    Согласна ,что очень важно правильно оптимизировать картинки,так как 25-30% трафика приходит именно с картинок.

  14. Лилия - 24.02.2012

    Виктория, мне тоже нравится твой сайт, тем, что он для новичков. Но с html кодами…здесь я солидарна с Любовь Кутыч-Ларченко…было бы здорово, ели бы ты более подробно «разбила». Например так: заходим во вкладку такую-то — скрин, находим там там вот такой код — скрин, вписываем туда то-то — скрин, удаляем такую-то надпись — скрин и.т.п. Так было бы понятнее для тех, кто, как я , не понимает ничего в html кодах и даже не знает, из какой вкладки туда заглянуть. Да еще и думает при этом, а вдруг впишу что-то не то…Как потом исправить….Спасибо за статью. Мне она полезна. А если расшифруешь, буду благодарна ;-)

  15. Евгений - 25.02.2012

    Виктория, к сожалению очень многие не знают html и никогда не учили английский, поэтому очень хороший и понятный материал в чем-то все равно остается не понятен. Поэтому было бы конечно неплохо получить опубликованный материал в том виде о котором говорит Лилия. Конечно языки программирования нужно изучать, но не всегда это удается сделать быстро. А за статью спасибо. У меня сайт молодой и изображения никогда не оптимизировал. Теперь буду.

  16. Виктория Смирнова - 26.02.2012

    Хорошо, уговорили :-) Следующая статья о том, как загружать картинки. Мне казалось это элементарно! Не нужно знать html язык, чтобы оптимизировать картинки!

  17. Люба - 26.02.2012

    Виктория, добрый вечер. Я хочу объяснить.Я, например, научилась загружать картинки быстро. Как раз то окно загрузки на русском. Но вот, что написано в основном окне в строке англ. буквами над основным текстом не понимаю…хоть со словарём сиди и переводи каждую клеточку. И так в позиции «визуально», и так же в позиции «HTML». Но это я понимаю, потому что сам вордпресс английский и это наша проблема. В общем, если поможете, мы будем вам очень и очень благодарны. :rose: :good:

  18. Люба - 26.02.2012

    Виктория, огромное Вам «блогеровское» и просто человеческое спасибо за эту статью. Докладываю. Вчера я в 10 своих рецептах провела с фото работу согласно Вашим рекомендациям.Результат: сегодня, проверив 3 рецепта в поиске гугла, они все на первой странице. Такого ещё у меня за 3 месяца работы не было. :yahoo: :rose: :rose: :rose:

  19. Виктория Смирнова - 26.02.2012

    Поздравляю Любовь! Так держать! :-)

  20. Ирина - 26.02.2012

    Получается мое использование Радикала — большая ошибка?! Но у меня что-то случилось с галереей — не просматриваются загруженные на нее картинки! Не знаю как исправить, вот и пользуюсь пока радикалом.

  21. Виктория Смирнова - 26.02.2012

    Конечно Ирина! Молодой сайт, у которого нулевой ТИЦ и PR не должен иметь открытый внешних ссылок. Чем больше от вас внешних ссылок, тем слабее сайт. Перезагружайте все фото. Разбирайтесь со своей галереей!

  22. Виктория Смирнова - 26.02.2012

    Ирина, так как ваш блог еще молодой, и поэтому не должен иметь открытых внешних ссылок! Через эти ссылки утекает вес вашего сайта. Вы должны использовать только загруженные на сайт картинки.

  23. Ирина - 26.02.2012

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

  24. Виктория Смирнова - 26.02.2012

    Да, ссылки которые с радикала. Никакие открытые ссылки с молодого блога не допустимы! Закрывайте их атрибутом rel=»nofollow»

  25. Люба - 26.02.2012

    Виктория, спасибо за информацию, что ссылок не должно быть. Я их тоже вместе с чисткой фото убираю из текста. А что такое радикал…:scratch:

  26. Виктория Смирнова - 27.02.2012

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

  27. Люба - 27.02.2012

    Понятно…я чувствую, что слово знакомое, но не пользовалась никогда. Спасибо за ответ, Виктория.

  28. Алексей - 21.03.2012

    В принципе все что было описано в этой статье я уже знаю, но все равно благодарю автора за пост. Ведь как говорится: «Повторение мать учения» :mail:

  29. Светлана - 26.03.2012

    Виктория, подскажите, пожалуйста! А обязательно в Title название файла писать английскими буквами. Я люблю всё по русски писать :-)

  30. Виктория Смирнова - 26.03.2012

    А роботы любят латиницу, потому что они ее понимают))) А РУССКИЙ НЕТ! РУССКИЕ БУКВЫ ПРЕОБРАЗОВЫВАЮТСЯ В КУЧУ СПЕЦ СИМВОЛОВ!

  31. Светлана - 27.03.2012

    Эх, опять всё переделывать! :-)

  32. Светлана - 04.04.2012

    Виктория, на каком-то сайте упоминали про сервис tineye.com. Можете пояснить, что в нем в какой последовательности нажимать. Я загрузила фото, он выдал много картинок с адресами, где это фото уже есть. А потом что надо делать: быстро нажимать на кнопочку «переклю» ?

  33. Виктория Смирнова - 06.04.2012

    Светлана, этот сервис помогает определить уникальность картинки.Ценится только уникальная картинка. Там ничего переключать не нужно. Просто с изображением надо поработать. Например повернуть его зеркально в какой нибудь программе. Например в Paint Net. И тогда ваша картинка будет уникальной.

  34. Светлана - 06.04.2012

    Спасибо, Виктория! Я то подумала, что этот сервис сам может преобразовывать картинки, он же предлагает сравнить изображения… :-)

  35. Виктория Смирнова - 06.04.2012

    Светлана, вы выходите прямо на сервис? Или у вас расширение в Гугл Хроме? tineye.com есть расширение, с ним очень удобно работать. Я покажу как в ближайших статьях!

  36. Светлана - 06.04.2012

    Виктория, у меня расширение.

  37. Анатолий - 08.08.2012

    Виктория, а если картинок в одной статье 50 штук и включив в каждую из 50 картинок ключевое слово, не получится ли переоптимизации статьи? Неделю назад переделал много статей (около 60) по Вашим рекомендациям и в результате индексация Гуглом упала.

  38. Виктория Смирнова - 08.08.2012

    Любое изменение на сайте дает такую реакцию. Все восстановится, как правило недели через две, три. Каждая ваша картинка должна быть оптимизирована под конкретное ключевое слово в статье. И относиться к статье, а не к сайту. Тогда никакой переоптимизации не будет!

  39. Анатолий - 08.08.2012

    Вика, спасибо за ответ. Означает ли это, что я должен продолжать оптимизировать каждую из картинок или достаточно прописать только одну? Но тогда оставшиеся 49 останутся не оптимизированными. Меня волнует перебор с ключевиками.

  40. Виктория Смирнова - 08.08.2012

    А у вас в каждой статье по 50 картинок?
    Я делаю так, если у меня в статье несколько картинок, то я каждую отдельную картинку оптимизирую под отдельный ключ. Ведь в статье может быть несколько ключей.

  41. Анатолий - 08.08.2012

    А ключи «новый дом 01″ и «новый дом 02″ и т.д. не склеятся поисковиками?

  42. Виктория Смирнова - 08.08.2012

    Анатолий, если ссылки на картинки будут идентичны, то конечно склеются!

  43. Max - 16.08.2012

    Классно еще один способ привлекать на сайт аудиторию, спасибо за статью.

  44. Тарас - 20.08.2012

    Привет,я только недавно начал заниматься блогосторением,и мне понравился дизайн ваших комментариев, как оформить дизайн комментариев как у Вас?)Ото у меня все сикась на кось)

  45. Виктория Смирнова - 20.08.2012

    Тарас, оформление комментариев зависит от шаблона на блоге. Выбирайте разные шаблоны, примеряйте на блог. Оставляйте понравившиеся.

  46. Olga Blik - 10.11.2012

    Спасибо огромное за ваш пост!) Скажите , пожалуйста , если у меня в посте 15 картинок (они все уникальны, так как я сама их делаю) но половина из них не видна при индексировании, что я не так делаю? Может причина в том что Alt Tittle нужно прописывать к каждой картинке свой, отдельный alt и tittle? Или можно их копировать во все 15 картинок? как я и делала до этого? Просто пост на одну тему и 15 фотографий по этому посту, а распознается только 2 ((( Скажите, пожалуйста в чем причина?

  47. Виктория Смирнова - 11.11.2012

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

  48. Olga Blik - 11.11.2012

    Спасибо Виктория за ответ!)

  49. Дмитрий - 30.04.2013

    Здравствуйте! Спасибо за статью. У меня вопрос. Файл загружен в галерею сайта, он представляет собой изображение книги с надписью «скачать». Ссылка на скачивание книги ведёт на яндекс-диск. Вы пишите: «Никаких внешних ссылок на картинки». Как же быть в моём случае? Спасибо.

  50. Виктория Смирнова - 16.05.2013

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

  51. FIL - 04.09.2013

    Можете поподробней порассуждать какая картинка будет считаться уникальной? возможно если знать как это делает поисковик, то станет все ясно…может достаточно заклеймить фото своим водяным знаком и она станет твоей)))) http://remont-trub.by/

  52. Виктория Смирнова - 04.11.2013

    Нет, с водяным знаком она не будет уникальной. Уникализировать можно лишь повернув картинку на несколько градусов, либо развернуть ее зеркально. Поместить на другой фон и так далее.

Написать комментарий