Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

AEM Core Image component SEO compliance

Avatar

Level 1

I was playing around with the OOTB AEM 6.5 Image v2 core component and the following is the view source markup it provides from the server side.

As we can observe the <img> tag is not rendered from the server side this concerns me from an SEO standpoint as the relevant SEO tags and attributes like img and alt are not readable by search engines, would the meta tag with a caption as itemprop below provide a viable alternative to overcome this SEO problem?

`

5 Replies

Avatar

Community Advisor

Hi,

Please check more details about core components ate Core Components Introduction

Image component does provide the alt and other attributes, check markup at

Image

Screenshot 2019-06-13 at 4.53.57 PM.png



Arun Patidar

Avatar

Level 1

Arun Patidar​ Sorry I missed an important piece of information there, You should be able to reproduce the issue when you configure multiple widths in the image component policy as shown below

1771708_pastedImage_0.png

Avatar

Community Advisor

Can you please share the source markup?
I can see alt and other attributes in source.

img.png

More details about design dialog at Image Component



Arun Patidar

Avatar

Level 1

<div class="image aem-GridColumn--breakpoints--12 aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--3 aem-GridColumn--offset--default--0">

    <div data-cmp-is="image" data-cmp-src="/content/general/_jcr_content/root/responsivegrid/image.coreimg.82{.width}.jpeg/1560349187245/lava-into-ocean.jpeg" data-cmp-widths="100,500,1000" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-title="Lava flowing into the ocean" class="cmp-image" itemscope itemtype="http://schema.org/ImageObject">

          <a class="cmp-image__link" href="https://www.google.com/" data-cmp-hook-image="link">

          <noscript data-cmp-hook-image="noscript">

          <img src="/content/general/_jcr_content/root/responsivegrid/image.coreimg.jpeg/1560349187245/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean"/>

          </noscript>

          </a>

    <meta itemprop="caption" content="Lava flowing into the ocean"/>

    </div>

</div>

Arun PatidarThis is the markup I got rendered from the server, It works fine after the page is loaded on the browser, JS is adding the appropriate img tag and alt attribute...but I am talking about the markup rendered from the server side i.e when you do a page view source you can see the img tag is wrapped around a noscript  tag which I don't think will be crawled by search engines.

Avatar

Community Advisor

when I am trying, it is not inside noscript tags, maybe some other code impacting the behaviour.

Anyways for noscript SEO, I found How the Noscript Tag Impacts SEO (Hint: Be Very Careful) | Northcutt: Cloud & Ecommerce SEO  which can help understand, noscript for SEO



Arun Patidar