Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-147394

When I edit an OOTB Container fragment, I want to choose the type of HTML tag used, so that I can optimize the HTML markup of my page.

Details

    Description

      Intro/Context

      For SEO and accessibility improvement purposes, HTML provides several semantic tags that allow web scrapers, browsers and site renderers to better understand which type of content is inside each area, and how this content is distributed inside the page.

      In order to provide the capability of using these semantic marckup of HTML, we will allow advanced users (with knowledge of SEO) to decide which HTML tag is generated for the Container fragment, which is the main fragment used to group elements in a Content page.

      Requirements

      • Add a new Advanced setup option (dropdown select) for the Container fragment, called "HTML Tag", that allows the user to select among the following values:
        • div, header, nav, main, section, article, aside, footer. 
      • Show a label below the select that says: "Please be aware that misusing this setup might have negative impact on SEO."
      • When one of these options is chosen, then the corresponding generated HTML will change the tag used.
      • When one of these options (NOT THE DIV TAG) is chosen, then the Fragment name in the Browser changes to add the corresponding tag used: "Container-section"

      Design

      Figma

      Acceptance Criteria

      Given a container fragment I am using in a content page,

      When I go to the Advanced tag,

      Then I have the "HTML Tag" option available and I can select a different HTML tag for the container, along with a label to warn me about its advanced use.

       

      Given a container fragment in a content page,

      When I change the value of the HTML tag,

      Then the HTML element created by the container has the corresponding HTML tag (for example, <section>) instead of the generic <div> tag.

       

      Given a container fragment in a content page,

      When I change the value of the HTML tag to a value different than "div",

      Then in the page browser I can see the container type that I am using, marked as "Container-"+ the HTML tag selected.

      Test Scenarios

      Test Scenarios Test Strategy Kind of test Is it covered by FrontEnd ? (JS-Unit) Is it covered by BackEnd ? (unit or integration) Could it be covered by POSHI?
      Could set HTML Tag option in page configuration Critical Manual Yes No Yes
      View warning message and view change in DOM and Page Elements panel Hign Manual No No Yes

       

      Attachments

        Issue Links

          Activity

            People

              david.gutierrez David Gutiérrez Mesa
              mateo.hermosin Mateo Hermosin
              SE Support SE Support
              Mateo Hermosin Mateo Hermosin
              Sandro Chinea
              Votes:
              1 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Packages

                  Version Package
                  Master