SEO оптимизация изображений на WordPress (и не только): простое руководство для бабушки

1. Потому что важно оптимизировать изображения на стороне SEO
2. Что оптимизировать, чтобы сделать SEO дружественный имидж
3. Имя файла
4. Как правильно написать имя оптимизированного файла SEO
5. Альтернативный текст или альтернативный текст
6. Как оптимизировать альтернативный текст
7. Как вставить тэг alt в WordPress
8. Название изображения или тег заголовка
9. Что вставить в качестве заголовка изображения
10. Размеры в пикселях
11. Как легко изменить размер изображения
12. Пространство занято на диске
13. Как сжать изображение
14. И другие элементы в редакторе WordPress относительно изображений?
15. Важен ли порядок вставки в коде alt и title ?
16. Советы по использованию изображений "сделать SEO"
17. Сколько изображений я должен поместить на каждую страницу / пост?
18. Первое изображение должно быть оптимизировано для того же ключевого слова на странице / посте
19. Где найти бесплатные и действительные изображения?

Наша коммерческая группа Artmisto.net

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

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

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

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

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

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

Один из моих бета-тестеров (это не правда).

Потому что важно оптимизировать изображения на стороне SEO

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

• Они не сразу понятны для Google. Алгоритм, который их анализирует, еще не в состоянии точно понять , что изображение имеет в виду, «наблюдая за ним» (даже если они существуют). невероятные технологии в связи с этим: для этого мы должны использовать инструменты, которые нам доступны, чтобы дать конкретные указания на содержание изображения .
• Если Google не понимает их, они бесполезны на уровне SEO . Оптимизированные изображения SEO могут придать смысл и, следовательно, сделать вашу веб-страницу более релевантной для конкретного запроса (поиск пользователя). Те, что непонятны для Google, только снижают качество сайта (и его позиционирование).
• Тяжелые изображения могут замедлить работу сайта и, следовательно, привести к тому, что пользователи пропустят. Размеры изображений всегда должны быть соответствующим образом изменены и сжаты, чтобы они занимали как можно меньше места на сервере и во время предоставления вашим пользователям. Тяжелый сайт из-за неоптимизации - это сайт, который не очень удобен в использовании, и, следовательно, сайт, который Google не понравится .

Что оптимизировать, чтобы сделать SEO дружественный имидж

Технически необходимо позаботиться о 5 основных характеристиках изображений:

• имя файла;
• альтернативный текст ( альтернативный текст );
• название изображения ( title );
• размеры в пикселях ;
• размер с точки зрения используемого дискового пространства ;

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

Имя файла

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

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

Я поставил ключевое слово «скучно», потому что оно актуально и интересно, я уверен, что оно сразу же расположится для длинного хвоста!

Пример фотографии с оптимизированным изображением SEO, которую вы видите выше, описывается именем файла "maine-coon-black-tortie-annoiato.jpg", а не "DSC_2330.jpg".

Оптимальное имя файла изображения должно описывать изображение в разумной и реалистичной форме : нет изображения синих воздушных шаров с именем файла "square-rossi.jpg", потому что мы хотим расположить страницу для "красных квадратов", и мы думаем сделать это, проталкивая имя файла изображения.
Если это происходит с вами, проблема в этом случае заключается в том, что вы выбрали изображения, которые не очень актуальны и актуальны , а не наоборот!

Конечно, как и в этом руководстве, если изображение представляет конкретный объект абстрактного знания, его имя может (и должно) представлять его. На самом деле фотографии в этом руководстве называются «optimize-images-seo-guide-example- [number], потому что на самом деле они являются примерами!

Единственное, чего не следует делать, - это принудительно заполнять имя файла ключевыми словами или чрезмерной оптимизацией (действительно чрезмерной оптимизацией ), что является действительно плохой идеей: это практика, наказываемая Google с помощью алгоритмов, которые регулируют спам, например, печально известного Пингвина (который на самом деле не штраф, но алгоритм наказания, если быть точным). Имейте в виду, что страница с чрезмерно оптимизированными именами изображений не приведет к отключению сайта, но если вы сделаете это где угодно, это может дать вам плохую четверть часа (или даже целый год, учитывая библейские времена для обновления этих алгоритмов и возмездия за возмездие). по эксплуатации). Большинство «точных» может подумать, что я сам сделал это в этом посте, но я не думаю, что рецензент вручную рассмотрит спам номенклатуры изображений, которые я использовал для этого руководства.

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

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

ПРИМЕЧАНИЕ . В WordPress, как и во многих других CMS, имя файла не может быть изменено после загрузки файла! Однако теперь появилась опция «заменить», с помощью которой вы можете заменить файл, я всегда использовал плагин » Включить Media Replace «Даже если вам нужно обратить внимание на эти плагины, которые забивают таблицу БД, небольшой сюрприз всегда может быть не за горами, а наличие поврежденной базы данных не очень забавно.

Как правильно написать имя оптимизированного файла SEO

Используются только ключевые слова (без статей, предлогов или знаков препинания, печально известные стоп-слова ), предпочтительно разделенные символом «-» («минус», а не подчеркивание «_»).
ПРИМЕЧАНИЕ: если у вас есть 10 тысяч изображений, оптимизированных с подчеркиванием, ничего не делайте, не исправляйте их, если вместо этого вы начали теперь использовать символ «минус» в соответствии с соглашением.

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

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

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

Так что не присваивайте изображениям одинаковое имя файла и не будьте слишком общими : упустите хорошую возможность для создания релевантности.

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

Альтернативный текст или альтернативный текст

« Альтернативный текст » (или alt / alt text / alt tag / alt tag ) технически является текстовой строкой, которая отображается, когда браузер не может напечатать изображение на экране , например, потому что вы используете браузер только текст или браузер для слепых, которые обычно «читают» веб-страницы и используют тег alt для чтения изображений для пользователей с ограниченными возможностями.

Альтернативный текст является наиболее важным элементом из всех вместе с именем файла: из тега alt Google экстраполирует ключевые слова, которые описывают изображение и для которого оно будет перемещаться. Его можно легко вставить в любую современную CMS: WordPress, Joomla, Drupal и Magento имеют поля, которые можно легко изменить.

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

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

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

например, для изображения для примера изображения у нас будет следующий HTML-код:

<img src = "https://www.emanuelevaccariweb.it/wp-content/uploads/2016/09/maine-coon-black-tortie-annoiato" alt = "Скучная черепаха мейн-кун, черная кошка" />

Альтернативный текст в этом случае - « Скучающая кошка черного кота мейн-кун », которая в коде инкапсулирована в HTML-тег « alt = ».

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

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

Как вставить тэг alt в WordPress

Есть два способа вставить альтернативный текст в WordPress: через раздел «Медиа» или непосредственно в редакторе сообщений , в обоих случаях, когда изображение вставлено или после модификации.

При вставке изображения через раздел «Медиа» или редактор статьи / страницы вы найдете это окно с полем «альтернативный текст»:

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

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

Название изображения или тег заголовка

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

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

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

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

Что вставить в качестве заголовка изображения

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

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

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

В WordPress вы можете изменить заголовок во время вставки изображения или после загрузки в любое время.

Размеры в пикселях

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

Если мы говорим о блоге, отображаемом на рабочем столе, в принципе, изображение не должно быть шире 800px и не выше 400px (оценки основаны на среднем размере премиум-контента WordPress, около 960px) ,

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

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

Если вы жуете английский, я отсылаю вас к очень интересному чтению: « Какой лучший размер экрана для дизайна? «(Да, я знаю, что ваша бабушка не знает английского, переведите вас!).

ПРИМЕЧАНИЕ. Мне известно, что существуют методы для работы с масштабированными и адаптивными изображениями (например, srcset, который WordPress теперь использует автоматически), но вы думаете, что это слишком сложная концепция для бедной бабушки?

Как легко изменить размер изображения

Если вы работаете в среде Windows (как написано в эссе « Nonne и Linux, мы становимся кретинуксом »), чтобы изменить размер изображения, просто используйте Paint!

Краска, друг бабушек, которые оптимизируют изображения

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

Если ваша бабушка использует Linux или MacOS, скачайте что-то вроде этого!

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

Пространство занято на диске

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

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

Это указания, продиктованные опытом , а не правила, написанные на камне!

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

Как сжать изображение

После того как изображение было вырезано и изменено в его собственном редакторе, если вы находитесь в среде Windows, чтобы сжать его и оптимизировать пространство памяти, просто передайте его копию (всегда лучше сохранить отдельную «оригинальную» версию) в бесплатной программе. очень просто называется Riot (можно скачать бесплатно на http://luci.criosweb.ro/riot/ ).

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

Скриншот Riot с вездесущими кошками породы мейн-кун

Слева находится исходное изображение , поэтому вы можете сравнить качество с предварительным просмотром оптимизированной версии справа; Кроме того, после увеличения изображения с использованием, например, клавиши CTRL macro + mouse, щелкая фото и перетаскивая курсор, можно прокручивать изображение, чтобы проверить влияние сжатия на детали изображения .

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

1. Оригинальные Кб размеры изображения;
2. Кб размеры версии сжатого изображения;
3. Тип изображения сжатой версии (оставьте прежним!);
4. Уровень качества сжатого изображения : перетащите полосу (или введите число от 0 до 100), чтобы уменьшить качество изображения и, следовательно, занимаемое пространство. Вы можете наблюдать визуальное влияние изменения изображения справа;
5. Chroma Subsampling : это метод сжатия изображения, который может немного изменить цвета, но уменьшая пространство, занимаемое на диске. Полезно оценить, является ли влияние на изображение приемлемым, используя предварительный просмотр;

Если вы забыли изменить размер изображения, подумайте о Riot и запомните этот важный шаг!

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

Выбор «Да» приведет вас к окну, где вы можете изменить размер изображения : здесь вы можете ввести ширину ( ширину ) и длину ( высоту ). Оставьте флажок «сохранять пропорции», чтобы не влиять на пропорции изображения.

Затем нажмите «Сохранить», чтобы сохранить изображение в новом сжатом файле, готовом к загрузке.

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

Я также указываю вам:

И другие элементы в редакторе WordPress относительно изображений?

В WordPress вы также найдете две другие области, которые, однако, не оказывают сильного влияния на SEO, такие как описанные выше:
• Заголовок : это поле используется для вставки заголовка, который появится под изображением в записи. Будучи текстом, вставленным в статью, и находясь близко к изображению, его можно использовать для усиления семантического контекста изображения и повышения его актуальности;
• Описание : он используется внутри WordPress для отслеживания того, что изображения содержатся в списках мультимедиа. Не актуально на уровне SEO;

Важен ли порядок вставки в коде alt и title ?

Абсолютно нет! Порядок вставки в код этих элементов никоим образом не влияет на SEO (так же как и порядок вставки любого другого «фрагмента» HTML внутри тега <img>).

Советы по использованию изображений "сделать SEO"

Я хочу принести несколько советов и развенчать мифы о комбинации «Изображения и SEO».

Сколько изображений я должен поместить на каждую страницу / пост?

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

Все зависит от запроса !
Напечатайте в Google тот, для которого вы хотите разместить документ, и посмотрите, сколько и какие изображения используются в первых 10/20 результатах: вы будете знать, что Google ожидает от документов, которые она присудила как лучшие за этот конкретный запрос.

Это единственный способ сориентироваться в этом решении.

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

Первое изображение должно быть оптимизировано для того же ключевого слова на странице / посте

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

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

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

Я перестану использовать вас для этого SEO руководства по оптимизации изображений!

• Заголовок сообщения: Мейн-кун, кот, похожий на собаку
• Имя файла: мейн-кун-черный-tortie.jpg
• Название: Наша копейка, полтора года мейн кун черная черепаха!
• Alt text: мейн кун черная черепаха пенни
• Размеры: 350 * 300 пикселей
• Объем памяти: 40 КБ

Позже в статье, где мы говорим о щенках мейн-кун (это очень востребованный запрос и развивает основную тему «Мейн-кун»), я поставил эту картинку:

Вот они ...

• Имя файла: мейн-кун-куччиоли-2-mesi.jpg
• Название: пара красивых щенков мейн кун
• Alt text: щенки мейн кун 2 месяца
• Размеры: 300 * 300 пикселей
• Объем памяти: 43 КБ

Это изображение развивает основную тему и вводит очень актуальную, актуальную и исследованную подтему: щенки.

Но будьте осторожны, какое исследовательское намерение связано с маленькими на стороне, но это другая история ...

Где найти бесплатные и действительные изображения?

Чтобы найти бесплатные изображения для легального использования, существует несколько сайтов, мой любимый - flickr.com (выберите соответствующую лицензию!).

Вы можете найти еще много на этом сайте ,

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

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

PS: Вы хотите изучать SEO бесплатно и оставаться в курсе? Узнайте, нажав здесь, как подписаться на мою рассылку, мой подкаст или мой канал на YouTube , войдите и посмотрите или прочитайте без обязательств, а затем решите, стоит ли регистрироваться или нет (и вы должны это сделать, поверьте мне!)

Похожие

Комментарии