SEO Картинки и видео на сайте не только иллюстрируют текст, но и влияют на трафик. Если картинки долго загружаются или залиты в плохом качестве, это негативно скажется на поведение пользователей и они уйдут с сайта.
Правильная SEO оптимизация картинок поможет этого избежать — пользователь часто не вчитывается в текст, а создает первое впечатление о сайте визуально, качественные картинки привлекают его внимание.
Оптимизировать изображения нужно, чтобы они быстрее загружались и меньше весили.
Сжимаем правильно
Используйте правильные форматы картинок, при размещении их на сайте.
Используйте формат .png (формат растровой графики) только для изображений где важно показать мелкие детали. В формате .png можно хранить полноцветные изображения. Но если такую фотографию просто уменьшить в размере, то на экранах с высоким разрешением они будут выглядеть размыто. При пересохранении картинки из формата .png в формат .jpeg прозрачность теряется.
Используйте формат .gif (формат растровой графики) для анимации, логотипов, схем с однотонными цветами, где не требуется множества оттенков. Формат использует только 256 цветов. Файл можно пересохранять сколько угодно раз, качество изображения не ухудшается.
Используйте формат .jpeg (формат растровой графики) для остальных изображений. Формат .jpeg это самый распространенный и самый легкий формат для размещения изображений на сайте. Основной минус этого формата — сжатие с потерями или, иными словами, чем чаще вы сохраняете файл с картинкой, тем хуже будет качество. Формат .jpeg2000 этот стандарт обладает большей степенью сжатия, то есть при одинаковом качестве этот файл будет весить меньше.
Для Гугл имеется дополнительный формат WebP ( сжатие изображений с потерями и без).
Формат .svg. Формат векторной графики. Поддерживает прозрачность, анимацию. Легко масштабируется без потери качества. Картинка в формате .svg состоит не из пикселей (поэтому она и не размывается), а из команд, с помощью которых и создается векторное изображение.
Масштабируем изображения
На большинстве сайтов часто используются изображения большего размер, чем необходимо. Админы вставляют те картинки, которые им дает заказчик, или те, которые у них имеются, так как не знакомы с тем, что перед вставкой картинки, ее необходимо оптимизировать.
Когда изображения большего размера, пользователь вынужден принимать лишние данные и скорость загрузки сайта снижается. Если время загрузки больше 3-4 секунд, пользователи уходят с сайта, так и не дождавшись окончания загрузки.
Прописываем мета данные изображения
Название файла картинки. Всем картинкам перед загрузкой на сайт присваиваем понятными названия *для людей*, используя латиницу. Прописываем Alt, Title, описание картинки.
Название картинки — Title. Когда пользователь наводит курсор на картинку на сайте, ему подсвечивается текст, который прописан в поле Title. Необходимо на русском языке прописать название изображения.
Описание файла -поле Alt. Описание файла улучшает ранжирование страницы в поисковой системе. Именно благодаря тегу Alt ваши картинки попадают в поисковую выдачу.
Обязательно добавляйте в мета -теги ключевые слова, соблюдая естественность предложения.
Используем разметку OpenGraph
Контент, опубликованный на сайте можно продвигать с помощью соцсетей. Чтобы на вашу статью или пост обратили внимание, его нужно красочно оформить.
Если вы разметили свои статьи OpenCrach, то при публикации в соцсетях автоматически подгружается картинка нужного размера, а также правильные заголовки.
Выводы
- Картинки на сайте делают контент разнообразнее и помогают ему ранжироваться. Картинки должны быть качественными и легкими по весу.
- Не забывайте прописывать мета -теги картинки: название файла, Title и Alt.
- Используйте разметку OpenCrach.
