Как оптимизировать изображения и фотографии для SEO

1. Неоптимизированное изображение
2. Оптимизированное изображение
3. 1. Размер изображения подходит для веб-использования
4. 2. Используйте описательные имена изображений
5. 3. Определите альтернативный текст для каждого изображения
6. 4. Удалите лишние данные из ваших изображений
7. Одно изображение, четыре возможности для оптимизации
8. Возможность оптимизации бонусного изображения!
9. Как насчет вас?

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

В Bourn Creative мы настоятельно рекомендуем вам использовать каждый бесплатный и простой способ повысить SEO своего сайта и шансы, которые ваш сайт будет отображаться в списках страниц поисковой системы, когда кто-то ищет ваши целевые ключевые слова и ключевые фразы. Одной из частей этого является обучение оптимизации изображений для Интернета .

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

Неоптимизированное изображение

Оптимизированное изображение

Визуально неоптимизированное изображение и оптимизированное изображение выглядят совершенно одинаково. Но если вы посмотрите на HTML-код за изображениями выше, они будут выглядеть совершенно иначе.

Существует четыре способа оптимизации изображения или фотографии для SEO:

1. Размер изображения подходит для веб-использования

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

• Размер изображения в соответствии с вашим содержанием или шириной рекомендуемого изображения. Если ширина вашего контента или избранного изображения (используйте самое большое) составляет 750 пикселей, нет причин загружать изображения, которые больше этого размера, не говоря уже о тысячах пикселей в ширину.
• Понизьте разрешение изображения. Зачастую изображения со стоковых фото-сайтов или даже некоторых цифровых камер имеют разрешение 300 точек на дюйм - разрешение печати используется. Убедитесь, что для всех изображений, которые вы загружаете на свой веб-сайт, установлено разрешение 72 dpi - веб.

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

2. Используйте описательные имена изображений

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

Поисковые системы не могут «видеть» изображения, но они могут «читать» ваш HTML, что означает, что они будут читать / сканировать имя изображения. Наименование ваших изображений с описательными именами не только поможет найти или идентифицировать изображения в будущем, но если вы позволите Google Images извлекать изображения с вашего веб-сайта, имена изображений будут играть роль в их поиске в результатах поиска.

На приведенных выше примерах изображений неоптимизированное изображение называется DSC_0245.jpg - это неверное имя изображения, потому что оно ничего не значит для того, кто не может видеть изображение. Однако оптимизированное изображение называется lake-tahoe.jpg , которое носит описательный характер и дает как поисковым системам, так и людям, которые видят HTML, представление о том, что представляет собой изображение.

Примеры неправильных названий изображений (не полезно, универсальное, запутанное):

• Photo.jpg
• logo.gif
• img_23.png
• ebookcover.jpg

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

• Jennifer-bourn.jpg
• Борн-творческо-logo.gif
• высушенный на солнце-томат-polenta.png
• как к GET-клиентов-ebook.jpg

Вот пример базовой структуры HTML для изображения:

3. Определите альтернативный текст для каждого изображения

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

• Альтернативный текст важен для доступности веб-сайта, так как он также используется программами чтения с экрана для описания изображения, которое кто-то не может увидеть, например, слепой пользователь.
• Альтернативный текст важен для оптимизации поисковой системы на странице, так как поисковые системы используют альтернативный текст или текст ALT для расшифровки изображения.

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

Альтернативный текст добавляется к изображениям с помощью атрибута Alt, обычно называемого тегом Alt. Вот пример той же ссылки, что и выше, с использованным атрибутом Alt:

При написании альтернативного текста для изображения:

• Удостоверьтесь, что это описывает изображение или о чем изображение
• Включите подходящие ключевые слова - но не используйте их для заполнения ключевые слова
• Убедитесь, что это полезно для тех, кто не может видеть ваше изображение и читает страницу вслух через программу чтения с экрана.
• Если вы используете изображение для отображения текста, например цитаты, используйте этот текст в качестве текста ALT

4. Удалите лишние данные из ваших изображений

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

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

Одно изображение, четыре возможности для оптимизации

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

Чтобы обернуть это красиво и аккуратно, вот что вам нужно помнить:

• Обрежьте и отмерьте каждое изображение для использования онлайн
• Дайте каждому изображению описательное, богатое ключевыми словами имя
• Дайте каждому изображению описательный альтернативный текст, используя атрибут alt изображения / HTML-тег alt
• Оптимизируйте изображение с помощью приложения, такого как ImageOptim, чтобы удалить лишние данные
• Название изображения и альтернативный текст в идеале должны быть уникальными
• Не используйте эти возможности для наполнения ключевые слова и быть спамом

Возможность оптимизации бонусного изображения!

Хотя существует четыре основных способа оптимизации изображений для Интернета, есть еще один способ, благодаря которому ваши изображения могут дать вашей оптимизации страницы еще больший импульс - подписи к изображениям .

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

Как насчет вас?

Вы уже эксперт по оптимизации изображений? Или вы узнали что-то новое в этом посте, которое могло бы помочь улучшить SEO на вашей странице? Я хотел бы услышать ваши мысли в комментариях ниже!