Identifying mobile and desktop view through HTL | Community
Skip to main content
JakeCham
JakeCham
Level 6
August 22, 2023
Solved

Identifying mobile and desktop view through HTL

  • August 22, 2023
  • 3 replies
  • 1322 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by DPrakashRaj

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

3 replies

iamnjain
Community Advisor
iamnjainCommunity Advisor
Community Advisor
August 22, 2023

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-layout-feature-video-understand.html?lang=en

 

Hope this helps!

    JakeCham
    JakeChamAuthor
    Level 6
    August 22, 2023

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

      DPrakashRaj
      Community Advisor
      DPrakashRajCommunity AdvisorAccepted solution
      Community Advisor
      August 22, 2023

      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
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        September 18, 2023

        @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.

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...