Open Graph

[alisha-kamat]

Summary of Changes

• Make a separate 'Open Graph' tab under the Article Edit section on the backend
• Provides users the flexibility to modify each article's open graph data, which in turn can be used by social media platforms to display rich objects
• Some of these parameters include
  • Article Type
  • Article Title
  • Article Description
  • Article Image
  • Published Date
  • Article Author
• If any field of the 'Open Graph' tab is left blank, it will use the article's default/original parameters
• Modifications to any of the open graph fields will override the article's default parameters

Testing Instructions

Perform the following steps for each of the cases defined below

1. Change the parameters as described
2. Save the settings
3. Open the article on the frontend
4. Right click on the article and select 'View page source'
5. Verify the open graph parameters included in the HTML header section

CASE 1 - Open Graph tab not used

When all fields in the open graph tab are blank, the article's default parameters are set as its open graph parameters.
If the article does not use any images, it hasn't been set in the 'Images and Links' tab and it hasn't been set in the OG tab either, the og: image tag does not appear in the screenshot below.

CASE 2 - Open Graph tab used for all parameters except image

Changing the og parameters under the 'Open Graph' tab will override the default parameters for the article.

CASE 3 - Dealing with multiple images

For the 'og: image' parameter in the HTML header, the following hierarchy is maintained

1. Open Graph Image
2. Full Article Image
3. Intro Image

For the selected image URL, metadata such as the image type (PNG, JPEG, GIF), height, width don't need to be specified separately by the user. They are extracted automatically from the specified image.

1. When only the article intro image (sample1.png) is set in 'Images and Links' tab, and all other image fields are empty, then the og:image parameter is set to the intro image URL

2. When the article intro image (sample1.png) and the full article image (sample2.png) both are set in 'Images and Links' tab, then the og:image parameter is set to the full article image URL

3. When the open graph image (sample3.jpg) is set (Open Graph tab) in addition to the above fields, then the og:image parameter is set to the open graph image URL