[blog] Fix images for the docs separation post

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

Follow up to #32044

https://deploy-preview-32257--material-ui.netlify.app/blog/docs-restructure-2022/

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 00dd0dd

[mbrookes]

Could we take advantage of this PR to clarify what the difference is in the search result images?

Instead of: "Here is a comparison of before and after when searching for the "pagination" feature:"

"Previously a search for pagination returned results for the Material UI pagination component, followed by those for the data grid:

[first image]

Now when viewing the MUI X section, only results related to the data grid pagination feature are returned:

[second image]"

[oliviertassinari]

I'm on my Twitter feed, looking at our latest tweet: https://twitter.com/MUI_hq/status/1513971476038311939, looking into writing something to congratulate the work of the team publicly, but it got me thinking before doing such. What do you think about these two potential opportunities?

1. we remove the default social image for all blog posts (i.e. we have something personalized or nothing). I feel like the core content of the tweet would work better without the default image (compared to the current tweet rendering):

2. We use the first image as a social card, it would work better than 1. and current:

(same reasoning for https://mui.com/blog/lab-date-pickers-to-mui-x/)

[danilo-leal]

We use the first image as a social card

I think that would work perfectly. If I'm not mistaken, the markdown files already support that, don't they?

[samuelsycamore]

@oliviertassinari I think option 2 is preferable there—it's always better to have any image rather than none at all, so you'll have a better chance of catching eyes while scrolling the feed. Eventually I would like for us to integrate custom OG cards (#32036) for each page, ideally automated.

[oliviertassinari]

If I'm not mistaken, the markdown files already support that, don't they?

@danilo-leal Correct, it needs a card.png image and

material-ui/docs/pages/blog/2021.md

Line 6 in 6d9f42a

card: true

you'll have a better chance of catching eyes while scrolling the feed

@samuelsycamore Agree, but to explain my reasoning, I need to add two variables: Y: the percentage of people noticing the tweet, Z: the percentage of people clicking on the tweet once they notice it. My concern is that people might read the content on the image (no value) more than the content of the tweet (value), in the end, not click on it to read the content in more depth. So in the current model (order of magnitudes) Y = 85, Z = 15, a conversion of 13% while in my proposal Y = 80, Z = 18, a conversion of 14%. Is this model true? I don't know, but food for thought.

[danilo-leal]

it needs a card.png

Does the social card/image need to be within the markdown file, at the start of it, like in this 2021 post?

[oliviertassinari]

@danilo-leal I'm doing the change with a new commit to illustrate the process once. I think that it will be simpler to describe it.

[danilo-leal]

@oliviertassinari cool, thanks! Are we good for merging? Feel like this one is 👍

[oliviertassinari]

All good on my end, a great step forward