Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

AEM Core Image component SEO compliance

Avatar

Avatar
Applaud 5
Level 1
akshayp8458
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile

Avatar
Applaud 5
Level 1
akshayp8458
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile
akshayp8458
Level 1

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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
Applaud 5
Level 1
akshayp8458
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile

Avatar
Applaud 5
Level 1
akshayp8458
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile
akshayp8458
Level 1

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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
Applaud 5
Level 1
akshayp8458
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile

Avatar
Applaud 5
Level 1
akshayp8458
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
View profile
akshayp8458
Level 1

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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