Identifying mobile and desktop view through HTL

[JakeCham]

Hi Team ,

I have come across a scenario where I have a component. In that component I have to render same content for desktop and mobile. So the content are repeating twice but it is on purpose to differentiate desktop view and mobile view. But SEO perspective I have been notified thats a violation.. Is there any way I can identify mobile breakpoints (mainly desktop and mobile view ) through htl .

Thanks.

[iamnjain]

Hi @JakeCham 

You can use AEM Design Layout feature to set the breakpoints and in HTL, you can write the markup code, only once.

You can check below article from Adobe documentation

https://experienceleague.adobe.com/docs/experience-manager-learn/sites/page-authoring/responsive-lay...

Hope this helps!

[JakeCham]

Im using static template with 6.5 SP.. So above way would not be applicable ?

[DPrakashRaj · Accepted solution]

Aem pages are cached on dispatcher so getting the dynamic behaviour with each request of same page with different viewport won’t help you as page will be cached on the first request so it will render same content irrespective of media type on subsequent call. What issue has been raised by SEO team? Is it with same content appearing twice on html? If that the case you can work with display:none with css so that elements doesn’t show up on DOM.

https://www.w3schools.com/css/tryit.asp?filename=trycss_display

[kautuk_sahni]

@JakeCham Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.