Map fields with Open Graph meta tags for display pages

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: SEO Tools > OpenGraph tags
• Labels:
  • d_20_05
  • fc_20_06
• Epic/Theme:
  • SEO_Management
• Epic Link: lima-seo-opengraph-map-display-pages
• Sprint: LIMA | #18 | May05-May26, LIMA | #19 | May26-Jun16, LIMA | #20 | Jun16-Jul07, LIMA | #21 | DEV | Jul07-Jul28

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.