Issue 1242 url preview

[fflorent]

Context

When previewing the URL of an instance (say https://docs.getgrist.com/ ) in websites or apps, it simply displays "Loading..." without any further description or images. It's quite confusing.

See #1242 for detailed steps to reproduce.

Proposed solution

• the description defaults to "Grist is the evolution of spreadsheets." and is translatable
• the icon defaults to statics/img/opengraph-preview-image.png (introduced in this PR)
• the title in meta descriptions defaults to Grist, the evolution of spreadsheet, and to [doc name] - Grist if a document is consulted.

Also a technical note: I had to change the way requestUtils deduce the host of the home, so it takes into account the port. Otherwise this test failed with my change, as I now specify the absolute URL for serving static resources (needed for specifying the opengraph icon).

Related issues

Fixes #1242

Has this been tested?

• [x] 👍 yes, I added tests to the test suite
• [ ] 💭 no, because this PR is a draft and still needs work
• [ ] 🙅 no, because this is not relevant here
• [ ] 🙋 no, because I need help

Screenshots / Screencasts

Here is how the preview of the instance link looks like on Signal:

And how it looks like when previewing a document (:warning: Important: it must be shared publicly to obtain this result):

You also may check this website which seems to show the rendering of URL previews on different websites: https://opengraph.dev/

Home page: https://opengraph.dev/panel?url=https%3A%2F%2Fgrist-fflorent-grist-core-issue-1242-url-preview.fly.dev%2F Doc page title: https://opengraph.dev/panel?url=https%3A%2F%2Fgrist-fflorent-grist-core-issue-1242-url-preview.fly.dev%2FinSPY9A8z7X3%2FMy-document-title

[github-actions[bot]]

Deployed commit 64685b3d13870d72f94c27d1c3ba91f97668d367 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-03T13:44:16.143Z)

[github-actions[bot]]

Deployed commit aeb4a245d0fc661bfc347c5cb2ba03d9f7eb0d32 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-04T09:10:29.627Z)

[github-actions[bot]]

Deployed commit 715b5ebbc4a28a7153efcbe35f43290af2af873a as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-04T10:05:07.677Z)

[github-actions[bot]]

Deployed commit 9a72269ae801372761fe6706e09ecf82540fafd4 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-04T10:46:01.039Z)

[github-actions[bot]]

Deployed commit 3aabb0aea9274dd447cd2fedaa95bfd90edca5f4 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-04T11:47:21.488Z)

[github-actions[bot]]

Deployed commit 725aeb9b7a469c3e691e609c9719e26bb0e891e7 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-04T12:51:34.330Z)

[github-actions[bot]]

Deployed commit b81bea2d058be8b43abf1f4ad4f73fafd480a7f0 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-06T08:18:40.164Z)

[github-actions[bot]]

Deployed commit b2889474b05a2c073e6d9e662bb5783eafcaebbb as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-06T10:27:53.976Z)

[github-actions[bot]]

Deployed commit d752342ce4ef39596b95f1743d2464bf5c8435b0 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-06T10:52:11.687Z)

[github-actions[bot]]

Deployed commit 6ebbee8b8010ac42e56215cfbd0357c810c739e2 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-06T12:52:12.090Z)

[github-actions[bot]]

Deployed commit 6ebbee8b8010ac42e56215cfbd0357c810c739e2 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-07T07:27:13.258Z)

[github-actions[bot]]

Deployed commit 2464849f54edb4994fa2fff0d738839cab7da287 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-07T14:28:51.869Z)

[manuhabitela]

Hey, great work :)

Maybe I'm saying this too late but… how about using a more "marketing" approach for og title/images? :)

1. About the image:

Most social platforms recommend using a 1200x630px image as og:image, that is generally not just a logo, but something that looks more friendly when sharing the webpage.

If you test this with the LinkedIn inspector for example, you see they target a different aspect ratio, as X does, as Facebook does, etc.:

Here is quickly made-up example of what we could do instead (not large enough in terms of pixels but with the correct aspect ratio):

2. About the title:

I'd argue "Welcome - Grist" is also not that friendly as the main title for sharing purposes and would say having the tagline in it might be better. When showing the website preview card, some platforms show the description, some do not.

So I'd say having Grist, the evolution of spreadsheet as the title, and changing the description to prevent too much duplication, for example with the tagline visible on getgrist.com I guess, A modern, open source spreadsheet that goes beyond the grid) might fit better?

---

Sidenote: when testing this with this tool: https://www.bannerbear.com/tools/twitter-card-preview-tool, Loading… is still shown instead of Welcome…. Not an official thing by any mean but maybe it shows a remaining issue?

[fflorent]

@manuhabitela Thanks for your feedback. As discussed, I take a look of what I can, but I feel like it should not block the review as it is better than what already exist. Still this should be a nice follow-up.

Sidenote: when testing this with this tool: https://www.bannerbear.com/tools/twitter-card-preview-tool, Loading… is still shown instead of Welcome…. Not an official thing by any mean but maybe it shows a remaining issue?

I don't know how this tool works. The only thing I notice is that the preview is not rendered on Twitter, at the contrary of say https://duckduckgo.com

I am trying something to fix this.

[manuhabitela]

You're totally right, my mistake for reporting that late :)

[github-actions[bot]]

Deployed commit 3206c227534b46c5fccc6d16808f32b8c65edd60 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-15T16:02:49.258Z)

[fflorent]

@manuhabitela You don't have to apologize, remarks even late are welcome :)

[github-actions[bot]]

Deployed commit c20b19826785ed4cbabefd148810e17d33a95198 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-16T13:46:12.020Z)

[github-actions[bot]]

Deployed commit e38a25e0d0f3dff39a61b2545aa110ef3ddd468c as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-16T14:10:16.697Z)

[github-actions[bot]]

Deployed commit 2b173b6165716446e5928d709d1f96493078f326 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-17T14:39:27.200Z)

[github-actions[bot]]

Deployed commit c0daff55541c174bb48d8b95d2c132ebec8c78a8 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-17T14:43:52.291Z)

[anaisconce]

This is strictly an improvement, thank you! For the OG image, just the logo and the name Grist, no tagline, may be best.

For example, here's what Airtable and Notion look like.

@nbush Any edits to the meta description? Okay to stick with it this for now if there's nothing obviously better. :)

[nbush]

This is a great improvement that I'm so glad you were able to implement. It looks quite finicky...

The description text of "A modern, open source spreadsheet that goes beyond the grid" is perfect, and I've attached a properly-sized OpenGraph card for use.

[fflorent]

@nbush @anaisconce Thanks for your feedback (glad you're enthusiast!), I have integrated @nbush's suggestion, you will be able to use this URL to see how it renders now:

• Home page: https://opengraph.dev/panel?url=https%3A%2F%2Fgrist-fflorent-grist-core-issue-1242-url-preview.fly.dev%2F
• Doc page title: https://opengraph.dev/panel?url=https%3A%2F%2Fgrist-fflorent-grist-core-issue-1242-url-preview.fly.dev%2FinSPY9A8z7X3%2FMy-document-title

Any other suggestions come to your mind?

[github-actions[bot]]

Deployed commit 20cb7e142419dd0f2c765bd7b173e58fcdbed0b9 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-23T06:53:58.393Z)

[nbush]

@fflorent I think that looks good, apart from the main site meta description which should be "Grist, the evolution of spreadsheets", but is currently missing the "s" at the end.

[fflorent]

Fixed, thanks @nbush!

[github-actions[bot]]

Deployed commit 23824631a7e03a198c72eca9f646f299fd8ce710 as https://grist-fflorent-grist-core-issue-1242-url-preview.fly.dev (until 2024-11-23T14:41:44.562Z)

[manuhabitela]

The final visual is way better than my quick-and-dirty example, thanks :sweat_smile:

[paulfitz]

Fixed, thanks @nbush!

Neat! Looks like there's a test that needs updating after the text change @fflorent ?