|
Как оптимизировать изображения для поиска
|
|
14.11.2015, 18:31
|
|
#1
|
Регистрация: 29.07.2014
Сообщений: 474
|
Как оптимизировать изображения для поиска
|
Времена изменились со времен коммутируемого интернета, когда пользователям приходилось ждать по несколько минут, пока загрузится одно изображение. Сегодня, мы можем наслаждаться быстрым доступом в сеть даже с мобильных устройств. Но не ошибитесь, оптимизация изображений для пользователей и поисковых систем так же важна, как и раньше, если не больше.
В этой статье мы рассмотрим множество способов оптимизации изображения для поисковых систем.
1. Используйте правильные изображения
Поиск и использование правильного типа изображения для веб-сайта является важным шагом на пути к успеху. Лучше всего начать со старого доброго Flickr.com. Ресурс обладает широким выбором разнообразных фотографий, а также возможностью фильтрации контента по лицензии.
Это означает, что вы легко найдете изображение, которое сможете легально использовать для коммерческих целей или которое не будет иметь ограничений авторского права. (Убедитесь, что вы имеете все необходимые разрешения использовать или изменять изображение в собственных целях).
Другие популярные варианты включают:
• Freeimages: крупное сообщество с более 2500000 зарегистрированных пользователей и около 400 000 фотографий онлайн.
• New Old Stock: винтажные фотографии из архивов учреждений, участвующих в Flickr Commons.
• Public Domain Archive: хранилище высококачественных изображений в общественном доступе со всего интернета.
• Unsplash: десять новых фотографий высокого разрешения каждые 10 дней, бесплатно.
2. Выберите правильный формат файла
После того как вы выбрали нужное изображение, решите, какой формат файла оптимально подойдет под ваши требования. Так как мы в основном используем картинки и относительно сложную «фотореалистичную» графику, мы должны выбрать один из трех часто используемых растровых форматов изображений: GIF, PNG и JPEG.
• JPEG - наиболее распространенный формат изображений. Он сжимает данные без потерь качества; это означает, что, в зависимости от настроек, качество изображения может пострадать незначительно. Также отсутствует поддержка прозрачных фонов, как в форматах GIF и PNG. Самые значительные преимущества использования этого формата заключаются в том, что он позволяет делать небольшой размер файла, и он поддерживается почти везде.
• GIF - это формат растрового изображения, используемый для простых изображений и анимации. Так как он поддерживает только 256 цветов, его не рекомендуется использовать для фотографий или более фотореалистичных изображений. Однако малый размер файлов и поддержка прозрачного фона делают его идеальным для создания логотипов и различных элементов страниц веб-сайтов.
• PNG - это современная альтернатива GIF и JPEG. Он поддерживает прозрачный фон, имеет более широкий цветовой диапазон и функцию автоматической гамма-коррекции. PNG позволяет сохранять даже короткое текстовое описание изображения, чтобы помочь поисковым системам категоризировать его. Этот формат файла является новейшим из всех трех, что означает, что он не всегда поддерживается. Кроме того, размеры файлов могут быть немного больше.
3. Оптимизация изображений для web
Оптимизируя изображения для интернета, вы должны стремиться максимально уменьшить размер файла, не жертвуя при этом его качеством. Для этого существует несколько вариантов, но самый простой способ - использовать онлайн-инструмент для сжатия такой, как TinyPNG или Compress JPEG. Просто загрузите изображения, и приложение само позаботится обо всем.
Если вы сравните сжатое изображение с оригиналом, то едва заметите какие-либо изменения в его качестве. (Сжатое изображение слева).
Adobe Photoshop (рисунок ниже) отдает все управление в ваши руки, если это то, что вам нужно.
4. Используйте информативные имена файлов
Загружая изображения, сделанные на вашем фотоаппарате, давайте им описательные имена, чтобы поисковым системам было легче найти их. Отличным примером может быть следующее имя:
IMG_Seattle_MusicFestival_2015_01.
5. Обратите внимание на alt текст
Alt текст используется, чтобы подчеркнуть идентичность изображения при наведении на него курсора мыши. Он также отображается в виде текста для всех пользователей, когда возникают проблемы с отображением картинки. Кроме того, он используется программами для чтения экрана, которые помогают слабовидящим ориентироваться в интернете.
Простейший HTML код для картинки выглядит так:
<img src=”http://example.co.uk/uploads/big-steak.jpg”>
Кроме того, alt-текст необходим, чтобы помочь поисковым системам понять, что изображено на картинке. Добавляя его, как в примере далее, вы сможете точно описать содержание изображения:
<img src=http://example.co.uk/uploads/big-steak.jpg alt=”Old man eating a big steak in the restaurant”>.
Также следует обратить внимание на тег Title, но заполнения аlt тега должно быть достаточно, чтобы сообщить Google и другим поисковым системам, что изображено на картинке и помочь вам выше ранжироваться в результатах поисковой выдачи.
6. Отделите иконки от основной картинки
В идеале, иконки должны быть как можно меньше, чтобы свести к минимуму время загрузки страницы. Это означает, что вы должны изменить их размер и использовать соответствующий уровень сжатия. Поскольку предполагается, что они должны быть довольно небольшими в любом случае, можно пожертвовать качеством картинки для увеличения скорости загрузки.
Для этого используйте редактор фотографий, Photoshop, или один из бесплатных инструментов, доступных сегодня (Pixlr, PicMonkey и Fotor, а также GIMP, свободно распространяемая программа, которая может делать большинство вещей, доступных в Photoshop).
7. Создайте sitemap для изображений
Google рекомендует использовать файлы sitemap для изображений, чтобы дать поисковой системе больше информации об имеющихся картинках на сайте. Это позволяет им находить даже те изображения, которые загружаются с помощью JavaScript-кода, часто применяемого для изображений продукта и галереи.
Если у вас уже есть файл sitemap сайта, можно добавить в него информацию об изображениях или создать отдельный файл sitemap только для картинок. Создание sitemap не представляет сложности. Просто для каждого URL-адреса, который указан в списке файла sitemap, можно добавить дополнительную информацию об изображениях на этой странице. Вот пример от Google для http://example.co.uk/sample.html:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.co.uk/sample.html</loc>
<image:image>
<image:loc>http://example.co.uk/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.co.uk/photo.jpg</image:loc>
</image:image>
</url>
</urlset>
Более подробную информацию и полный набор определений тегов можно найти здесь. Если вы работаете на платформе WordPress, то можете воспользоваться существующими плагинами. Например, Google XML Sitemap for Images и Udinra All Image Sitemap автоматически создадут Google XML карту сайта для изображений.
8. Не полагайтесь на сторонние хостинги изображений
Такие хостинги изображений, как Imgur и Postimage позволяют загружать фото на свои сервера, что отлично подходит для экономии пространства и повышения скорости передачи информации. Главный минус заключается в том, изображения могут быть удалены или заблокированы, когда хостинг переполнен большим объемом трафика.
Этого необходимо избежать. Поэтому лучше использовать собственные серверы для размещения изображений. В долгосрочной перспективе вы обязательно увидите, насколько это полезно.
9. Задействуйте социальные сети
Социальные сети играют важную роль в общей стратегии SEO оптимизации и привлечения клиентов. Самый простой способ интегрировать изображения в социальные медиа-платформы - добавить социальные кнопки «поделиться» на сайт.
Один из наиболее популярных способов воодушевить посетителей поделиться вашими фотографиями в Pinterest – добавить на каждую из них кнопку «Pin It».
Можно использовать отличный инструмент от SumoMe, Image Sharer. С помощью него посетители смогут делиться картинками на вашем сайте и ссылаться на вас. Он поддерживает Facebook, Twitter, Pinterest и Yummly. Вы можете настроить то, как будет отображаться значок Image Sharer. Если вы купите Pro версию, то получите помощь 24/7 и возможность удалить символику сервиса с изображений.
10. Есть сомнения? Ознакомьтесь с руководством для вебмастеров от Google
Google подготовил набор руководств по тому, как нужно оптимизировать изображения для поиска и посетителей сайта. Вы можете найти полное руководство здесь. Оно включает подробные сведения по тем пунктам, которые обсуждались в этой статье, и многое другое.
|
|
|
Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
|
|
|