Unlimited AE and Premiere Pro templates, videos & more! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Photo & Video
  2. Metadata
Photography

Из Lightroom в WordPress: Как Использовать SEO-Оптимизацию для Изображений

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Digital Asset Management for Photographers (Learning Resource Guide).
How to Organize Your Photos in WordPress With WP Real Media Library
Getting Started With Photos for OS X

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

На базеWordPress  создается 25%  веб сайтов в сети.  Большинство сайтов таких как The New York Times, CNN, и Forbes – все они используют силу WordPress . 

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

SEO оптимизация Изображений Для Начинающих     

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

Семантическая информация 

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

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

Google просматривает теги скрытые в нашем HTML коде, чтобы найти изображения.  Мы можем добавить такие переменные как titles, tags и alt-текст в код нашей веб –страниц, чтобы сайт можно было легче проиндексировать. Нет, конечно, никаких гарантий, что при добавлении семантической информации, вы окажетесь на первой странице по запросу в Google, но использование некоторых SEO элементов, определнно могут увеличить ваши шансы на успех.   Это также хорошая гигиена для данных!

Вот четыре ключевых элемента для SEO оптимизации, которые стоит добавить к вашим изображениям:

Имена Файлов

Если вы еще этого не сделали, то задайте описательные имена вашим файлам.  Простое имя такое как «урок-изменение_размеров-изображения.jpg», гораздо лучше, чем "IMG_9052.cr2." Использование слов, которые описывают изображение, увеличивает шансы того, что картинка будет найдена. 

При экспорте из Lightroom, моим любимым способом делать это – использовать раздел "File Naming"  в окне экспорта.  Помните, что мы хотим задать имя для экспортируемого изображения, а не для оригинального файла. Найдите раздел File Naming и отметьте галочкой Rename To.  Дале выберите выпадающее меню где можно выбрать "custom name" , чтобы мы теперь могли добавить свой текст.

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

Custom Name - Sequence
Используйте опцию custom name, чтобы помочь вашему файлу найтись на просторах интернета. Несколько слов описывающих изображения, могут быть очень полезны!

Alt- текст

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

Возможно вы никогда не увидите alt-текст; но важно то, что поисковые системы увидят его. 
Image alt text
Alt-текст для картинки так же должен быть вставлен в HTML код.  Он должен кратко описывать, что изображено на снимке.  Мы можем автоматически вставить alt-текст в WordPress Media Library, и WordPress автоматически его добавит.

Alt-тест встраивается в то же место в коде HTML, где находится ссылка на ваше изображение. Используйте его, чтобы добавить описание к картинке.  Небольшое описание содержимого снимка, может быть очень критичным с точки зрения дружественности SEO.  Если вы не пишете сами код для страниц сайта, не переживайте; мы рассмотрим, как добавить alt-текст используя WordPress, в следующем разделе этого урока. .

Кроме того, наличие alt‑текста очень важно для людей у которых проблемы со зрением.  Программы – ридеры,  разработанные специально для с людей с полной или частичной потерей зрения, встречая картинку, зачитывают ее alt-текст. У Amherst College есть отличное руководство по тому, как оптимизировать веб-страницу для людей с ограниченными возможностями

Название 

Название для картинки так же должно быть вставлено в HTML тэг.  Название – это более короткая версия описания, с использование несколько слов, которые обозначают, что изображено на картинке.

Image title text
Вы так же должна вставить название в поле тега "title=" в коде HTML в одном блоке с картинкой. Опять же, это очень легко делается в WordPress. 

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

Подпись 

Подпись это текст, который показывается вслед за картинкой и дает дополнительные комментарии.  Подписи не добавляются непосредственно в тег изображения, но конечно, дополняет его. В HTML 5, тег <figcaption> часть группы <figure>, что даже лучше. Вы можете больше узнать, о том, как правильно делать подписи в уроке Доны Остерхофф Подпись, описание, заголовок, ALT-текст: Как Добавить Семантическую Информации к Вашим Снимкам. Умение писать правильные подписи - это один из самых недооцененных навыков, который будет полезен каждому фотографу!

Перенос метаданных из Lightroom в WordPress

Теперь, когда мы разобрались с основными элементами SEO для изображений, давайте разберемся как нам легко и просто добавить эти элементы на наш сайт созданный на основе WordPress. Мы легко можем перенести элементы title (название) и caption (подпись) из нашего Lightroom каталога в WordPress.

В  модуле Lightroom - Library, найдите панель metadata с правой стороны. Мы там можем найти для изображения название и подпись.

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

Include metadata on export
Убедитесь, что при экспорте вы записываете в изображение все метаданные. Тогда они будут доступны в WordPress.

Загрузка в WordPress

После того, как вы аккуратно экспортировали названный файл изображения с набором title и caption, вы готовы загрузить его на WordPress. В WordPress зайдите в  Media Library и загрузите изображение как обычно. Загруженные изображения будут иметь те же title и caption, что у нас было и подобных разделах в Lightroom.

Image Uploaded to WordPress
Наконец плоды нашего труда! Наши поля titles и caption заполнены так же как и в Lightroom.

Alt-текст для изображения в WordPress вам придется добавить вручную. К сожалению, в Lightroom нет такого поля, которое бы соответствовало "альтернативному тексту" в WordPress. Помните, что это текст, которой скрыт в HTML коде, который помогает поисковым системам найти и проиндексировать ваше изображение.

Alt text
Альтернативный текст должен быть добавлен в WordPress Media Library. 

После того, как вы введете Alt-текст, нажмите Update, чтобы сохранить изображение.  Когда вы вставите картинку на страницу или пост,  WordPress позаботится о метаданных и добавит их в HTML код. 

Эти шаги – самая главная помощь в оптимизации изображений для интернета.  Теперь ми можем перейти к другим шагам – изменению размера и сжатию изображений для размещения онлайн.

Изменение Размера Картинок для Размещения их в Интернете

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

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

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

Размер 

Размер цифрового изображения – это его ширина и высота, которые измеряются в пикселях.  Когда говорят «изображение размером 600х400 пикселей» это значит, что оно состоит 600 пикселей в ширину и 400 пикселей в высоту.

 Изображение снятое на мой Canon 6D имеет размер 5472 x 3648 пикселей. Позже вы увидите ее на Tuts+, где она ограничена макетом до размера 850 пикселей по длинной стороне. Теоретически, я могу загрузить несжатое изображение, но вне зависимости от этого, при отображении ей будет выделено 850 пикселей.

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

Web Size Simulation
Эта модель иллюстрирует как велика 10 мегапиксельная картинка, и какой маленькой она выглядит в интернете. Большое превью для картинки, которое вы видите  - это масштабированная версия 10 мегапиксельного снимка. А на вставке, для сарвнения показано, как она выглядит на сайте Tuts+. Какртинка размером в 10 мегапикселей, в ширину размером больше 4000 пикселей, в тов время как на сайте Tuts+, она появляется в размере 850 пикселей по длинной стороне. Это хорошо иллюстрирует, почему так важно изменять размер картинки.

А какой же правильный размер для картинки, размещаемой в сети? Ответ - "зависит от того, где размещать". Если вы будете использовать ее на сайте, созданном на основе WordPress, проверьте документацию, какую ширину картинки поддерживает ваша тема. Разработчик, определяет, в каком виде картинка будет появляться в теме WordPress. Если документация вам не доступна, попробуйте  такой сайт как PiliApp, который поможет вам определить, какой размер картинки вам желательно использовать при публикации.

Качество

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

Когда вы используете экспорт в Lightroom, вы можете регулировать качество изображения на выходе с помощью ползунка Quality. Он имеет шкалу от 0 до 100, где 0 - это самое маленькое качество рендеринга с наименьшим размером. А 100 качество увеличивает и качество и размер.

Image quality comparison
На этом изображении показана разница, между одним снимком с разным качеством. Разницу можно заметить в деталях, а так же в цвете неба. Заметьте, что на картинке низкого качества, появляются изогнутые линии на небе, а на картинке высокого качества этого конечно же нет. Размер файла при качестве 25 - составил 91Кб, а при качестве 100 - 366Кб. Важно найти баланс между качеством и размером.

Один из моих любимых способов, контролировать размер картинки -  это использовать опцию "Limit File Size To". Я часто использую эту опцию, когда экспортирую изображения для публикции на Tuts+, учитывая, что лимит для размера картинки при публикации на Tuts+ - 150Кб.

Использование "Limit File Size To" исключает необходимость использовать ползунок для качества. Вместо того, что выставлять качество от 0 до 100, вы можете просто установить максимальный размер в (килобайтах) и тогда Lightroom выберет нужную установку для качества за вас.

Limit File Size screenshot
Окно "Limit File Size To" можно использовать вместо ползунка Quality. Когда вы отметите чекбокс, напротив окна, выберите максимальный размер для вашего изображения, и Lightroom сделает остальную работу.

На моем собсвенном опыте, если я использую ползунок для качества, при размещении картинок в сети, то я выставляю его в диапазоне 60-75. Это подходящий диапазон для размера и качества. Если подвинуть ползунок выше этого диапазона, то у вас получитсья заметное увеличение размера файла, без особо различимых отличий в качестве.

Если вы хотите узнать побольше об изменении размеров картинок для публикации в сети, то вы можете посмотреть мой урок, который я опубликовал в прошлом году, Как Экспортировать Снимки в JPG из Adobe Photoshop Lightroom для Публикации в Сети. Хотя основной фокус этой статьи - это подготовка метаданных для SEO, размер файла, так имеет значение для поисковых систем.

Подводим Итоги и Продолжаем Обучение

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

Важно отметить, что есть так же ряд плагинов для WordPress или аддонов, которые могут помочь вам автоматизировать процесс. Однако плагины, которые не часто обновляются, могут сделать уязвимой безопасность вашего сайта. Вам так же нужно заручиться поддрежкой разработчика, по поводу совместимости плагина с обновлениями WordPress. Два самых популярных плагина, это - WP/LR Sync и LR/Blog.

Если вы хотите узнать больше о WordPress, то в разделе Code на Tuts+, есть огромное количество материала, по изменению и расширениям WordPress. А в разеделе Фото и Видео, вы можете найти подробные материалы по Adobe Lightroom, которые помогут развить ваши навыки.

И наконец, SEO - это постоянно меняющаяся область. Google постоянно изменяет свои алгоритмы, по которым находятся страницы, соответствующие запросу. Существует куча плохих посказок и советов, по поводу SEO. Мой самый любимый ресурс на тему SEO - Moz Blog. На замечательном Smashing Magazine, вы также можете найти много описаний, о том как создать SEO оптимизированный сайт.

Как вы готовите свои картинки к публикции в сети? Расскажите об этом в разделе комментариев.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.