Картинки для страницы: Скачать и сохранить фото с сайта

Картинки и видео. Турбо‑страницы для контентных сайтов

Турбо‑страницы поддерживают:

• Картинки без подписи

• Картинки с подписью

• Галереи картинок

• Видео в тексте

Чтобы разместить картинку без подписи, используйте элемент img:

<img src="https://clck.ru/FFAuR"/>

src

URL изображения. Поддерживаются форматы JPEG, PNG, GIF, SVG.

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

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

Чтобы разместить картинку с подписью, используйте вложенную структуру элементов figure, img и figcaption:

<figure>
    <img src="https://clck.ru/FFAvn"/>
    <figcaption>The caption to the gallery</figcaption>
</figure>

src

URL изображения. Поддерживаются форматы JPEG, PNG, GIF, SVG.

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

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

Чтобы отобразить в статье галерею картинок, используйте элемент div с атрибутом data-block=»gallery» и вложенные элементы header и img:

<div data-block="gallery">
    <src, в качестве значения которого нужно указать адрес картинки. "}}"> src="https://clck.ru/FFAuR"/>
    <src, в качестве значения которого нужно указать адрес картинки."}}"> src="https://clck.ru/FFAvn"/>
    <>The caption to the gallery</header>
</div>

img ^* Обязательный параметр»}}»>

Изображение. Содержит атрибут src, в качестве значения которого нужно указать адрес картинки.

header

Подпись, которая отображается под галереей.

^* Обязательный параметр

Чтобы разместить видео с вашего сайта, используйте вложенную структуру элементов figure, video, source, img и figcaption. Подерживается формат видео MP4.

Внимание. Видео автоматически загружается на Яндекс.Видеохостинг при формировании Турбо‑страницы.

<figure>
    <\n                      

width — ширина видео в пикселях.

\n

height — высота видео в пикселях.

\n

Должен содержать вложенный элемент source с атрибутами:

\n

• src — ссылка на видео. Видео должно быть доступно по протоколу HTTPS.

\n

• type — тип медиаматериала и его формат. Поддерживается только video/mp4.
\n

«}}»>> <source src=»https://clck.ru/Kiunj» type=»video/mp4″ data-duration=15 data-title=»Закат»/> </video> < src=»https://clck.ru/Kiun7″/> <Подпись к видео.\n «}}»>>Таймлапс заката</figcaption> </figure>

video ^* Обязательный параметр»}}»>

Информация о видео. Возможные атрибуты:

• width — ширина видео в пикселях.

• height — высота видео в пикселях.

Должен содержать вложенный элемент source с атрибутами:

• src — ссылка на видео. Видео должно быть доступно по протоколу HTTPS.

• type — тип медиаматериала и его формат. Поддерживается только video/mp4.

img ^* Обязательный параметр»}}»>

Превью. Поддерживаются форматы JPEG, WEBP, PNG, GIF.

figcaption

Подпись к видео.

^* Обязательный параметр

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

Чтобы встроить код в содержимое Турбо‑страницы, добавьте элемент iframe:

<iframe src="https://www. youtube.com/embed/KzayrlaQ_Vg"
       
       
        frameborder="0"
        allowfullscreen="true"
        referrerpolicy="origin"
        hd="3">
</iframe>

Возможные атрибуты iframe:

src ^* Обязательный параметр»}}»>

Cсылка на видео. Видео должно быть доступно по протоколу HTTPS.

Список поддерживаемых ресурсов

• Яндекс.Видеохостинг — frontend.vh.yandex.ru/embed/

• Clipiki.ru — clipiki.ru/embed/

• Dailymotion — dailymotion.com/embed/video/

• Dzenkino — dzenkino.com/embed/

• Facebook — facebook.com/plugins/post.php/

• Ferra.ru — ferra.media.eagleplatform.com/index/player/

• Izlesene.com — izlesene.com/embedplayer/

• Lenta.ru — lentaru.media.eagleplatform.com/index/player/

• Life.

  ru — embed.life.ru/video/

• Matchtv.ru — matchtv.ru/vdl/player/

• MyVi.ru — myvi.ru/player/embed/

• Passion.ru — passionru.media.eagleplatform.com/index/player/

• Quto.ru — quto.media.eagleplatform.com/index/player/

• Rutube — rutube.ru/pl/, rutube.ru/play/embed/

• Sputnik Moldova — ru.sputnik.md/services/video/embed/

• Vesti.ru — player.vgtrk.com/iframe/video/

• Vimeo — player.vimeo.com/video/

• Wmj.ru — wmj.media.eagleplatform.com/index/player/

• YouTube — youtube.com/embed/, youtube-nocookie.com/embed/

• Авторамблер — autorambler.media.eagleplatform.com/index/player/

• Афиша — afisha.media.eagleplatform.com/index/player/

• Афиша-Еда — eda.media.eagleplatform.com/index/player/

• ВКонтекте — vk.com/video_ext.php/

• Газета.Ru — gazeta.media.eagleplatform.com/index/player/

• Живой Журнал — vc. videos.livejournal.com/index/player/

• Известия.Ru — iz.ru/video/embed/

• Летидор — letidor.media.eagleplatform.com/index/player/

• Мой мир@Mail.ru — my.mail.ru/video/embed/

• Мотор — motor.media.eagleplatform.com/index/player/

• Одноклассники — ok.ru/videoembed/

• Пятый канал — 5-tv.ru/player/

• Рамблер.Новости — ramblernews.media.eagleplatform.com/index/player/

• РИА Новости — ria.ru/services/video/embed/

• Телеканал «RT» — russian.rt.com/<…>/video/

• Телеканал «Звезда» — tvzvezda.ru/<…>/player/

• Телеканал «НТВ» — ntv.ru/embed/

• Телеканал «РЕН ТВ» — ren.tv/player/

• Чемпионат — championat.media.eagleplatform.com/index/player/

• ЯПлакалъ — yapfiles.ru/get_player/

width

Ширина. Размер объекта масштабируется с учетом размера экрана мобильного устройства.

height

Высота. Размер объекта масштабируется с учетом размера экрана мобильного устройства.

frameborder

Рамка объекта.

allowfullscreen

Признак полноэкранного режима.

referrerpolicy

Позволяет указать реферрер.

sandbox

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

hd

Позволяет задать разрешение видео. Число от 0 до 3 включительно. Используйте для видео ВКонтакте.

^* Обязательный параметр

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

Была ли статья полезна?

Как найти страницы без картинок и сделать SEO-оптимизацию изображений с Labrika?

Полезный и качественный визуальный контент положительно сказывается на ранжировании веб-страницы. В частности, изображения:

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

Как найти страницы без изображений?

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

Лучшие практики SEO-оптимизации изображений

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

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

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

Создавайте уникальные изображения

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

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

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

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

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

Сжимайте изображения

Чем больше размер файла изображения, тем больше времени требуется для загрузки веб-страницы. Долгое время загрузки ухудшает поведенческие факторы сайта и отрицательно сказывается на его ранжировании. Пользователи покидают страницу, если она загружается дольше 3 секунд. Проверить показатели скорости и получить рекомендации по их улучшению вы можете на сервисе Labrika в отчете «Скорость и юзабилити», который предоставляет информацию по данным PageSpeed Insights — инструмента Google, предназначенного для оценки скоростных показателей страницы.

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

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

Для сжатия изображений используют различные плагины, графические редакторы (Adobe Photoshop и др.) или специализированные онлайн-сервисы (Compressor.io, TinyPNG и др.).

Оптимизируйте для SEO имена файлов, атрибуты Alt и Title, URL-адреса

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

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

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

URL-адрес также играет роль в поисковой оптимизации изображений. Желательно использовать тематически релевантную структуру URL. Например:

https://www.example.com/cars/audi/q5.jpg.

Найти изображения, у которых не прописаны атрибуты Alt и Title, можно с помощью отчета «Все изображения» на Labrika. Отчет содержит список URL-адресов всех изображений, которые краулер сервиса обнаружил на вашем сайте. В нём указаны атрибуты Alt и Title изображений. Проставив галочки около пунктов «отсутствующие Alt» или «отсутствующие Title», можно отфильтровать содержимое отчета так, чтобы отображались только изображения, у которых не прописаны данные атрибуты.

Используйте семантическую разметку для изображений

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

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

Создаете адаптивные изображения

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

Такая адаптация особенно важна после запуска Google в 2018 году масштабной mobile-first индексации. Если раньше релевантность сайта оценивалась на основе версии для компьютеров (десктопной), то при mobile-first индексации в первую очередь сканируются мобильные версии, и от их качества главным образом зависит рейтинг страницы в результатах поиска.

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

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

Добавляйте изображения в карту сайта

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

Подробнее о требованиях к изображениям можно узнать в рекомендациях Google.

Оптимизируйте мета-теги Title и Description, заголовок Н1 и текст на странице с изображением

Поисковая оптимизация изображений — это лишь часть внутреннего SEO. Все основные факторы оптимизации страницы, такие как мета-заголовок Title, мета-описание Description, видимый заголовок первого уровня Н1, текст на странице и т. д. влияют на то, как Google ранжирует ваши изображения.

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

Сервис Labrika в разделе «Внутренняя оптимизация страницы» на основе анализа конкурентов из ТОП-10 дает рекомендации по добавлению ключевых слов, а также по объему текста и оптимальной длине Title, Description и h2. Кроме того, сервис покажет оценку уровня оптимизации страницы по сравнению с сайтами из ТОП-10 поисковой выдачи.

750+ изображений веб-дизайна | Скачать бесплатные изображения на Unsplash

750+ изображений веб-дизайна | Download Free Images on Unsplash

• A framed photoPhotos 10k
• A stack of photosCollections 10k
• A group of peopleUsers 240

design

digital marketing

website

graphic design

social media

web development

дизайн веб-сайтов

веб-дизайнер

wordpress

tabledeskgraphical user interface

webinbound

Website backgroundsquoteportfolio

Hd computer wallpaperssittinglifestyles

handshand gesturesmarker

worktechblog

thailandwireless technologyhuman hand

workspacegreenvilleunited states

businesstechnologyHd desktop wallpapers

marketingagencysite

analyzingportable information deviceeditor

––– – –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Hd design wallpapersdhakabangladesh

officeHd laptop wallpapershome

learning and developmentHd ipad pro wallpaperssetup

indonesiajakartaprocess

Keyboard backgroundsHd pc wallpapersdevelopment

Hd yellow wallpapersdigitalgibraltar

front-endblenderHd 3d wallpapers

ideaHd pink wallpapersLight backgrounds

quarteiraportugalmacbook pro

Связанные коллекции

Веб-дизайн

260 photos · Curated by Sari Koyama

Web Design

310 photos · Curated by Anni Bereznyuk

Web Design Class

692 photos · Curated by Lea Sulistyo

tabledeskgraphical user interface

officeHd laptop wallpapershome

Hd computer wallpaperssittinglifestyles

рукижесты рукмаркер

Hd желтые обоицифровойГибралтар

маркетинговое агентствосайт

квартейрапортугалияmacbook pro

HD Design Walpapersdhakabangladesh

Learning and Developmenthd iPad Pro WallpapersSetup

Клавиатура Фон. –– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

webinbound

Фон веб-сайтаquoteportfolio

Indonesiajakartaprocess

Worktechblog

Связанные коллекции

Веб -дизайн

260 Фотографии · Куратор Sari Koyama

Веб -дизайн

310 Фотографии · Куратор Anni Bereezniuk

110 310 Фотографии · Куратор Anni Bereezniuk

110 310 Фотографии · Куратор Anni Bereezniuk

110

.

интерфейсный блендерHd 3d обои

ideaHd розовые обоиСветлые фоны

Логотип Unsplash

Unsplash+

В сотрудничестве с Getty Images

Unsplash+

Unlock

tabledeskgraphical user interface

Eftakher Alam

Hd design wallpapersdhakabangladesh

–––– –––– –––– – –––– ––––– –– – ––– ––––– –– ––– – – –– ––– –– –––– – –. Главная0011 Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

Hd computer wallpaperssittinglifestyles

UX Indonesia

indonesiajakartaprocess

Kelly Sikkema

handshand gesturesmarker

Fotis Fotopoulos

Keyboard backgroundsHd pc wallpapersdevelopment

Кевин Бхагат

worktechblog

Джорджи Коббс

HD желтые обоицифровойgibraltar

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

thailandwireless technologyhuman hand

Lee Campbell

workspacegreenvilleunited states

Jackson Sophat

front-endblenderHd 3d wallpapers

Domenico Loia

businesstechnologyHd desktop обои

Diego PH

ideaHD розовые картинкиСветлые фоны

Hal Gatewood

MarketingAgenceSite

LONSPLASH LOGO

UNSPLASH+

в сотрудничестве с Getty Images

UNSPLASH+

Разблокировать

Analyzing Proportbort DeviceEditor

Nathan DA Silva

QuarteirAportugareDitor

Nathan Da Silva

QuarteirAportugalGalGACBY

Nathan DA SILVA

QuarteirAportugAlGALMACBYBARBY

PREANCIALGAR110110. Скидка 20% на iStock Логотип Unsplash

Сделайте что-нибудь потрясающее

12 важных советов по оптимизации изображений, которые вам необходимо знать

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

Это яркий пример оптимизации изображения, верно? Не совсем.

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

Давайте изменим это.

Согласно данным Jumpshot за 2018 год, более 20% всех поисковых запросов в Интернете в США приходится на Google Images.

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

Дэн Морган из WebSpection менее чем за четыре дня вывел одну из своих фотографий на первое место в Google Images в категории «лучший человек в Кардиффе», оптимизировав свое изображение.

Робби Ричардс совершил 150 732 посещения, добавив теги alt к изображениям, сжав изображения и применив несколько других SEO-трюков.

Без надлежащей оптимизации изображения вы теряете ценный актив SEO.

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

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

Как отметил Мэтт Саузерн, заявление Гэри Иллиса о поиске изображений в недавнем чате Reddit:

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

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

Вот 12 важных советов по оптимизации изображений, которые вам необходимо знать.

1. Выберите правильный формат

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

Несмотря на то, что существует множество форматов изображений, наиболее распространенными для Интернета являются PNG и JPEG.

• PNG: создает изображения более высокого качества, но имеет больший размер файла.
• JPEG: качество изображения может ухудшиться, но вы можете отрегулировать уровень качества, чтобы найти хороший баланс.
• WebP: выберите сжатие без потерь или с потерями, используя этот единственный формат изображения, поддерживаемый как Chrome, так и Firefox.

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

Будьте осторожны, если вы используете изображения . jpg внутри встроенного формата SVG, так как системы Google не могут их индексировать.

2. Сжатие изображений

Да, ад не так ярок, как раздутая веб-страница после загрузки несжатого изображения.

Поисковые системы будут смотреть на вашу веб-страницу так же, как вы смотрите на большой чан Crisco: вы же не можете всерьез рассматривать возможность размещения этого на своем веб-сайте, верно?

По данным HTTP Archive, изображения составляют в среднем 21% от общего веса веб-страницы.

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

У TingPNG также есть плагин WordPress, который вы тоже можете использовать.

Однако я предпочитаю WP Smush в качестве плагина для WordPress. Это уменьшает размер файла изображения без потери качества.

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

Или сделайте еще один шаг и используйте CDN для изображений, который обнаруживает устройство и оптимизирует образ перед доставкой. Cloudinary и Imgix — два варианта, которые стоит попробовать.

Increasingly.com увеличил скорость веб-сайта на 33% за 2 секунды за счет сжатия изображений.

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

Если вы не уверены, как ваши изображения влияют на скорость вашей страницы, я рекомендую использовать инструмент Google PageSpeed ​​Insights.

3. Создавайте уникальные изображения

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

Слишком много веб-сайтов загромождены одними и теми же фотографиями.

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

Я уверен, вы видели такое изображение:

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

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

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

Как рекомендует Google в своем ресурсе Advanced SEO,

«Большие изображения должны быть не менее 1200 пикселей в ширину и разрешены параметром max-image-preview:large или с помощью AMP».

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

4. Остерегайтесь авторских прав

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

Почтовая служба платит 3,5 миллиона долларов по иску о нарушении авторских прав на изображения. И на Скечерса подали в суд на 2,5 миллиона долларов.

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

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

Google Images позволяет фильтровать результаты на основе тех, которые доступны для повторного использования, а Минди Вайнштейн публикует 41 веб-сайт для поиска бесплатных изображений.

5. Настройка имен файлов изображений

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

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

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

Обычно имена файлов выглядят как «IMG_722019» или что-то подобное. Это как заказывать из меню на другом языке. Это не помогает Гуглу.

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

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

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

Я мог бы назвать его просто «шоколад», но если вы продаете шоколад на своем веб-сайте, потенциально каждое изображение может быть названо «шоколад-1», «шоколад-2» и так далее.

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

Связано: Google On Image File Names & A Surprise SEO Ошибка

6. Напишите оптимизированный для SEO альтернативный текст

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

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

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

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

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

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

Альтернативный текст может выглядеть так:

Однако лучше использовать альтернативный текст, описывающий изображение:

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

7. Подумайте о структуре файла изображения

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

Повторить: Путь и имя файла являются фактическим фактором ранжирования.

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

8. Оптимизируйте заголовок и описание страницы

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

На странице поддержки Google указано:

Все ваши основные SEO-факторы на странице, такие как метаданные, теги заголовков, текст на странице, структурированные данные и т. д., влияют на то, как Google ранжирует ваши изображения.

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

9. Определите свои размеры

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

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

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

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

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

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

10. Сделайте ваши изображения удобными для мобильных устройств

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

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

К счастью, Google предлагает рекомендации по работе с изображениями.

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

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

Важно отформатировать это с другой частью значения атрибута в каждой строке, как показано в этом примере из их ресурса:

elva-fairy

src=»elva-fairy-800w.jpg»

alt=»Эльва, одетая как фея»>

Узнайте больше об использовании srcset для адаптивных изображений здесь.

11. Добавьте изображения на карту сайта

Независимо от того, добавляете ли вы свои изображения в карту сайта или создаете новую карту сайта для изображений, вам нужны изображения где-то в ваших картах сайта.

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

Если вы используете WordPress, Yoast и RankMath предлагают решение для карты сайта в своем плагине.

12. Добавление структурированных данных

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

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

Основные выводы по оптимизации изображения

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

Самое главное, чтобы изображение и альтернативный текст соответствовали странице. Другие ключевые выводы:

• Выберите правильный формат файла. PNG — мои любимые скриншоты.
• Уменьшите размер файла для более быстрой загрузки страницы.
• Убедитесь, что ваши SEO-элементы на странице (метаданные, структурированные данные и т.