Разное

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

Содержание

Подбираем правильные названия к вашим фотографиям

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

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

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

Прямо к контексту

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

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

Отголосок неизведанного


Фото:Jorge Maia

Дерево дракона


Фото: Jeremy Cram

Горстка счастья (Первые шаги)


Фото: Silvia S

Вера


Фото: Mohammed Baqer

Без улыбки


Вото: Dennis Bautista

Дышать


Фото: Beata Rydén

Настроение в словах

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

Только в бурю


Фото: Carlos Gotay

Она вернется


Фото: Bob Gala 

Секрет


Фото: EwanBrise TomFarbe

Я не боюсь


Фото: Marco Barchesi

Мелодия в тиши


Фото: Artur Saribekyan

Час пик


Фото: Caras Ionut

Жизнь прекрасна


Фото: Alena Root

Творческий подход

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

Ключ


Фото: Hengki Lee

В радугах


Фото: Super Pipo

Стрижка


Фото: Ari Johannesson

Русалка


Фото: Super Pipo 

Супермен


Фото: Fabian Roth

Все вокруг меня


Фото: Super Pipo 

Открытие


Фото: Adam Dimech

Заключение

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

как выйти в топ поиска по картинкам

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

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

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

1. Используйте качественные и релевантные изображения

У изображения должна быть цель

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

Как проверить картинку на оригинальность

Не используйте изображения, защищенные авторским правом

Картинки с фотостоков можно улучшить

3. Названия файлов важны: замените «DSC1234.jpg» на понятное название

Оптимизация фото для интернет-магазина

4. Выберите правильный формат изображения

5. Сжимайте изображения в меру: картинка не должна сильно терять в качестве

Насколько большими должны быть файлы изображений?

Как уменьшить вес изображений

Сервисы для сжатия картинок

Повышаем скорость загрузки за счет превью

6. Загружайте на сайт изображения точно по размеру

7. Используйте адаптивные картинки

8. Заполните атрибуты title и alt

9. Создайте Sitemap-файл для изображений

10. Добавьте подписи к изображениям

11. Используйте микроразметку Open Graph и Twitter Card

Open Graph

Twitter Cards

12. Структурированные данные Schema.org — для лучшего отображения в поиске

13. Размещайте изображения на своем хостинге

Несколько слов от поисковых систем

Чек-лист: обязательные условия оптимизации картинок

1. Используйте качественные и релевантные изображения

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

Ваш Кэп.

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

Размещайте изображения рядом с текстом, который они иллюстрируют.

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

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

Качественная картинка иллюстрирует и дополняет заголовок новости

У изображения должна быть цель

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

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

Здесь показан конечный результат

А здесь — процесс работы

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

Например, в блоге PromoPult мы часто рассказываем о работе с различными инструментами и наглядно показываем настройки с помощью скриншотов. На скриншоте — пример из статьи о частых ошибках в Google Analytics.

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

Например, это изображение очень симпатичное, но использовано уже на сотнях сайтов, посвященных фрилансу

Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку.

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

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

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

Как проверить картинку на оригинальность

  • С помощью сервиса TinyEye.

TinyEye — бесплатный сервис для проверки уникальности картинки

Здесь можно загрузить изображение или указать ссылку на него. Сервис проверит его и выдаст 0 результатов, если изображение уникальное:

Если же картинка уже используется на каких-либо сайтах, то TinyEye покажет список этих сайтов:

  • Проверить, есть ли изображение в индексе поисковых систем.

Например, загрузите фотографию в Яндекс.Картинках. Если в индексе поисковика ее нет, то вы увидите такое:

Если картинка есть в индексе, то Яндекс это покажет:

Не используйте изображения, защищенные авторским правом

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

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

Подробнее о типах лицензий на изображения.

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

В Google Картинках вбейте поисковый запрос, а затем выберите Инструменты > Право на использование > С лицензией на использование (или С лицензией на использование и изменение).

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

О поиске бесплатных картинок можно почитать в справке Google.

Есть много фотостоков с качественными и небанальными фотографиями, доступными для коммерческого и некоммерческого использования. Список таких ресурсов — здесь.

Картинки с фотостоков можно улучшить

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

Например, вот такая картинка:

…обретает новую жизнь в блоге Максима Ильяхова с его фирменной оранжевой рамкой.

Для такого оформления необязательно быть мастером Фотошопа. Достаточно онлайн-сервисов, таких как Canva или Crello.

3. Названия файлов важны: замените «DSC1234.jpg» на понятное название

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

Помимо универсальных атрибутов title и alt (о которых мы еще поговорим) роботы Яндекса и Google обращают внимание на название загруженного файла. Название должно соответствовать содержимому картинки. Например, если на фотографии — шоколадный торт, то стоит заменить набор букв и цифр, автоматически сгенерированных камерой, на название:

Правильно

shokoladnyj_tort_s_kremom.jpg

Неправильно

DSC4980.jpg

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

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

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

Хорошее название файла. Робот просканирует его и «поймет», что изображено на картинке

Такое название не дает никакой полезной информации поисковому роботу

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

Оптимизация фото для интернет-магазина

Если у вас интернет-магазин и вы размещаете много фотографий товаров, можно пойти еще дальше.

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

Подумайте о том, как пользователи ищут товары на вашем сайте. Какие шаблоны названий они используют при поиске? Люди, которые ищут эйр максы, могут вбивать поисковый запрос по-разному:

  • кроссовки Nike air max мужские,
  • мужские кроссовки air max Nike,
  • мужские Nike air max,
  • найки эйр макс
  • и так далее.

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

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

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

4. Выберите правильный формат изображения

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

Нет правильного или идеального формата для изображений. Все зависит от типа картинки и как вы планируете ее использовать.Чаще всего используются такие форматы: JPEG, PNG, GIF. Их поддерживают все браузеры и поисковые системы. Реже — SVG и WebP.

Вот несколько рекомендаций:

  • Для интернет-магазинов оптимальный вариант — JPEG. Этот формат дает лучшее качество при наименьшем размере файла. Также рекомендуется использовать JPEG для больших фотографий или иллюстраций.
  • PNG используйте, если нужно сохранить прозрачность фона. Остальные форматы не поддерживают эту возможность. Иногда PNG выигрывает у JPEG и по весу файла.
  • Для логотипов и иконок используйте векторный SVG. С помощью CSS или JavaScript вы можете управлять картинками в формате SVG. Например, менять их размер без потери качества.

Вместо JPEG и PNG можно использовать малоизвестный формат WebP. Этот формат сохраняет высокое качество при еще меньших размерах файла. Конвертировать фотографию в WebP можно с помощью Squoosh. Правда, есть нюанс — формат WebP не поддерживается браузером Safari.

5. Сжимайте изображения в меру: картинка не должна сильно терять в качестве

Стоит учитывать, что Google использует время загрузки страницы как один из факторов ранжирования.

Можно пойти двумя путями:

  1. Уменьшить вес файлов изображений на сайте.
  2. Оптимизировать способ отображения картинки — показывать превью.

Насколько большими должны быть файлы изображений?

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

Как уменьшить вес изображений

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

Вес изображения можно уменьшить при экспорте картинки в Фотошопе (Файл > Экспортировать > Сохранить для Web), просто снизив качество.

Что здесь можно сделать:

  • Выбрать JPEG-формат.
  • Немного снизить качество (до 60-80%).
  • Изменить размеры изображения.

Для примера, картинка в формате PNG-8 и размером 3000х3000 пикселей занимает 2,18 Мб:

Неоптимизированная фотография

Сохраняем ее в JPEG, снижаем качество до 80%, а также уменьшаем размеры до 1500х1500 пикселей. Вес после оптимизации — 250,2 Кб.

Вес оптимизированной фотографии почти в 9 раз меньше

Сервисы для сжатия картинок

Если вы не мастер Фотошопа (и не купили лицензионную версию), можно воспользоваться одним из сервисов для сжатия картинок.

JpegMini — позволяет уменьшать вес картинок до 80%.

ImageOptim — десктопная программа для Mac. Позволяет оптимизировать картинки без потери качества. Программа удаляет из файла картинки метаданные: местоположение GPS, серийный номер камеры, данные о снимке и т.д. Работает с форматами JPEG, SVG , GIF и PNG.

Compressor — бесплатный онлайн-сервис. Может сжимать до 90%. Правда, в сервис нельзя загружать картинки весом более 10 Мб.

TinyPNG и TinyJPG — онлайн-сервисы для сжатия PNG и JPEG-изображений. Бесплатно можно одновременно загружать до 20 файлов весом до 5 Мб каждый. Степень сжатия — более 70%.

Compressjpeg — сервис для пакетной загрузки и оптимизации изображений (до 20 файлов одновременно).

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

После оптимизации изображений проверьте скорость загрузки страницы с помощью Google PageSpeed Insights.

Повышаем скорость загрузки за счет превью

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

Уменьшенная версия изображения в карточке товара, размер — 245х245 пикселей. Вес файла — 6,5 Кб.

Изображение можно посмотреть в большем размере — 500х500 пикселей. Вес этого файла — 26,1 Кб.

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

Помните: каждая лишняя секунда загрузки обходится вам потерями трафика.

6. Загружайте на сайт изображения точно по размеру

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

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

Что с этим делать?

Создавайте изображения в том размере, в котором они должны отображаться на сайте. Размер можно изменить в Фотошопе. Выберите Изображение > Размер изображения:

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

Посмотрите, как много лишнего «веса» картинки мы можем убрать таким способом:

Изменение размеров позволяет в 130 раз уменьшить вес файла с картинкой

Если не можете использовать Фотошоп, можно воспользоваться онлайн редакторами (например, PIXLR) или сервисами по обработке картинок. Например, ресайз картинок от Slide.ly позволяет подогнать иллюстрацию под форматы соцсетей или произвольный размер.

Пример

В карточках новостей картинки отображаются в уменьшенном виде. Смотрим код — изображение меньшего размера:

На странице новости отображается полноразмерная картинка большего разрешения:

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

7. Используйте адаптивные картинки

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

Например, вы разместили фото в разрешении 800х400 пикселей:

  • Один пользователь зайдет на сайт со смартфона, и фотография будет смотреться нормально.
  • Другой пользователь использует iMac с retina-дисплеем. На таком дисплее картинка будет отображаться с существенной визуальной потерей качества.

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

Используйте для этого атрибут srcset. С его помощью можно указать в элементе <img> несколько версий одного изображения для экранов разных размеров.

Вот так выглядит html-код:

<img srcset="example-320w.jpg 320w,
             example-480w.jpg 480w,
             example-800w.jpg 800w"
    
     src="example-800w.jpg" alt="адаптивная страница">

А так это реализовано у Лайфхакера, например:

В исходном коде страницы указаны ссылки на картинки разного размера для адаптации под различные устройства

8.

Заполните атрибуты title и alt

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

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

При наведении курсора на картинку всплывает текст из атрибута title

Вот так выглядит код, в котором заданы атрибуты title и alt:

<img alt="Фото необычной островной кухни" src="https://designmyhome.ru/sites/default/files/styles/large/public/inline/images/14/neobychnaya_ostrovnaya_kuhnya.jpg" title="Необычная островная кухня">

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

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

Картинка не грузится, но, по-крайней мере, можно понять о чем она

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

  • Если картинка не загрузится, браузер покажет описание и пользователь сможет хотя бы понять, что он должен был увидеть.
  • Полезно для ранжирования. Используйте ключевые слова в атрибутах. Это поможет поисковым роботам понять, что изображено на картинке, и затем предлагать ее в ответ на релевантный запрос пользователей в поиске по картинкам.
  • Альтернативное описание может служить как анкор для внутренней ссылки, если изображение — это ссылка на другую страницу сайта.

Вот несколько простых правил для атрибутов alt:

  • Заполняйте атрибуты alt для каждого изображения (особенно это касается фотографий товаров).
  • Описание должно быть коротким, написано простым языком.
  • Если вы продаете товары с номерами моделей или серийными номерами, используйте их в атрибутах alt.
  • Размещайте в alt только те ключевые слова, которые относятся к изображению.
  • Избегайте переспама.

Хороший пример того, как правильно заполнять атрибут alt, приводит Google в справке для вебмастеров:

9. Создайте Sitemap-файл для изображений

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

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

Для картинок можно создать отдельный XML-файл или обновить существующую карту сайта.

В Sitemap-файле для изображений (в отличие от обычных XML-файлов) можно указывать URL с других доменов. Это позволяет использовать CDN (Content Delivery Network — сеть доставки контента) для размещения графических файлов.

Пример кода:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="https://www.yandex.ru/schemas/sitemap-image/1.1">
  <urlv
    <loc>http://example.com/primer.html</loc>
    <image:image>
      <image:loc>http://example.com/image.png</image:loc>
      <image:geo_location>Карелия</image:geo_location>
    </image:image>
  </url> 
</urlset>

С помощью такого синтаксиса можно указать до 1000 изображений для одной страницы.

Подробнее о Sitemap-файлах для изображений: справка Google, справка Яндекс.

Для сайтов на WordPress есть специальный плагин Google XML Sitemap for Images, который автоматически создает Sitemap-файл для всех изображений, которые вы загружаете на сайт.

10. Добавьте подписи к изображениям

Подпись — это текст, сопровождающий изображение на странице. Например, так:

Так выглядят подписи к картинкам. Кстати, то, что вы сейчас читаете — тоже подпись

Почему важно добавлять подписи? Потому что люди обращают на них внимание при быстром сканировании страницы.

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

Что можно сделать в подписи:

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

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

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

Пример уточняющей подписи в статье о карте сайта

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

Специальный класс для картинок с подписью

11. Используйте микроразметку Open Graph и Twitter Card

Микроразметки Open Graph и Twitter Cards нужны для того, чтобы настроить внешний вид поста в социальных сетях при репосте статьи с сайта.

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

И когда пользователи захотят поделиться статьей у себя в соцсетях:

  • такой пост будет выглядеть привлекательно;
  • подтянется нужная картинка с правильными размерами;
  • ссылка будет иметь правильный заголовок и описание.

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

Open Graph

Разметка Open Graph — разработка Facebook. Кроме Facebook, ее также используют несколько других соцсетей: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest.

Вот как выглядит пост в Фейсбуке, если мы размещаем ссылку на статью с разметкой Open Graph:

А так — если на странице нет микроразметки:

Код микроразметки Open Graph для изображений выглядит так:

Микроразметка Open Graph в исходном коде страницы

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

А еще у нас есть подробная статья о разметке Open Graph.

Twitter Cards

Twitter Cards отвечает за внешний вид постов в Твиттере. Если этой разметки нет, Твиттер использует Open Graph.

Так выглядит код с разметкой Twitter Cards:

Микроразметка Twitter Cards в исходном коде страницы

Подробнее о микроразметке Twitter Cards — в руководстве Твиттера.

Как добавить

Для сайтов на WordPress микроразметку можно добавлять автоматически с помощью плагинов Yoast SEO или All In One Seo Pack.

Также есть плагины и для других CMS:

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

12. Структурированные данные Schema.org — для лучшего отображения в поиске

Еще один вид микроразметки, который стоит использовать — Schema.org. С ее помощью вы можете точно указать поисковым системам, какой тип контента представлен на странице.

В основном Schema. org влияет на внешний вид сниппетов в поисковой выдаче, но также может учитываться и в поиске по картинкам.

Например, в Google Картинках изображения из карточек товаров (размеченных с помощью Schema.org) будут отображаться со специальным значком «Продукт»:

В Google Картинках поддерживаются структурированные данные для нескольких типов контента:

  • товары,
  • видео,
  • рецепты.

Пример кода разметки для товара:

Разметка Schema.org для страницы товара

Подробнее о разметке можно почитать в справочных материалах Google:

13. Размещайте изображения на своем хостинге

Иногда изображения размещают на сторонних ресурсах (например, на хостингах для картинок Imgur, FactPic или других). Это делают для экономии места на собственном хостинге.

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

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

Сети доставки контента (CDN)

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

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

Рекомендации:

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

Несколько слов от поисковых систем

Google рекомендует:

  • Использовать только те изображения, которые вписываются в контекст страницы и дополняют остальное содержание по смыслу.
  • Не использовать неоригинальные изображения.
  • Размещать картинки рядом с релевантным текстом.
  • Заполнять атрибуты alt.
  • Уделять внимание качеству и содержанию страниц. Google учитывает качество информации с сайта при ранжировании картинок. А также может использовать фрагменты текста страницы в описаниях к изображению в Google Картинках.
  • Прорабатывать структуру URL для изображений, так как кроме названий файлов картинок Google также учитывает пути в URL.
  • Оптимизировать сайт под просмотр с мобильных устройств.

Яндекс рекомендует:

  • Размещать качественные изображения.
  • Уделять внимание качеству сайта в целом.
  • Всегда прописывать атрибуты title и alt.
  • Прилегающий к изображениям текст должен быть релевантным картинке.

Чек-лист: обязательные условия оптимизации картинок

  1. Размещайте только релевантные изображения. Они должны дополнять основной контент страницы или объяснять что-то быстрее и лучше, чем текст.
  2. Используйте оригинальные изображения или изображения с открытой лицензией. В России уже есть случаи, когда за использование чужих фотографий приходится выплачивать штрафы.
  3. Давайте файлам изображений понятные названия.
  4. Выбирайте оптимальный формат. Для большинства случаев подойдет JPEG.
  5. Сжимайте картинки, если визуально не будет заметно потерь качества.
  6. Загружайте изображения в тех размерах, в которых они будут отображаться на сайте.
  7. Для разных экранов — разные версии одного изображения.
  8. Обязательно прописывайте title и alt.
  9. Добавьте список изображений в Sitemap-файл.
  10. Подписывайте изображения, если это полезно для пользователей.
  11. Позаботьтесь о внешнем виде постов в соцсетях с ссылками на ваши статьи. Тут вам помогут OpenGraph и Twitter Cards.
  12. Используйте Schema.org.
  13. Лучше размещать медиаконтент на своем хостинге. Если его слишком много — используйте CDN.

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=”0″ в тег <img>.

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

Синтаксис

HTML
<img src="URL" alt="альтернативный текст">
XHTML
<img src="URL" alt="альтернативный текст" />

Атрибуты

align
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
Альтернативный текст для изображения.
border
Толщина рамки вокруг изображения.
height
Высота изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
lowsrc
Адрес изображения низкого качества.
src
Путь к графическому файлу.
vspace
Вертикальный отступ от изображения до окружающего контента.
width
Ширина изображения.
usemap
Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG</title>
 </head>
 <body> 

  <p><a href="lorem.html"><img src="images/girl.png" 
  alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>

 </body>
</html>

‎App Store: Google Фото

Google Фото – это удобный сервис для хранения фотографий и видеороликов.

Лучшее фотоприложение на Земле. – The Verge
Google Фото – новое приложение для управления фото и видео, без которого невозможно обойтись. – Wired
Просто загрузите изображения, а Google Фото сделает за вас все остальное. – The New York Times

• ЭКОНОМИЯ ПРОСТРАНСТВА НА УСТРОЙСТВЕ. Заканчивается свободное место? Вы можете быстро удалить с устройства снимки, уже загруженные в Google Фото, не опасаясь их потерять.

• ВИЗУАЛЬНЫЙ ПОИСК. Теперь вы можете искать фотографии по изображенным на них людям, местам и объектам, даже если на снимках нет отметок.

• ФИЛЬМЫ И АНИМАЦИИ ИЗ ВАШИХ ФОТОГРАФИЙ И ВИДЕО. Google Фото автоматически создает фильмы, коллажи, анимации и многое другое на основе ваших снимков. Вы также можете делать это сами.

• СОВРЕМЕННЫЕ ИНСТРУМЕНТЫ РЕДАКТИРОВАНИЯ. Преображайте фотографии одним касанием: применяйте фильтры, распознающие, что изображено на снимке; настраивайте освещение или используйте другие эффективные инструменты для обработки.

• АВТОМАТИЧЕСКИ СОЗДАВАЕМЫЕ АЛЬБОМЫ. Сделайте свои истории ещё интереснее. Google Фото автоматически соберет ваши лучшие фотографии с прошедшего события в новый альбом, а вы сможете пригласить других пользователей добавлять в него свои снимки.

• ЖИВЫЕ АЛЬБОМЫ. Благодаря живым альбомам делиться снимками стало ещё проще. Google Фото может сразу после съемки автоматически добавлять в альбом фотографии, на которых есть выбранные вами люди или животные. Эти снимки сразу становятся доступны тем, у кого есть доступ к альбому, и вам не придется делиться ими вручную.

• ОБЩИЕ БИБЛИОТЕКИ. Вы можете предоставить выбранному пользователю доступ ко всем своим фотографиям.

• ТРОГАТЕЛЬНЫЕ ВОСПОМИНАНИЯ. Google Фото автоматически создает коллажи из старых фотографий, снятых в этот день год назад.

• ПОДДЕРЖКА CHROMECAST. С помощью Chromecast можно смотреть фотографии и видео на телевизоре.

• НЕОГРАНИЧЕННОЕ И БЕСПЛАТНОЕ ПРОСТРАНСТВО ДЛЯ ХРАНЕНИЯ. Вы можете загружать любое количество фотографий и видео совершенно бесплатно. Единственное ограничение: разрешение видео не должно превышать 1080p HD, а снимков – 16 Мпикс. Ваши фото и видео доступны только вам с любого устройства, подключенного к Интернету, а также на сайте photos.google.com.

Вы можете приобрести дополнительное пространство в хранилище аккаунта Google для файлов Google Диска и Gmail (если вы храните фотографии и видео в исходном качестве), оформив подписку Google One. Ее стоимость начинается от 1,99 доллара США в месяц за 100 ГБ (в США). Цены и доступность подписки зависят от страны.

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

Политика конфиденциальности Google: https://google. com/intl/ru_RU/policies/privacy.
Условия использования Google One: https://one.google.com/terms-of-service.

Учтите, что группировка по лицам доступна не во всех странах.

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

1.Рассмотри картинки датчиков. Напиши название каждого из них. Покажи стрелкой соответствие

Выбери ОПТИЧЕСКИЕ НАКОПИТЕЛИ (несколько вариантов ответа) *флешкаCD-дискиDVD-дискидискетакарта памятижесткий диск​

Проект № 8 «Мой компьютер будущего»Требования1. Использовать графическийредактор Paint.2. Нарисовать в графическомредакторе свой компьютербудущего.3.О … тредактировать рисунок.4.в программе PowerPointсоздать слайд и поместить туда рисунок.5. Написатьрисунку небольшойтекст на тему«Мой компьютер будущего».6. Презентовать проект на интерактивной доске. 7. Сохранить проект в папке «Мой проект».оВыводПосле завершения проектных работ сделай выводы.Обсуди с одноклассниками, как задание помоглоосвоить материал, было ли тебе трудно выполнятьзадания.к это информатика просто напишите ответ ​

30 баллов 1.Поясніть правила виконання циклу for. 2.Яких значень набуває змінна х у ході виконання циклу: for х in range(5)? 3.Яких значень набуває зм … інна х у ході виконання циклу: for х in range(0, 10, 2)? 4.Що буде надруковано в ході виконання циклу: s = ‘цикл’ b = [1,3,5,7,9] for х in s: for х in b: print (x) print (x)

по информатике, нужно сделать доклад, до 19 мая.Тема: “Береги планету” надо сделать на эту тему доклад (в word, wordpad) и презентацию количество слай … дов определить самостоятельноОСТАЛОСЬ 3 ДНЯ НУЖНО СПЕШИТЬ!!!​ Даю 40 б​

по информатике, нужно сделать доклад, до 19 мая.Тема: “Береги планету” надо сделать на эту тему доклад (в word, wordpad) и презентацию количество слай … дов определить самостоятельноОСТАЛОСЬ 3 ДНЯ НУЖНО СПЕШИТЬ!!!​

OTHMON1. Как скачивать файлы из Интернета?2. Как открыть общий доступ к файлам?3. Что такое утилиты?4. Назови ресурсы, необходимые для заи папки. пож … алуйста СРОЧНО пожалуйста​

Бесконечным множеством является множество: Выберите один ответ: a. цифр b. целых чисел c. букв d. фильмов

Задание.сделайте подборку компьютеров и по следующим параметрам: 1Компьютер/системный блок для офисной работы. Опишите название процессора,его тактову … ю частоту,объём оперативной памяти,тип видеокарты,объём видеопамяти,тип жёсткого диска и его объём 2. Компьютер/системный блок для видео монтажа.Опишите название процессора,его тактовую частоту,объём оперативной памяти, тип видеокарты,объём видеопамяти,тип жёсткого диска и его объём.

Напишите имя “настя” с помощью чертежника,приложение кумир!!! Только с алгоритмами!!!!

. Создайте проект, при исполнении которо-го из фигур будет построено изображение робота(В лазарус)​

Породы кошек фото, названия и описание в каталоге на официальном сайте корма Бош


Породы кошек

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

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

Описания, фотографии и характер

Для будущих хозяев грациозных созданий чрезвычайно полезным окажется раздел о характере различных пород кошек и котят. Здесь Вы можете узнать, как питомец склонен общаться с людьми – ласковый и доверчивый или подчёркнуто независимый и даже иногда агрессивный? А быть может, котята – будущие отличные охотники, игривые и любопытные, а значит, запирать воинственного хвостатого в четырёх стенах будет невозможно. Подробное описание породы поможет не ошибиться с выбором. Особо отметим, что в каталоге представлены дорогие и редкие породы кошек.

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

Отдельная часть каждого описания пород кошек и котов в каталоге – это информация об уходе и питании. Заботливому хозяину важно подготовиться заранее к приходу питомца в дом и иметь представления об индивидуальных особенностях животного. Склонен ли кот к болезням и если да, то к каким? Что нужно делать для сохранения его иммунитета? Как правильно ухаживать за шерстью? Вот лишь некоторая часть вопросов, на которые Вы сможете найти ответы в каталоге с фотографиями пород кошек на официальном сайте корма Бош.

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


Рекомендованное питание

Если Вы хотите не просто побаловать любимую кошку вкуснейшим лакомством, но и обеспечить ей прекрасное самочувствие, активную жизнедеятельность и каждодневный тонус, то сложно придумать что-то лучше специальных кормов Sanabelle. Сухие корма для кошек Sanabelle – это только натуральные ингредиенты, отборное свежее мясо, отсутствие пищевых красителей. Ни один продукт не содержит сои, кукурузы и ГМО. Такое питание станет настоящим подарком Вашему пушистому любимцу и лучшим свидетельством заботливого к нему отношения и нежных чувств. 

Изображения

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

Файлы

  • Формат — JPEG или PNG.
  • Разрешение — от 700 до 1600 пикселей по большей стороне (без учета белых полей).
  • Размер — не больше 8 МБ.
  • Фон — белый или светлый. Для белых или прозрачных товаров допустим черный фон. Для категории товаров Одежда, обувь и аксессуары фон серый (#f2f3f5). Рекомендации по обработке изображений для этой категории

Главное изображение

  • На изображении фотография, которая соответствует названию и описанию товара.

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

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

  • На изображении нет:

    • Рекламы, логотипов, водяных знаков, цен — если это не часть товара.
    • Посторонних предметов или надписей. Например, «Распродажа».
    • Вариаций товаров. Например, товаров разных цветов.

  • Фотография цветная и хорошего качества.

  • Фотография четкая, товар находится в фокусе.

  • Если вы добавляете изображения в личном кабинете — название файла с изображением должно совпадать с артикулом товара. Запрещенные символы в названии: «/» и «_». Если артикул вашего товара содержит один из этих символов, укажите другой Артикул фото с помощью шаблона для загрузки товаров. Этот артикул не должен содержать запрещенных символов и совпадать с артикулами других ваших товаров.

Чтобы указать артикул фото:

  1. В личном кабинете скачайте шаблон для загрузки товаров.

    Подробнее о загрузке товаров в XLS-файле через шаблон

  2. В шаблоне откройте лист Шаблон для поставщика.

  3. Для каждого товара заполните столбцы:

    • Артикул — артикул вашего товара.
    • Артикул фото — название файла с изображением для его загрузки. Этот название не должно содержать символы: «/» и «_» и совпадать с артикулами других ваших товаров.

  4. Загрузите заполненный шаблон.

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

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

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

Дополнительные изображения

  • Для продуктов есть изображение с составом — если его нет в описании.
  • Изображения соответствуют названию и описанию товара.
  • Одно из изображений может быть коллажем.
  • Если вы добавляете изображения в личном кабинете — название должно содержать название главного изображения, символ «_» и порядковый номер дополнительного изображения. Запрещенный символ «/». Например: главное изображение — «DSPSWW42», тогда дополнительное — «DSPSWW42_1».

Для некоторых товаров можно добавить фотографии на человеке или в интерьере:

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

Изображения вариантов цвета товара

Фото 360

Фото 360 — 3D-фотография товара на его карточке на Ozon. Технически фото 360 представляет собой серию изображений, где на каждом изображении товар снят с разного ракурса. Ozon объединит загруженные вами изображения в фото 360. Требования к серии изображений:

  • Изображения соответствуют названию и описанию товара.
  • На изображении товар показан полностью. Должно быть понятно, как товар выглядит в использовании. Например, для постельного белья загрузите изображение белья на кровати, а не в упаковке.
  • Товар занимает большую часть пространства. Между границей изображения и товаром может быть пустое место, но не больше 2 пикселей.
  • Изображения четкие и цветные.
  • Минимальное количество — 15 изображений (лучше от 36 до 60). Чем их больше, тем плавнее обзор товара на Ozon.
  • Изображения расположены в логическом порядке. В галерее при их просмотре можно последовательно рассмотреть товар со всех сторон, изображения не перескакивают, масштаб товара не меняется.
  • Название каждого изображения не содержит запрещенный символ «/».

Ссылки на изображения

Только для товаров, которые вы загружаете в XLS-файле или через API.

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

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

Правильная ссылка:

  • Не содержит дополнительных портов.

    • Неправильно: :2020/image/cache/import_files/3f/3fe5a4ed-2dce-11e8-8264-1c6f65524f3c_3fe5a4ef-2dce-11e8-8264-1c6f65524f3c-1000×1000.jpeg
    • Правильно: beta. trendgu.ru/image/cache/import_files/3f/3fe5a4ed-2dce-11e8-8264-1c6f65524f3c_3fe5a4ef-2dce-11e8-8264-1c6f65524f3c-1000×1000.jpeg

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

  • Не требует авторизации для доступа к изображению.

  • Пример правильной ссылки: www.firestock.ru/wp-content/uploads/2014/05/shutterstock_46241326-700×624.jpg

  • Пример неправильной ссылки: https://yadi.sk/i/qUXcCwzmryWINw

Как получить прямые ссылки на изображения

Рекомендации по обработке изображений

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

Требования к изображениям для категорий товаров

Как назвать ваши изображения

Как назвать ваши изображения