AEM Core Image component SEO compliance

Avatar

Avatar

akshayp8458

Avatar

akshayp8458

akshayp8458

13-06-2019

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?

`

Replies

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857
Arun_Patidar
MVP

13-06-2019

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

Avatar

Avatar

akshayp8458

Avatar

akshayp8458

akshayp8458

13-06-2019

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

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857
Arun_Patidar
MVP

13-06-2019

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

Avatar

Avatar

akshayp8458

Avatar

akshayp8458

akshayp8458

13-06-2019

<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

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857
Arun_Patidar
MVP

13-06-2019

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