Beta Release

[github-actions]

Created by Github action

[zcolah]

SEO Tab

@finnar-bin

Bugs

High Priority

• User can Navigate to the SEO Tab even if the changes in the Edit Tab cannot be saved due to an error. A user should not be able to navigate out to another tab or page if an error in saving occurs. Instead they should remain on the same page (URL) and read why the error happened. See Loom:https://www.loom.com/share/ccb4912b1637479aaaca3c17eba16d62

• Cannot Save Changes Made in the SEO Tab (Save Button does nothing. Save & Publish button takes us into a dirty state) https://www.loom.com/share/62d25fb323b04a24a19e7359965cf05f

• Meta Image Does Not Appear in Social Media Previews https://www.loom.com/share/e2af6f73f2be443cb8cd840f7dc6c44f

• User was able to create an item despite leaving Meta Title & Meta Description field empty. What was more interesting was on the next try, clicking the Create Button did nothing instead of saving the item. It did not even show an error. And the Meta description also did not show as a required input despite being empty after the user selected it for the first time. https://www.loom.com/share/4bb29766ccdb458c9d5622dcc3aacd14

• In certain cases, the URL Path Part input does not add dashes when spacebar key is clicked on keyboard. https://www.loom.com/share/a812d8afec5a4b628ab3fe7f1b491b80

Medium Priority

• Meta Description Input Bug with Spaces at the end Please check if this is happening for Meta Title as well.
  https://www.loom.com/share/8e137c06821d427a80c7baa1f025ef8c

• Google SEO Preview Card URL display issue
  

• Titlebar should only reflect the change made to the Meta Title after the Meta Title Changes are saved. It should not live update. https://www.loom.com/share/e2caaca389194c4c9a38e8905e58ddff

Low Priority

• Canonical Tag & Sitemap Priority Dropdown Menus cover/overlap with the Input itself. This makes it difficult to see the currently selected value. https://www.loom.com/share/af778d8ce6b14503beafa42d76b3c683

• Tooltip Position should be on right
  

Enhancements

• Add See More Button to the Content and Meta Matched Words Section
  

[finnar-bin]

@zcolah

User can Navigate to the SEO Tab even if the changes in the Edit Tab cannot be saved due to an error. A user should not be able to navigate out to another tab or page if an error in saving occurs. Instead they should remain on the same page (URL) and read why the error happened. See Loom:https://www.loom.com/share/ccb4912b1637479aaaca3c17eba16d62

The save button got triggered due to the wysiwyg, the saved data was auto-formatted by the wysiwyg component on load. That most likely happened due to the old data being saved using the old wysiwyg and when it was loaded to the current wysiwyg it auto-formatted the text causing an on change which marked the content item as "dirty" because of the said change. If you just click save when this happens, it should no longer happen again since it essentially fixed the formatting already.

But regarding the issue where it still moved you to the SEO tab even if there was an error saving the file, I'll fix that.

---

Meta Image Does Not Appear in Social Media Previews https://www.loom.com/share/e2af6f73f2be443cb8cd840f7dc6c44f

I am using the media resolver to render the images in the social media previews, I reached out to @mattezra and he told me there are some ongoing issues with the media resolver api at the moment. It seems to be able to resolve some image zuids while for some other image zuids it fails to do so causing that issue.

---

Canonical Tag & Sitemap Priority Dropdown Menus cover/overlap with the Input itself. This makes it difficult to see the currently selected value. https://www.loom.com/share/af778d8ce6b14503beafa42d76b3c683

This is the default behavior of MUI's select component and it doesn't seem like there's a way to change the dropdown behavior to be like the autocomplete since it's using different popup components under the hood. There's already an open issue regarding this in the mui repo already but it doesn't seem like there's any working workaround to fix to it yet.

---

Meta Description Input Bug with Spaces at the end Please check if this is happening for Meta Title as well.
https://www.loom.com/share/8e137c06821d427a80c7baa1f025ef8c

This is only happens to multiline textfields (textarea) and is the default behavior as well. If you check out the input box in github below, it behaves the same way when you spam space towards the edge of the textarea. There's a workaround I found in this MUI issue but it makes it so that the text doesn't wrap around properly, you instead get a long horizontal scroll unless you deliberately press enter to go to a newline.

[giseleblair]

@zcolah Here is my initial SEO Feedback
https://www.loom.com/share/89504abcaf8d40f989d106ee0b81ee45?sid=f5fa66e7-7aae-44bc-85e7-de15184248b7

[finnar-bin]

@zcolah Here is my initial SEO Feedback https://www.loom.com/share/89504abcaf8d40f989d106ee0b81ee45?sid=f5fa66e7-7aae-44bc-85e7-de15184248b7

@zcolah regarding the twitter-related stuff
@giseleblair regarding the image disappearing when you clicked the customize image, the logic behind that is once that button is clicked, it then creates the og_image field which is then what's being checked for the meta image previews. The ask there was to always use the og_image field if it exists regardless if it's storing a file or not. @zcolah might need to also check into that flow.

[giseleblair]

@finnar-bin @zcolah
Does this logic also apply to og_title/description and tc_image/title/description?
Once the user clicks on Customize Image does this add the og_image to the content model? Does this mean that the og_image content field for each item in the model gets populated? Or does this field remain blank? If this field remains blank, will Webengine revert back to prioritizing the first media field of the model? Does this also create a new version for all items in the model? Will it publish those changes? If so, how will the system decide which version to publish?

[finnar-bin]

@giseleblair I cannot comment on how webengine will handle it but I believe there's going to be a change made to it as well that will follow the same logic for these changes in manager-ui to make sense, perhaps @jjaguilar08 could comment on this.

But regarding the og_image content field, when they click "Customize Image" it will essentially create a new empty og_image field in the content itself, all the content items will have this field but will be empty until the user explicitly adds a value into that field per content item.

[finnar-bin]

Found a major bug that prevents creation of new dataset items. Fix created: #2945

[zcolah]

@finnar-bin here is my response

SEO Tab

Issue 1

Zosh: User can Navigate to the SEO Tab even if the changes in the Edit Tab cannot be saved due to an error. A user should not be able to navigate out to another tab or page if an error in saving occurs. Instead they should remain on the same page (URL) and read why the error happened. See Loom:https://www.loom.com/share/ccb4912b1637479aaaca3c17eba16d62

Nar: The save button got triggered due to the wysiwyg, the saved data was auto-formatted by the wysiwyg component on load. That most likely happened due to the old data being saved using the old wysiwyg and when it was loaded to the current wysiwyg it auto-formatted the text causing an on change which marked the content item as "dirty" because of the said change. If you just click save when this happens, it should no longer happen again since it essentially fixed the formatting already. But regarding the issue where it still moved you to the SEO tab even if there was an error saving the file, I'll fix that.

Thank you for clarifying and fixing this.

Issue 2

Zosh: Meta Image Does Not Appear in Social Media Previews https://www.loom.com/share/e2af6f73f2be443cb8cd840f7dc6c44f

Nar: I am using the media resolver to render the images in the social media previews, I reached out to @mattezra and he told me there are some ongoing issues with the media resolver api at the moment. It seems to be able to resolve some image zuids while for some other image zuids it fails to do so causing that issue.

Is this an issue only happening in stage or is it also happening in production? Do we have a timeline of when this will be fixed by @mattezra?

Issue 3

Zosh: Canonical Tag & Sitemap Priority Dropdown Menus cover/overlap with the Input itself. This makes it difficult to see the currently selected value. https://www.loom.com/share/af778d8ce6b14503beafa42d76b3c683
Nar: This is the default behavior of MUI's select component and it doesn't seem like there's a way to change the dropdown behavior to be like the autocomplete since it's using different popup components under the hood. There's already an open issue regarding this in the mui/material-ui#36776 already but it doesn't seem like there's any working workaround to fix to it yet.

Thank you for this added context. I read the thread and I understand why it appears the way it does in some contexts. For now let us pause the issue and not worry about it.

In the future we can explore potentially using the autocomplete input as the default input option for all drop downs in Edit Content Item and potentially the SEO tab as well. I have made a ticket for the same: #2947

Issue 4

Zosh: Meta Description Input Bug with Spaces at the end Please check if this is happening for Meta Title as well.
https://www.loom.com/share/8e137c06821d427a80c7baa1f025ef8c

Nar: This is only happens to multiline textfields (textarea) and is the default behavior as well. If you check out the input box in github below, it behaves the same way when you spam space towards the edge of the textarea. There's a workaround I found in mui/material-ui#41490 but it makes it so that the text doesn't wrap around properly, you instead get a long horizontal scroll unless you deliberately press enter to go to a newline.

Okay understood, we do not need to fix this for the time being then.

[zcolah]

1. Why does the image disappear after you click customize image?

Nar: The logic behind that is once that button is clicked, it then creates the og_image field which is then what's being checked for the meta image previews. The ask there was to always use the og_image field if it exists regardless if it's storing a file or not. @zcolah might need to also check into that flow.

@finnar-bin thank you for providing the above to context to @giseleblair on why there was no image.

@giseleblair here is a detailed breakdown of the rules of when which button appears and why. This will give you added context overall into how the buttons appear and why.

2. Does this logic also apply to og_title/description and tc_image/title/description?

Currently it does not apply to og_title and og_description. I was not aware that users usually create a separate og_title and og_description field and that they use those for the SEO previews. I will need to ask Randy about how to handle these scenarios. Same goes for tc_image/title/description.

We were not aware that users create separate fields for twitter. We have not designed to accommodate for any of these scenarios. I will design a solution with Randy and get back to you.

3. Once the user clicks on Customize Image does this add the og_image to the content model?
Yes, once a user clicks on Customize Image, it adds an og_image field to the content model. Here are the details for the og_image field that will be created:

• Field Label: Meta Image
• API ID: og_image
• Field Type: Media Field
• Field Description: This field allows you to set an open graph image via the SEO tab. An Open Graph (OG) image is an image that appears on a social media post when a web page is shared.

4. Does this mean that the og_image content field for each item in the model gets populated? Or does this field remain blank? If this field remains blank, will Webengine revert back to prioritizing the first media field of the model?

This field will remain blank until a user uploads an image to the og_image field. With respect to your question on Web Engine, it will behave exactly how it currently does when a user has an empty og_image field.

5. Does this also create a new version for all items in the model? Will it publish those changes? If so, how will the system decide which version to publish?

It does not create a new version for all items in the model. It will not publish those changes.

[giseleblair]

@zcolah It seems like we are recreating the wheel here. Webengine already has all of this logic put in place. Overall, what needs to be displayed in this preview component is the real data that is generated by Webengine and not this simulated output. There are already inconsistencies on how Webengine and this preview component work. It also means that any updates done on Webengine regarding SEO will then need to be applied here, creating 2 touch points as opposed to 1. This will inevitably result in deviations between the Manager UI and Webengine.
For point 4 provide the exact behaviors that will result in creating an empty og_image field with regards to Webengine. This needs to be fully understood before we deploy as it could result in empty SEO tags for our customers.
For point 5, you mentioned the content will not be published. This makes it unclear as to how the content added to the og_image field is supposed to be pushed to production.

[ardeay]

Webengine do not need to change for this update.

@giseleblair for 4 og_image will only be created as a field if the user engages with og image in the new SEO tab to add an image. Otherwise, default behavior. State this in a tooltip @zcolah

2. Does this logic also apply to og_title/description No, description and title are used for both SEO/OG. State this in a tooltip @zcolah

[giseleblair]

I understand no updates need to be made to Webengine.
@ardeay regarding point 4: this still does not answer whether og_image will be populated for all items in a content model since the workflow is that og_image will be added to the model if the user interacts with Meta Image in the SEO tab. And if the answer is that it will not be populated, how does Webengine handle empty og_image fields?

[finnar-bin]

So if I understood correctly, no webengine changes need to be made therefore that would mean we need to update the logic that's currently in place in manager-ui to match how webengine picks out an image to use as the seo meta image. I could reach out to @jjaguilar08 to get a full understanding regarding that.

And if the answer is that it will not be populated, how does Webengine handle empty og_image fields?

We could probably determine this once we know how webengine picks out an image to use as a meta image, for example if it always picks out the first image we could maybe put the og_image field as the first content field item perhaps? That way webengine would always pick the value in og_image if it contains an image else check the next available image in the other content item fields.

For now, I'll temporary pause making any more changes related to this (aside from bugs and vqa-related stuff) while waiting for a clear direction on how we'll go through with the meta image preview in manager-ui. @zcolah

[zcolah]

@finnar-bin

SEO Tab

Bugs

• 1. Content and Meta Matched Words should not display special characters or spaces in the list of words. It should ignore them. See screenshot.

• 2. Words that appear less than 2 times are appearing in the Most Mentioned Words in Content Item. This should not happen.
  

[zcolah]

@finnar-bin

Bugs

• The OG Image List Item Flickers when I type anything in the OG Title, OG Description, TC Title, and TC Description inputs. https://www.loom.com/share/2d2bd6a8c6b54eb9b8189cb55ec5da6b

• The Flicker issue also occurs on the Create Experience: https://www.loom.com/share/68f1e4e6071c4fe89161d63dbad2da74

• Meta Image Field does not get cleared even when the field it is pulling the image from is cleared. https://www.loom.com/share/679d05011e1c4057810192e5f6301719?from_recorder=1&focus_title=1

• Resolve Error Blurb Bugs (See Loom): https://www.loom.com/share/a54c6edf6552465c900428e9c5d8591c?from_recorder=1&focus_title=1

  • Create Item Page: Error Blurb does not display any errors in the SEO Meta Section Fields.
  • SEO Tab: Error Blurb does not appear if there are any errors in the fields. Please add it in and make it list all SEO field errors so that the user understands what is going wrong and why they are unable to save their item.

Figma VQA

Primarily only tiny fixes needed with one material theme change.

• https://www.figma.com/design/Oc42SSkzPDozxO7zZRCUJT/SEO-Tab-%2B-AI-App?node-id=497-1264&t=u2uelDVEoiDJGNVO-1

Enhancements

• Add Empty State Text for Content & Meta Matched Words Section: "No Matching Words"
• Add Empty State Text for Most Mentioned Words in Content Item Section: "No words in your content item occur 2 or more times"

UI Updates

• Please update the Linkedin Preview Card to reflect the latest Linkedin preview card design https://www.figma.com/design/Oc42SSkzPDozxO7zZRCUJT/SEO-Tab-%2B-AI-App?node-id=600-32694&m=dev&t=SB5dpcnA8x7TKvmk-1

[zcolah]

Web Engine Changes Required

@jjaguilar08

We need the following changes made to Web Engine for the Twitter Card and Facebook Card previews

• Web Engine should not use the values from the TC_Title, TC_Description, OG_Title, and OG_Description if these fields are de-activated in the model of the content item.

• Set the Twitter Preview card to be of a summary type. Please test the same.: https://developer.x.com/en/docs/x-for-websites/cards/overview/summary

@giseleblair can assist with questions regarding these changes.

[finnar-bin]

@shrunyan this material repo PR is also a dependency for the SEO tab changes
zesty-io/material#107

[zcolah]

@finnar-bin

Enhancement

• SEO Tab & Create Page: Update the Column Widths to the following:

Left Column:

• min-width: 640 px;
• width: 60%;

Right Column:

• width: fill up the remaining space
• max width: 620 px

Bug

• Remove the * from OG Title and TC Title unless the user has marked them as required fields in Schema. If the TC Title, TC Description, OG Title, or OG Description fields are marked as required then please ensure the content item cannot be saved until they have a value.

[zcolah]

@finnar-bin

Bug (Blocking Release)

• User is able to save an item (through a secret backdoor approach) despite the Meta Title and Meta Description fields being empty.

  • Video 1: https://www.loom.com/share/4154e61993cf48a7bd0ad41e73966f1c
  • Video 2 (this happens even in the Content Tab): https://www.loom.com/share/b7962a2b22dc4ec49b763fba902bb7dc

• Right Column Analytics sections are missing for Dataset items.
  

• Do not show Right Column in Create Item Experience for Dataset items.
  

Bugs (Not blocking the release)

Error Blurb

• Page is Not Scrolling to Error Blurb:

  • On Create Page: When a user clicks on create button, the page remains static making the user confused about why their item is not being created. They have no idea it is due to an error. The expectation is the page scrolls to the top to reveal the error blurb. See Loom: https://www.loom.com/share/0fb4694dc64047af8906c989e0a9ac46
  • Same Issue is also seen on SEO Tab. Please Resolve: https://www.loom.com/share/2d75771ab3194acc96d92461015ddbd0
  • Related but not same issue on the Content Tab. Page scrolls to Error blurb only on the first time of clicking the Save Button. Each time the user clicks on save, it should scroll to the top and show the error blurb: https://www.loom.com/share/3e81ff0c09f844d1b83f0ec96164b4a0

• Error Blurb gap is missing in Content and Create experience. See Loom: https://www.loom.com/share/8222629febb2402c8d5a94524336db60 | See Figma: https://www.figma.com/design/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?node-id=1493-63842&t=ciSz4e4LuyAwg5mF-1

• App gets into Dirty State when Meta Title and/or Meta description field values are empty (aka error state) and I click on the save and publish button. Item to test with: https://8-f49f9ae69b-qxxwdv.manager.stage.zesty.io/content/6-c49a8af790-6v4sd1/7-90db9083d0-c41zn5/meta

Meta Description Field

• Multi part problem for Meta Description Field | Watch Loom: https://www.loom.com/share/e31401797acb44868a321537fb3b6ffd

  • Fix: Remove the notification alert for "Found Microsoft Smart single quotes and apostrophe. These special characters are not allowed in meta descriptions". This should only appear below the input and in the error blurb on Save.
  • Bug: Make Error Blurb render the following error in the Create App experience and SEO tab "Found Microsoft Smart single quotes and apostrophe. These special characters are not allowed in meta descriptions".
  • Enhancement: Update the Error Text for the Meta Description Field to say the following:

    Found Microsoft Smart single quotes and/or apostrophe. These special characters are not allowed in meta descriptions as it may lead to incorrect rendering, where characters show up as � or other odd symbols. Please use straight quotes (' and ") instead.

  • Enhancement: When copying the text from a Multi Line Text Field to the Meta Description field, replace “ and ” with "" in the copied text.

Text to use to test if bug is fixed:

An exploration of the historical significance, architectural grandeur, and evolving symbolism of Mumbai’s iconic Gateway of India from a historian's viewpoint.

Preview Cards

• Resolve Text overflow issue in the Google Preview Card. Watch both loom videos below
  • Video 1 (problem): https://www.loom.com/share/c784e79f6aef4ac887482e0d19b97915
  • Video 2 (solution): https://www.loom.com/share/0d4506f6b3694f36b8c5344525772212?from_recorder=1&focus_title=1

[zcolah]

@shrunyan @finnar-bin

This PR is now VQA Approved. Overall great work putting this all together @finnar-bin

Note:

• I was unable to test the DUO Mode as I am unable to create a new instance in Stage. Seems like the only way to test the project would be in production.

• There is still a Web Engine fix that is to be made. @shrunyan I will leave it to your discretion to wait for that fix to be made before deployment or after. In my eyes it is not critical to the project.

[zcolah]

Post Release Changes

@finnar-bin

May you please make two post release changes:

• Rename "Non Common Words" to "Non Filler Words" in the stats section of the SEO tab
• Restore Responsive Behavior of the Title Bar on the SEO Tab and add responsive behavior to the main seo tab container. https://www.loom.com/share/72eb663053e24d0697be261beda85ac6

[finnar-bin]

@zcolah I suggest creating a ticket for the post-release changes. This PR will be closed once it gets merged, that way it's easier to track those issues.

[zcolah]

@zcolah I suggest creating a ticket for the post-release changes. This PR will be closed once it gets merged, that way it's easier to track those issues.

#2974