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

Содержание

Вопрос или проблема
Ответ или решение
1. Используйте правильный HTML-разметку
2. Оптимизация атрибута srcset
3. Использование карты сайта изображений
4. Оптимизация Text и Alt атрибутов
5. Мониторинг индексации
Заключение

Вопрос или проблема

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

И у него следующий разметка:

<div>
  <img
    alt="Force Factor, ProbioSlim"
    class="dialog__trigger cursor_pointer"
    decoding="async"
    fetchpriority="high"
    height="1610"
    
    src="/supplements/probioslim-1865/images/triptych.avif?width=480"
    style="aspect-ratio:2716 / 1610"
    title="Этикетка добавки Force Factor, ProbioSlim"
    width="2716"
    data-scope="dialog"
    data-part="trigger"
    id="dialog::R5r335::trigger"
    aria-haspopup="dialog"
    type="button"
    aria-expanded="false"
    data-state="closed">
</div>

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

Я хочу добавить второе изображение для того же продукта: какую разметку мне использовать?

Кроме того, моё изображение включает параметр width=, но я хочу, чтобы Google индексировал версию без атрибута width, то есть /supplements/probioslim-1865/images/triptych.avif. Как мне это указать в разметке?

Что касается вашего второго пункта –

Предполагая, что ?width=480 изменяет размер изображения на стороне сервера, я, возможно, подумаю о том, чтобы использовать атрибут srcset, чтобы предоставить большое изображение пользователям на экранах с более высоким разрешением, а также сделать это резервным вариантом. Для всех остальных пользователей предоставьте малое изображение.

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


   src="/supplements/probioslim-1865/images/triptych.avif"

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

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

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

Например:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/sample1.html</loc>
    <image:image>
      <image:loc>https://example.com/image1.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>https://example.com/image2.jpg</image:loc>
    </image:image>
  </url>
</urlset>

Ответ или решение

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

1. Используйте правильный HTML-разметку

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

<div class="product-images">
  <img
    alt="Force Factor, ProbioSlim"
    class="dialog__trigger cursor_pointer"
    decoding="async"
    fetchpriority="high"
    src="/supplements/probioslim-1865/images/triptych.avif?width=480"
    style="aspect-ratio:2716 / 1610"
    title="Force Factor, ProbioSlim supplement label"
    width="2716"
    data-scope="dialog"
    data-part="trigger"
    aria-haspopup="dialog"
    aria-expanded="false"
    data-state="closed"
  />
  <img
    alt="Force Factor, ProbioSlim - Дополнительное изображение"
    class="dialog__trigger cursor_pointer"
    decoding="async"
    fetchpriority="high"
    src="/supplements/probioslim-1865/images/triptych-additional.avif?width=480"
    style="aspect-ratio:2716 / 1610"
    title="Дополнительное изображение для Force Factor, ProbioSlim"
    width="2716"
    data-scope="dialog"
    data-part="trigger"
    aria-haspopup="dialog"
    aria-expanded="false"
    data-state="closed"
  />
</div>

2. Оптимизация атрибута `srcset`

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

<img
  
  src="/supplements/probioslim-1865/images/triptych.avif"
  alt="Force Factor, ProbioSlim"
  class="dialog__trigger cursor_pointer"
  decoding="async"
  fetchpriority="high"
  title="Force Factor, ProbioSlim supplement label"
  loading="lazy"
/>

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/sample1.html</loc>
    <image:image>
      <image:loc>https://example.com/images/triptych.avif</image:loc>
    </image:image>
    <image:image>
      <image:loc>https://example.com/images/triptych-additional.avif</image:loc>
    </image:image>
  </url>
</urlset>

4. Оптимизация Text и Alt атрибутов

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

5. Мониторинг индексации

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

Заключение

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