search

zesty-io / manager-ui

Content platform powering enterprise websites and applications
https://www.zesty.io
Other
41 stars 6 forks source link

Content: SEO Tab Revamp #2118

Closed zcolah closed 1 month ago

zcolah commented 1 year ago

Intro

Visual Improvements

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

Image

UX Improvements

Social Media Previews

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

Image

AI Assistant

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

Figma

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

finnar-bin commented 3 months ago

Note:

zcolah commented 2 months ago

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:

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: Image

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 commented 1 month ago

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.