Блог

Главная - Вопросы по программированию - Добавьте атрибут itemprop в тег img, созданный amp-img

Добавьте атрибут itemprop в тег img, созданный amp-img

#amp-html #microdata #amp-img

#amp-html #микроданные #amp-img

Вопрос:

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

Я столкнулся с проблемой, пытаясь добавить атрибут структурированных данных itemprop="image" к изображению героя продукта, который визуализируется с помощью amp-img . Из того, что я могу сказать, нет никакого способа применить пользовательские атрибуты к img тегу, который amp-img в конечном итоге будет отображаться.

Моя существующая разметка:

 <amp-img on="tap:hero-zoom-lightbox" src="--REDACTED--" [src]="productState.currentHeroImg" width="260" height="260" layout="responsive"
class="hero-carousel-image" role="button" tabindex="0" itemprop="image"></amp-img>

Что будет отображено:

 <amp-img itemprop="image" tabindex="0" role="button" class="hero-carousel-image amp-carousel-slide i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" layout="responsive" height="260" width="260" data-amp-bind-src="productState.currentHeroImg" i-amphtml-binding="" src="--REDACTED--" on="tap:hero-zoom-lightbox" i-amphtml-layout="responsive" aria-hidden="false">
    <i-amphtml-sizer style="padding-top: 100%;"></i-amphtml-sizer>
    <img decoding="async" src="--REDACTED--" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>

То, что я ищу ( itemprop="image" атрибут находится в самом img теге):

 <amp-img tabindex="0" role="button" class="hero-carousel-image amp-carousel-slide i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" layout="responsive" height="260" width="260" data-amp-bind-src="productState.currentHeroImg" i-amphtml-binding="" src="--REDACTED--" on="tap:hero-zoom-lightbox" i-amphtml-layout="responsive" aria-hidden="false">
    <i-amphtml-sizer style="padding-top: 100%;"></i-amphtml-sizer>
    <img itemprop="image" decoding="async" src="--REDACTED--" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>

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

Комментарии:

1. В случае, если решения нет: обходным путем является добавление link элемента и указание itemprop в ссылке вместо ( amp- ) img .

2. @unor Очень полезное предложение, спасибо!

3. @pstricker Зачем вам это нужно в img теге поверх amp-img тега? Разве наличие itemprop="image" ссылки на ссылку не будет таким же, как наличие ее на amp-img ? Они оба являются контейнерами, содержащими img тег.

4. @TrevorGeene Это отличный вопрос, на который у меня нет хорошего ответа. При запуске разметки с itemprop="image" атрибутом для amp-img элемента с помощью инструмента тестирования структурированных данных Google свойство изображения не распознается. И наоборот, использование itemprop="image" для link элемента распознается. Я не нашел какой-либо явной документации относительно того, почему link работает в отличие от любого другого произвольного элемента, но я все еще занимаюсь исследованиями.

5. @pstricker Хотя я использовал инструмент тестирования Google, я, наверное, упустил из виду тот факт, что itemprop="image" отсутствует as (я даже только что подтвердил это).

Ответ №1:

Я решил эту проблему, используя добавление itemprop="image" в окружающий anchor tag

Таким образом, он устранит ошибку SEO и также будет проверяться на AMP validator.

Ранее я пытался использовать скрытый элемент изображения, который решил проблему SEO, но привел к ошибке проверки AMP <img src="/imgUrl" alt="/altUrl" itemprop="image" class="hidden" />

Метки: