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

Map fields with Open Graph meta tags for display pages

    Details

      Description

      As a marketer creating a display page

      I want to decide which fields will be mapped to the Open Graph fields

      so that the meta data is filled with the information I want.

       

      Note: to enable it: 

      echo "enabled=B\"true\"" > ../bundles/osgi/configs/com.liferay.layout.seo.web.internal.configuration.FFMappingInputConfiguration.config

       

      Title should appear mapped to the asset title by default

      Description should appear mapped to the asset description by default

      Image should appear empty (will point to the site image set by default)

       

      Acceptance criteria

      Given a display page

      When a user accesses the configuration

      Then she will find a section for Open Graph

       

      Given a display page

      When a user accesses the Open Graph configuration and selects the title

      Then she will be able to select a field from the list of the asset fields compatible with the title

       

      Given a display page

      When a user accesses the Open Graph configuration and selects the description

      Then she will be able to select a field from the list of the asset fields compatible with the description

       

      Given a display page

      When a user accesses the Open Graph configuration and selects the image

      Then she will be able to select a field from the list of the asset fields compatible with the image

       

      Given a display page

      When a user accesses the Open Graph configuration and selects the image description

      Then she will be able to select a field from the list of the asset fields compatible with the image description

       

       

      Given a display page with mapped fields

      When a user accesses a page displaying a web content/document/blog entry

      Then title and description will be filled with the content stored in the mapped fields

       

      Design

      Interactions:

      • Hovering the map button will show a tooltip, the action should be "Map" (to keep consistency with the page builder)
      • Clicking the map button at the right part of the input will trigger the Mapping component, allowing to select the content in both the inputs.
      • The inputs must be set to read only so it won't be possible to write inside them directly.
      • When there is a content selected, the map icon will change color to $purple (from clay) to show that there is a mapped content (same as the builder). **In our case we'll always provide content mapped by default, so the button should be $purple from the beginning.

      Note: the mapping component was designed/developed by the Echo team for the page builder.
      Ideally, it should be the same component with the same functionalities as for the builder, allowing to select as Source the Basic Web Content (Default), or a Specific Content.
      Once chosen the Source, it will be possible to select the single Fields.

      Figma Mockup

      Test Scenarios

      ID Test Priority Test Scenarios Covered by Frontend (jest/react-testing-library) Covered by Backend (Unit/Integration)? Test to add
      11.16 5 The HTML Title field is mapped by default when configuring the display page YES** No  OpenGraph#MapWebContentToDisplayPage 
      11.17 3 Map icon for HTML Title is $purple YES** No   OpenGraph#MapWebContentToDisplayPage
      11.18 5 The Description field is mapped by default when configuring the display page YES** No   OpenGraph#MapWebContentToDisplayPage
      11.19 3 Map icon for Description is $purple YES** No   OpenGraph#MapWebContentToDisplayPage
      11.20 5 The Image field is unmapped by default when configuring the display page No  No   OpenGraph#MapWebContentToDisplayPage 
      11.21 3 Map icon for Image is $gray No  No   OpenGraph#MapWebContentToDisplayPage
      11.22 5 The Alt Description field is unmapped by default when configuring the display page No  No   OpenGraph#MapWebContentToDisplayPage
      11.23 3 Map icon for Alt Description is $gray No  No   OpenGraph#MapWebContentToDisplayPage
      11.24 4 The MapPanel is opened when the map button is clicked YES No  Manual
      11.25 4 The MapPanel is closed when it is open and the map button is clicked YES No  Manual
      11.26 4 The MapPanel is closed when it is open and click outside the panel YES No  Manual
      11.27 5 Title is filled with the mapped web content title when the display page displays a web content No  YES*  OpenGraph#MapWebContentToDisplayPage
      11.28 5 Description is filled with the mapped web content description when the display page displays a web content No  YES*  OpenGraph#MapWebContentToDisplayPage
      11.29 5 Title is filled with the mapped document title when the display page displays a document No  YES* OpenGraph#MapDocumentToDisplayPage 
      11.30 5 Description is filled with the mapped document description when the display page displays a document  No YES* OpenGraph#MapDocumentToDisplayPage 
      11.31 5 Title is filled with the mapped blogs entry title when the display page displays a blogs entry No  YES*  OpenGraph#MapBlogsToDisplayPage
      11.32 5 Description is filled with the mapped blogs entry description when the display page displays a blogs entry  No YES*  OpenGraph#MapBlogsToDisplayPage
      11.33 5 Image is displayed as empty when no site image is set No  No  OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage 
      11.34 5 Image is displayed as empty when this field is set on site No  No   OpenGraph#MapSiteImageToDisplayPage
      11.35 5 Alt Description is displayed as empty when no site image alt description is not set No  No  OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage 
      11.36 5 Alt Description is displayed as empty when this field is set on site No  No   OpenGraph#MapSiteImageToDisplayPage
      11.37 5 Able to select a field from the list of the asset fields compatible with the title YES**  No  OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage
      11.38 5 Able to select a field from the list of the asset fields compatible with the description YES** No   OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage
      11.39 5 Able to select a field from the list of the asset fields compatible with the image YES** No   OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage
      11.40 5 Able to select a field from the list of the asset fields compatible with the alt description YES** No  OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage 
      11.41 5 og:title meta tag is displayed with the mapped field in the HTML No  No   OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage
      11.42 5 og:description meta tag is displayed with the mapped field in the HTML No  No   OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage
      11.43 5 og:image meta tag is displayed with the mapped field in the HTML No   No OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage 
      11.44 5 og:image meta tag is displayed with the site image in the HTML when the image field is not mapped in the display page No  No  OpenGraph#MapSiteImageToDisplayPage
      11.45 5 og:image:alt meta tag is displayed with the mapped field in the HTML No  No   OpenGraph#MapWebContentToDisplayPage
      OpenGraph#MapDocumentToDisplayPage 
      OpenGraph#MapBlogsToDisplayPage
      11.46 5 og:image:alt meta tag is displayed with the site alt description in the HTML when the alt description field is not mapped in the display page No  No  OpenGraph#MapSiteImageToDisplayPage 

      YES*: There are backend tests that ensure the open graph tags are filled with mapped values for test entities. However that only tests the open graph infrastructure but not the end to end "request -> response(html)" flow. So functional tests that query the page and analyze the final meta tags returned by the server would be very valuable.

       

      YES**: Our frontend tests ensure that we applied this logic in general no in these particular cases.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              austin.chiang Austin Chiang
              Reporter:
              pablo.agulla Pablo Agulla
              Engineering Assignee:
              Pablo Agulla
              Recent user:
              Rubén Heras
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  Master