Content: SEO Tab Revamp

[zcolah]

Intro

Visual Improvements

The SEO tab will now leverage our new Material Design Language.

UX Improvements

Social Media Previews

Users will now be able to see Social media previews for twitter, facebook, linkedin, and Google.

AI Assistant

Users will now be able to generate a Meta Title and Meta Description using our AI Assistant

Figma

https://www.figma.com/design/Oc42SSkzPDozxO7zZRCUJT/SEO-Tab?m=dev&node-id=67-61597&t=SMAW6kZuY5z43cmS-1

[finnar-bin]

Note:

• Project Board
• og_image field needs to be hidden in /fields

[zcolah]

Task 1: Handling case of blank og_image field

In the case of the og_image field of a content item being blank, WebEngine should fall back to:

• displaying the first image file from a field with the word image in it's label
• if there is no field with the word image in it's label, it should then display the first image file it finds in the content item

This Web Engine resolution order fix needs to be done by @jjaguilar08 and Randy. Once this fix is made it needs to be tested by @finnar-bin.

Task 2: Rendering Image in Preview Card

The image in the preview cards in the SEO tab should use the same OTF parameters, Web Engine applies for the social media previews for Twitter Card and Open Graph (Facebook, Linkedin). Google can be left as is. This is not a top priority.

Task 3: Handling og_title, og_description, tc_title, and tc_description in the SEO Tab

If the content model has an og_title, and og_description field then:

1. Render the og_title and og_description fields in the SEO Tab below the meta image field. Do not render these fields in the Edit Content Tab.

2. Use the values from the og_title, and og_description fields for the Facebook and Linkedin Social Media Preview Cards

If the content model has an tc_title, and tc_description field then:

1. Render the tc_title and tc_description fields in the SEO Tab below the meta image field. Do not render these fields in the Edit Content Tab.

2. Use the values from the tc_title, and tc_description fields for the Twitter Social Media Preview Cards

See Screenshot:

Figma

https://www.figma.com/design/Oc42SSkzPDozxO7zZRCUJT/SEO-Tab-%2B-AI-App?node-id=528-31565&m=dev

Task 4: Test Social Media Previews

We need to test our social media preview cards. We need to see what we show in Zesty, and compare it against Facebook, Linkedn, Twitter, and Google. We need to check if it is using the Meta Title, Og_Title, and TC_title values when appropriate.

[zcolah]

Tooltip text for the following AI Assistant Inputs

1. Tone: Set the desired style and mood of the generated text
2. Word Limit: Set a word limit to control the length of the generated text
3. Language: Set the language in which you’d like the text to be generated.