Better preview cards for suttas in external environments such as Discourse and DIscord

[Pasanna]

This has been a personal bugbear for a long time.

The information in our ‘cards’ (opengraph?) is pretty much meaningless. Especially when multiple links are pasted in an environment such as Discord.

They don’t even have the sutta title in them.

Here is what they look like in Discord for example.

Even here on Discourse they don’t convey any information

Surely the second instance of ‘SuttaCentral’ should be the Sutta title in Pali and English (seeing as the cards are rendering EN)

It’d be great if we can pull the other information from the suttaplex cards too, making these link truly useful and engaging. I really think this will help with getting more people clicking through and reading the suttas.

[Pasanna]

Here is a quick mockup of the initial changes I propose.

Once we get further in the images for suttas project a feature image to replace the stock card image would be delightful, as per this thread.

[Snowbird]

This is a longstanding problem, already mentioned here and here.

As I understand, there is no easy solution, because pages are built from the API. So until the API is called, it’s not possible to know what even the title of the sutta is. And those tools that create the preview links are just fetching the headers from the page (as far as I know) not actually loading the page. If you are on a slowish internet connection you can even see this in real time. When you load a sutta it takes some time before the title of the sutta in known.

There isn’t much to be gained by making mockups. Each platform makes their own previews based on the og-tags.

You can use a tool like https://www.opengraph.xyz/ to test a page. Even just looking at the html of a sutta page, you can see this:

<meta property="og:title" content="SuttaCentral">
<meta property="og:description" content="Early Buddhist texts from the Tipitaka (Tripitaka). Suttas (sutras) with the Buddha's teachings on mindfulness, insight, wisdom, and meditation.">
<meta property="og:image" content="https://suttacentral.net/img/social_sharing.png">
<meta property="og:image:alt" content="SuttaCentral">
<meta property="og:url" content="https://suttacentral.net/">
<meta property="og:site_name" content="SuttaCentral">

But perhaps since the previous posts there is a new solution to this problem.

[Pasanna]

Having spent most of my professional life developing for Wordpress and similar CMS environments, the way our pages are built is definitely another . It seems like a complete overkill to build every component on the fly every… single… time.

[agilgur5]

@Snowbird

This is a longstanding problem, already mentioned here

For reference, the GitHub issue therein is probably good to use as a source-of-truth:

Update SC's social sharing information

@Snowbird

But perhaps since the previous posts there is a new solution to this problem.

Possibly more crawlers support JS these days, but otherwise same as before in that it requires some form of either pre-generating or server-side rendering more of the HTML.
SSR has gained more adoption in recent years, so that may impact crawler decisions. But then also AI crawlers interact with pages more, so would have to wait for JS, so

I wrote up a bit of high-level implementation in the issue