- 1. Изображения не помогут вашему SEO
- 2. Используйте оригинальные, высококачественные изображения
- 3. Есть причина для ваших изображений
- 4. Остерегайтесь авторских прав
- 5. Улучшайте изображения с помощью инструментов
- 6. JPEG Best Practices
- 7. PNG Best Practices
- 8. GIF Best Practices
- 9. Используйте оптимальный размер файла без потери качества
- 10. Добавить описательные подписи
- 11. Как назвать изображения для SEO
- 12. Как написать SEO-дружественный альтернативный текст
- 13. Создайте изображение Sitemap
- 14. Откройте Graph & Twitter Cards
- Ключевые приемы оптимизации изображения
Мы живем во все более визуальном мире. И в этом мире значение оптимизации изображения нельзя упускать из виду.
Изображения делают ваши веб-страницы более привлекательными.
Скорее всего, на каждой странице вашего сайта есть изображение.
Однако без надлежащей оптимизации вы теряете ценный актив SEO.
Кроме того, чем больше размер файла, тем дольше загружается ваша страница и тем выше будет показатель отказов.
Оптимизация изображений создает множество преимуществ для ваших графических ресурсов, включая лучшее взаимодействие с пользователем, более быстрое время загрузки страницы и дополнительные возможности ранжирования как в результатах традиционного поиска, так и в результатах поиска изображений.
Хотя технология визуального поиска в последнее время добились больших успехов, роботы поисковых систем не могут определить содержание изображения; они полагаются на текст, связанный с изображениями, чтобы полностью понять, что такое изображение и как оно относится к вашему контенту или теме вашей страницы.
Но какие факторы наиболее важны для обеспечения того, чтобы ваши изображения были доступны для поиска и не замедляли работу сайта?
Вот 14 важных советов по оптимизации изображений, которые вам необходимо знать.
1. Изображения не помогут вашему SEO
Вы хотите, чтобы ваши фотографии появлялись на вашем сайте. Если вы наполните свой сайт стоковыми изображениями, вы будете выглядеть не оригинально - как и тысячи других сайтов, которые не выделяются.
Слишком много сайтов загромождены одними и теми же общими фотографиями.
Подумайте о корпоративном веб-сайте, консалтинговой фирме, бизнесе, который гордится обслуживанием клиентов. Все эти сайты используют практически одинаковое изображение улыбающегося делового человека.
Я уверен, что вы видели такой, который выглядит так:
Несмотря на то, что ваши стоковые изображения могут быть идеально оптимизированы, они не будут иметь такого же эффекта или потенциальных преимуществ для SEO, как оригинальное, высококачественное изображение.
2. Используйте оригинальные, высококачественные изображения
Чем больше оригинальных фотографий у вас есть, тем лучше для пользователя и ваши шансы на ранжирование в релевантных поисках.
Оригинальные изображения могут быть сделаны дизайнером в вашей компании (например, визуализация данных, инфографика) или приняты на месте с помощью качественной камеры.
Дайте вашим клиентам представление о вашей компании или предоставьте высококачественный имидж продукта, на который будут реагировать ваши посетители.
Многие пользователи игнорируют стоковые фотографии. Высококачественные оригинальные изображения позволят вам выделиться в результатах поиска - так что покажите индивидуальность вашего бренда и привлекайте больше людей на свой сайт.
3. Есть причина для ваших изображений
Изображения должны помочь рассказать историю или упростить идею или вещь.
Многие люди учатся визуально. Изображения также могут оказывать большее эмоциональное воздействие, чем длинные блоки текста.
Хотя вы всегда хотите добавить какое-то изображение к своему контенту, не форсируйте его.
Использование снимков экрана - это еще один способ повысить ценность, рассказать свою историю и дополнить материал в своих блогах, статьях и целевых страницах. Снимки экрана - отличный способ донести свою мысль, особенно если вы обсуждаете сложную тему.
В конечном счете, ваша причина наличия изображения состоит в том, чтобы дополнить контент, разбить текст и помочь вашей аудитории понять продукт или концепцию.
4. Остерегайтесь авторских прав
Независимо от того, какие файлы изображений вы выбрали, убедитесь, что нет конфликта авторских прав. Если Getty, Shutterstock, DepositFiles или какой-либо другой провайдер фотоизображений владеет изображением, которое вы используете, и у вас нет лицензии на его использование, то вы рискуете получить дорогостоящий иск.
Под Закон о защите авторских прав в цифровую эпоху (DMCA), Вы можете получить уведомление, если вы нарушили какие-либо проблемы с авторским правом. Если владелец какой-либо части контента увидит их содержимое на вашем веб-сайте, он может выдать DMCA Takedown, который вы должны соблюдать.
Существует множество способов найти бесплатные изображения в Интернете. Google Images позволяет фильтровать результаты на основе тех, которые доступны для повторного использования. Эти изображения не всегда самые подходящие, но могут помочь вам найти изображение бесплатно.
5. Улучшайте изображения с помощью инструментов
После загрузки изображений с Shutterstock или DepositPhotos вы можете делать с ними больше.
Такой инструмент, как Canva, позволяет добавить индивидуальность, текст и уникальность к вашим изображениям, что может повысить его привлекательность.
Многие изображения героев и, казалось бы, стоковые фотографии улучшены и сделаны более привлекательными благодаря индивидуальному подходу с помощью этих инструментов. Хотя само по себе это может быть обычное изображение, использование Canva дает вам возможность добавить личное сообщение.
С помощью этих инструментов вы можете создать собственный пост в социальной сети или инфографику из шаблона.
Дополнительные инструменты, такие как Easel.ly, Visual.ly и Pablo от Buffer, помогут вам создавать красивые и привлекательные изображения, чтобы выделиться.
6. JPEG Best Practices
Знайте тип файла, с которым вы работаете. В целях оптимизации вы обычно будете использовать JPEG.
Изображение JPEG обеспечивает наилучшие параметры для сохранения качественного изображения при сжатии или изменении размера. Они работают со многими цветами, тенями и узорами для отображения изображения с высоким разрешением и являются наиболее популярным типом фотографий в цифровом пространстве.
Благодаря способности значительно сжиматься, JPEG формирует качественные изображения в файлах небольшого размера.
Один недостаток JPEG: он использует сжатие данных с потерями. Это означает, что качество изображения может пострадать в зависимости от ваших настроек. Также не поддерживается прозрачный фон, как в форматах GIF и PNG.
Тем не менее, использование этого формата выгодно, потому что он поддерживает небольшие размеры файлов и поддерживается повсеместно.
7. PNG Best Practices
Изображение PNG обычно используется при редактировании или загрузке файлов из Adobe Photoshop. Известно, что PNG управляет прозрачностью и часто используется для активов изображения логотипа, так как изображение выглядит маленьким, но разрешение остается высоким.
PNG могут быть сохранены как PNG-8 или PNG-24. Тип файла PNG-8 ограничен палитрой из 256 цветов, тогда как PNG-24 обеспечивает намного более высокое качество отображения, но приводит к большему размеру файла, что может нарушить производительность страницы.
Вы обнаружите, что, продолжая восстанавливать изображения, PNG не будут ухудшаться.
8. GIF Best Practices
Как и PNG, GIF-файлы остаются опцией для изображений небольшого размера, и, как и PNG-8, изображения имеют только 256 цветов. Для лучшей практики вам следует избегать использования GIF-файлов для фотографий продуктов.
GIF - это формат растровых изображений, обычно используемый для простых рисунков и анимаций. Это идеальный формат для логотипов компаний и других элементов страниц веб-сайтов благодаря небольшому размеру файла и поддержке прозрачных фонов.
Однако этот формат не рекомендуется для изображений и фотографий.
Прочитайте больше: SEO лучшие практики при использовании GIF-файлов
9. Используйте оптимальный размер файла без потери качества
Изображения часто являются основной причиной медленной загрузки. Если скорость вашего сайта нуждается в улучшении, попробуйте уменьшить размеры файлов изображений с помощью изменения размера и сжатия. Проверьте способы, которые тесты скорости страницы действительно влияют на ваш бизнес ,
Общий размер вашего изображения не должен быть намного больше, чем вам нужно (т.е. ширина вашей веб-страницы или сообщения в блоге).
Один из лучших способов уменьшить размер файла без ущерба для качества - использовать функцию «Сохранить для Интернета» в Adobe Photoshop.
Изображения могут быть массивными файлами, но это бесполезно, когда дело касается пользовательского опыта. Огромные размеры файлов могут напрямую влиять на ваш рейтинг в поисковой выдаче и поиске изображений.
В Photoshop вы можете изменить размер изображения перед его сохранением, делая размер файла более подходящим для удобства пользователя. В Photoshop есть предустановки для выбора качества изображения в диапазоне от 1,38 МБ до 86 КБ. Как правило, где-то посередине не повлияет разрешение или увеличение скорости загрузки страницы.
Когда не используется Photoshop, существуют онлайн-инструменты сжатия, которые позволяют легко изменять размер изображения без ущерба для качества.
Существует множество инструментов для изменения размера и сжатия ваших изображений. Некоторые из лучших инструментов, кроме Photoshop, включают PicMonkey и Pixlr как для начинающих, так и для опытных пользователей.
В конечном счете, все зависит от размера файла, качества изображения и времени загрузки. Убедитесь, что изображение не теряет пиксели и не искажается при сжатии размера файла.
10. Добавить описательные подписи
Добавление подписей к изображениям - это лучший способ оптимизации изображений.
Подпись - это текст, который появляется - обычно в сером поле - под изображением, объясняя, что вы видите на картинке. Хотя слова в вашей статье могут не читаться, велики шансы, что текст под вашим изображением будет прочитан.
Подписи полезны, потому что не все изображения понимаются сразу, а функция добавляет контекст для изображения, чтобы предоставить больше контекста для поисковых систем (кроме вашего альтернативного текста). Подписи видят до На 16 процентов больше читателей чем текст, согласно Poynter Research, который может оказаться ценным для читателей.
Некоторые изображения могут быть автономными, хотя добавляется дополнительное значение с подписью. Просто помните, чтобы не заставлять подпись, когда ничего не нужно.
11. Как назвать изображения для SEO
Когда дело доходит до SEO, создание описательных, богатых ключевыми словами имен файлов абсолютно необходимо. Имена файлов изображений предупреждают Google и других сканеров поисковых систем о предмете изображения.
Если вы используете изображение, которое вы сняли сами или загрузили с камеры, имя файла обычно будет выглядеть как «IMG_722019» или что-то подобное. Измените имя файла по умолчанию, чтобы поисковые системы могли понять ваше изображение и повысить ценность SEO.
Это требует небольшой работы, в зависимости от того, насколько обширна ваша медиатека, но изменение имени изображения по умолчанию всегда хорошая идея. Давайте возьмем это изображение шоколада, например:
Я мог бы назвать это просто «шоколадом», но если вы продаете шоколад на своем веб-сайте, потенциально каждое изображение может быть названо «шоколад-1», «шоколад-2» и так далее. Я назвал это изображение «темный шоколадный кофе», чтобы позволить пользователям и поисковым системам понять образ.
Вам нужно будет редактировать HTML-код изображения вручную для каждой загрузки, чтобы обеспечить точность. Имя файла, написанное простым языком, должно быть кратким, точным, с ключевыми словами и описанием темы, которую представляет ваше изображение.
12. Как написать SEO-дружественный альтернативный текст
Alt-теги - это текстовая альтернатива изображениям, когда браузер не может правильно их отобразить. Подобно заголовку, атрибут alt используется для описания содержимого файла изображения.
Когда изображение не загружается, вы получите изображение с тегом alt в левом верхнем углу. Удостоверьтесь, что они соответствуют изображению и делают изображение соответствующим.
Уделение внимания тэгам alt также полезно для общая SEO-стратегия на странице , Вы хотите убедиться, что все остальные области оптимизации на месте, но если изображение по какой-либо причине не загружается, пользователи увидят, каким должно быть изображение.
Кроме того, добавление соответствующих alt-тегов к изображениям на вашем веб-сайте может помочь вашему веб-сайту повысить рейтинг в поисковых системах, связывая ключевые слова с изображениями. Четное Google отметил по значению альтернативного текста в изображениях:
Он предоставляет Google полезную информацию о предмете изображения. Мы используем эту информацию, чтобы помочь определить наилучшее изображение, которое будет возвращено по запросу пользователя.
Альтернативный текст требуется под Американский закон об инвалидности для лиц, которые не могут сами просматривать изображения. Описательный альтернативный текст может предупредить пользователей именно то, что на фотографии. Например, скажем, у вас есть изображение шоколада на вашем сайте. Альтернативный текст может читать:
<img src = ”chocolate-1.jpg” alt = ”chocolate” />
Тем не менее, лучший альтернативный текст, который описывает изображение будет выглядеть так:
<img src = ”chocolate-1.jpg” alt = ”темный шоколад со вкусом кофе” />
Альтернативный текст доступен для просмотра в кэшированной текстовой версии страницы, что помогает как пользователям, так и поисковым системам. Для дальнейшего значения SEO, альтернативный текст может действовать как якорный текст внутренней ссылки, когда изображение ссылается на другую страницу на сайте.
13. Создайте изображение Sitemap
Создайте и опубликуйте графическую карту сайта, чтобы разместить все ваши изображения в одном месте. Это дает Google и другим поисковым системам больше возможностей для обнаружения изображений на вашем сайте, увеличивая вероятность того, что ваши изображения будут отображаться в результатах поиска изображений.
С помощью «image-sitemap.xml» вы можете предупредить Google об изображениях, загруженных через JavaScript, которые сканеры, возможно, не нашли, или указать, какие изображения вы хотите сканировать. в Google Вы можете создать совершенно новую карту сайта исключительно для изображений или добавить информацию об изображении в существующую карту сайта XML.
Для сайтов WordPress создание и внедрение графических файлов сайтов легко с помощью плагина WordPress: Google XML Sitemap для изображений », Которая автоматически создает карту сайта для изображений, загружаемых в медиатеку WordPress.
Помогите Google в дальнейшем индексировать и присваивать ваши изображения. XML карта сайта поможет вам сделать это.
14. Откройте Graph & Twitter Cards
Если вы предоставляете ценный контент и информацию своей аудитории, они будут делиться контентом в социальных сетях. От Facebook до Twitter, контент распространяется и ссылки распространяются.
Когда у вас есть HTML-код, настроенный для Open Graph (OG) и Twitter Cards (находится в плагине Yoast в WordPress), вы можете гарантировать, что изображение будет появляться на социальных платформах каждый раз, когда ваша ссылка будет опубликована.
Для тегов OG вы можете установить нужное изображение в WordPress, а также создать собственное мета-свойство в HTML. Добавьте тег в раздел <head> вашей страницы, чтобы он выглядел так:
<meta property = ”og: image” content = ”https://example.com/image-optimization.jpg” />
Твиттер-карты играть ту же роль, когда URL публикуется в Твиттере, стимулируя участие и генерируя клики. разметка для карточек Twitter работает аналогично Open Graph, а на приведенном выше снимке экрана плагина Yoast показан логотип Twitter, где вы можете легко заполнить эту информацию с помощью WordPress.
Настройка этих аспектов для ваших изображений помогает им привлечь внимание на переполненном социальном рынке.
Ключевые приемы оптимизации изображения
Следование этим советам должно улучшить взаимодействие с вашими изображениями, снизить скорость загрузки страниц, улучшить возможности поиска в результатах поиска изображений и повысить эффективность ключевых слов.
Самое главное, чтобы изображение и альтернативный текст соответствовали странице. Другие ключевые выводы:
- Уменьшите размер файла для более быстрой загрузки страницы.
- JPEG, как правило, лучший вариант для фотографий на сайте.
- Никогда не используйте GIF для больших изображений продуктов.
- Улучшайте стоковые изображения с помощью таких инструментов, как Canva.
- Не набирайте ключевые слова в альтернативном тексте, убедитесь, что он описывает фотографию.
- Убедитесь, что изображение относительно страницы.
- Для возможности сканирования создайте карту сайта с изображением.
- Создание OG и Twitter-карт для социальных сетей.
Оптимизация изображений требует определенных усилий, но поскольку ваши потребители ищут визуальные средства для понимания информации, а не текста, для обеспечения успеха необходимо убедиться, что одно изображение оптимизировано.
Кредиты изображений
In-Post Фото предоставлено Google повторно использовать изображения / Pixabay
Скриншоты, сделанные Райаном Клаттером, август 2017