Как оптимизировать изображения для Интернета и SEO: подробное руководство

  1. Выбор правильного изображения
  2. Выбор лучшего формата файла
  3. Смешивая это
  4. Использование описательных имен файлов
  5. Написание подписей при необходимости
  6. Убедитесь, что вы используете альтернативный текст
  7. Обращая внимание на размещение изображения
  8. Правильный размер изображений
  9. Вот что я делаю
  10. Сжатие ваших файлов
  11. Заключение

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

Изображения не только делают ваш контент более приятным для чтения, они также могут помочь вам SEO на странице , В этом посте вы узнаете, как убедиться, что все изображения, которые вы используете на своем сайте, оптимизированы с точки зрения имени файла, размера, альтернативного текста (супер важно!), Релевантности темы, размещения и многого другого.

), Релевантности темы, размещения и многого другого

Если вы предпочитаете видеоуроки, посмотрите нижеприведенный Bjorn из WPLearningLab.

WordPress Image SEO для лучшего рейтинга в поисковых системах | WP Learning Lab

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

Давайте начнем, не так ли?

Выбор правильного изображения

Релевантность является ключевой:

если вы пишете историю о щенках, используйте изображение милого щенка.

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

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

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

Вы также можете использовать расширенный поиск картинок Google и выполнять различные поиски, чтобы сузить свои результаты: все эти слова; это точное слово или фраза; любое из этих слов; ни одно из этих слов. Я обычно просто вписываю слово для поиска в поле «все эти слова», и оно, кажется, работает хорошо.

Далее вы можете дополнительно сузить свои результаты по следующим параметрам: размер изображения; соотношение сторон; цвета в изображении; тип изображения; область, край; сайт или домен; Безопасный поиск (вы можете использовать это, чтобы отфильтровать явные результаты); тип файла (.jpeg, .png, .gif и т. д.); и наконец права использования.

В соответствии с правами на использование вы хотите фильтровать результаты по «бесплатному использованию или обмену, даже в коммерческих целях» или «бесплатному использованию, обмену или изменению даже в коммерческих целях».

В соответствии с правами на использование вы хотите фильтровать результаты по «бесплатному использованию или обмену, даже в коммерческих целях» или «бесплатному использованию, обмену или изменению даже в коммерческих целях»

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

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

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

Выбор лучшего формата файла

При определении размера изображений для Интернета есть несколько различных форматов файлов, которые вы можете использовать. Я почти всегда использую файлы JPEG или PNG, но в свое время я создал пару анимированных GIF-файлов.

При выборе наиболее подходящего формата файла для ваших изображений, вы должны выбрать тот, который держит файл наименьшим. Вообще говоря, файлы JPEG будут меньше PNG, но это не всегда так.

Что я делаю: используя Adobe Photoshop Размер изображения соответствует ширине области содержимого моего сообщения или страницы, затем выберите «Сохранить для Web и устройств». Оказавшись в этом окне, я переключаюсь между JPEG-High и PNG-24 и вижу, какой из них дает наименьший тип файла. Для фотографий JPEG всегда меньше и его следует использовать. Для графического текста или других изображений PNG часто меньше.

Смешивая это

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

Используйте красивую смесь следующих типов изображений:

  • иллюстрации, картины и рисунки
  • диаграммы, графики и таблицы
  • инфографика или другая графика, которую вы разрабатываете сами
  • анимированные GIF
  • скриншоты (особенно хорошо они подходят для постов туториалов)

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

Использование описательных имен файлов

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

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

Если у вас есть изображение улыбающегося ребенка, гораздо лучше назвать файл Smiling-child.jpg, чем просто оставить оригинальное имя файла (например, _DSC0428.jpg). Убедитесь, что когда вы называете свои файлы, вы разделяете слова тире (name-your-file-like-this.jpg), потому что эта черта интерпретируется Google как пробел (и Bing тоже).

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

Написание подписей при необходимости

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

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

Убедитесь, что вы используете альтернативный текст

Альтернативный текст (сокращенный текст) - это атрибут, который добавляется в тег изображения HTML. Он появляется внутри контейнера изображений и помогает описать изображение для поисковых систем, когда оно не может быть отображено.

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

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

<img src = ”https://www.mprstudio.com/wp-content/uploads/babe-ruth-original-new-sepia.jpg” alt = ” Добавление оттенка сепии к изображению в Adobe Photoshop » />

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

Обращая внимание на размещение изображения

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

Правильный размер изображений

Ширина области содержимого на моем сайте составляет 665 пикселей, поэтому я соответствующим образом изменяю размер своих изображений (иногда даже меньше).

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

Если вы загружаете изображения с размерами 4288 x 2848 пикселей и отображаете их с разрешением 600 x 400 пикселей путем изменения исходного кода, это серьезно замедлит работу вашего веб-сайта (и излишне займет много места на сервере). Сделайте одолжение посетителям вашего сайта и сохраните ваши изображения в правильном размере для вашей области контента.

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

Вот что я делаю

Я использую Adobe Photoshop для определения размера своих изображений, затем выбираю «Сохранить для Web и устройств» и выбираю jpg или png в зависимости от того, какое это изображение и какой тип файла меньше. Затем я использую EWWW Image Optimizer для дальнейшего сжатия моих файлов изображений. Это бесплатный плагин, который отлично работает и даже позволяет оптимизировать изображения.

Сжатие ваших файлов

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

Доступно несколько различных плагинов, включая следующие:

EWWW Image Optimizer - Это мой плагин для сжатия файлов изображений, и я очень рекомендую его. Любые изображения, которые вы загружаете в медиатеку, будут автоматически оптимизированы, и вы можете использовать их инструмент массовой оптимизации, чтобы сжать любые файлы, которые были загружены перед установкой и активацией плагина.

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

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

В бесплатной версии WP Smush используется сжатие без потерь, но если вы приобретаете профессиональную версию, вы можете использовать сжатие с потерями (называемое Super-Smush), которое дополнительно уменьшает размеры файлов с минимальной потерей качества изображения.

Kraken.io - С помощью API Kraken вы можете оптимизировать файлы .png, .jpg и .gif. Чтобы настроить плагин, вы должны сначала зарегистрировать бесплатный аккаунт на kraken.io. После регистрации вы получите API и секретный ключ, который вы можете использовать на нескольких сайтах WordPress.

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

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

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

Почему я должен сжимать изображения моего сайта?

  1. Страницы вашего сайта будут загружаться быстрее, что делает посетителей в восторге. Более высокая скорость работы сайта также может привести к увеличению дохода, особенно если вы работаете в интернет-магазине.
  2. Резервное копирование сайта займет меньше времени из-за меньшего размера файла.
  3. Вы будете экономить 100 килобайт на изображение и, следовательно, будете использовать меньшую пропускную способность.

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

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

Заключение

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

Напомним, вы хотите иметь в виду следующие вещи:

  1. Выберите правильный тип изображения для вашего контента.
  2. Выберите правильный формат файла (JPEG, PNG или GIF).
  3. Используйте уникальную смесь изображений (фотографии, иллюстрации, диаграммы, инфографика и т. Д.).
  4. Используйте описательные имена файлов с ключевыми словами и тире между каждым словом.
  5. Вставьте подписи к изображениям, но только если они повышают ценность для читателя. Вам не нужно использовать их все время.
  6. Не забудьте ввести альтернативный (или альтернативный) текст для ваших изображений. Объясните изображение с ключевыми словами естественным образом. Никогда не набивайте нигде ключевые слова!
  7. Помните о размещении изображения. В коротком посте поместите изображение вверху. Если ваш пост длиннее, рассмотрите возможность размещения изображений рядом с каждым подзаголовком.
  8. Размер изображения для ширины содержимого ваших сообщений / страниц. Не загружайте гигантские файлы, только чтобы отобразить их в небольшом размере.
  9. Используйте плагин или онлайн-инструмент, чтобы сжать файлы изображений и сделать их еще меньше.

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

Не останавливайтесь на достигнутом, убедитесь, что вы оптимизируете все посты и страницы вашего сайта для SEO. Следить за этим WordPress SEO Контрольный список для начала.

Если у вас есть какие-либо вопросы или комментарии, пожалуйста, оставьте их ниже. Я сделаю все возможное, чтобы помочь вам.

Вам нужна помощь в создании веб-сайта WordPress? Зарегистрируйтесь для вашего БЕСПЛАТНАЯ установка WordPress сегодня.

Если вы нашли этот пост полезным, пожалуйста, поделитесь им и распространите информацию!

Хотите больше как это? Подпишитесь на мою рассылку чтобы получить полезные учебники, советы и хитрости WordPress.

Давайте начнем, не так ли?
Действительно ли люди используют что-то кроме Google?
Почему я должен сжимать изображения моего сайта?
Вам нужна помощь в создании веб-сайта WordPress?
Хотите больше как это?
Меню сайта
Новости
Ошибка Открытия Драйвера Казаки
Ошибка Microsoft Visual C++ Runtime Library. Как исправить? Здравствуйте. Не так давно помогал одному хорошему знакомому с настройкой компьютера: у него при запуске любой игры выскакивала ошибка Microsoft

Волчья сотня | Si vis pacem, para bellum!
02/06/2012 Волчья сотня «Волчья сотня» — неофициальное название 2-й сотни 2-го Аргунского полка Забайкальского казачьего войска в Русско-японскую войну 1904—1905 годов. Казаки-аргунцы,

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

Тайна "Тихого Дона" Шолохова: своровал или нет?
Несколько поколений литературоведов и историков спорили о том, мог ли полуграмотный казак Михаил Шолохов написать "Тихий Дон", да ещё в 23 года, не имея необходимого для романа-эпопеи жизненного опыта.

Андрей Казаков / Andrei Kazakov
Детство и юность Андрея Казакова Путь к сцене Андрея Казакова был долгим и причудливым. Молодой человек попробовал себя в нескольких профессиях и только потом решил стать актером. Андрей родился в семье

Взятие Азова донскими казаками в 1637 году
Автор: А. Пивоваров Источник: "Донские казаки". Краткій сборникъ разсказовъ изъ военной жизни Донцовъ, о ихъ храбрости, находчивости въ бою, преданности долгу и проч.Новочеркасская типография. 1892

Василий Иванович Баженов (1737–1799)
Один из основоположников русского классицизма. Учился в "архитектурной команде" Г. В. Ухтомского и в Академии художеств с момента се основания. Проектировал Большой Кремлевский дворец в Москве.

КИРИЛЛ КОЗАКОВ ВИКИПЕДИЯ - Кирилл Козаков биография актера, фото, личная жизнь
Школьные годы Михаил Козаков вспоминает с неохотой. Актер театра и кино, сын известного советского актера Михаила Козакова. Михаил Козаков родился 14 октября 1934 года в Ленинграде. Описание отчество

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

Атака казаков. Фильм Тихий Дон.avi
( 5 г. назад ) эпизод из сериала Девять жизней Нестора Махно 6 серия ( 8 г. назад ) 29 апреля 1648 год Желтые воды ( 12 мес.

Реклама