Social Sharing Preview Image + Title

[shiffman]

When a link is shared, each page should include a preview image and the title. Right now, the homepage, for example, has no preview (should use the book mock-up) and the title "Examples":

See https://thecodingtrain.com for an example system.

[jasongao97]

I added the description of the first 150 characters for each chapter. Would it be preferable for the preview images to be the same as the opening figures for the chapters, or should they all simply feature the book mock-up?

[shiffman]

I think either the physical book mock-up or a nice example screenshot? Don't feel strongly about this, but I think the chapter opening images will be confusing as the primary shared element.

[jasongao97]

I think either the physical book mock-up or a nice example screenshot? Don't feel strongly about this, but I think the chapter opening images will be confusing as the primary shared element.

Got it, that makes sense! I'll start with the mock-up first and then explore if there are any better options.

[shiffman]

Re-opening, looks like the social sharing image doesn't work on twitter?

https://twitter.com/pierre_nel/status/1785347109987762275

It is working in Discord though maybe I should write a short few sentences for each chapter for text to include?

[fturmel]

Hi team, saw the Coding Train issue linking back here.

At first glance, it could be because the twitter:image meta tag is a relative link instead of absolute? Sometimes these service features can be proxied/cached and it's possible that they wouldn't find the origin anymore.

Google around for tools that can help audit og/twitter metadata, that might be helpful.
https://socialsharepreview.com/?url=https://natureofcode.com/
https://www.opengraph.xyz/url/https%3A%2F%2Fnatureofcode.com%2F

[fturmel]

Also it looks like the "name" attribute should be used for Twitter and not "property". Open Graph uses "property" so it seems OK.

https://developer.x.com/en/docs/twitter-for-websites/cards/overview/summary
https://ogp.me/

It might've looked like some of the tags worked because there are fallbacks to og tags in some cases. https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup

[fturmel]

@shiffman with #975 merged this issue can be closed. The previously mentioned tweet displays the thumbnail image correctly now.

[shiffman]

Thank you!