Recipes page showing partial metadata in HTML #549

New Issue

basebuilder · 2024-01-12T14:52:35Z

basebuilder commented

2024-01-12 14:52:35 +00:00

After sharing a link to https://recipes.coopcloud.tech/hugo in Element, I noticed it showed a generic title in the page metadata Co-op Cloud Recipes

Which confused me, as in my tab it showed the name hugo - Co-op Cloud Recipe

Upon inspecting the HTML of the page, I see:

<title>Co-op Cloud Recipes</title>

Having done zero further inspection, I assume this happening as the recipe name is being generated in JS / DOM land or such?

In general, it's probably a good idea to not only have the proper page title rendered, but also the Open Graph tags with further metadata included.

After sharing a link to `https://recipes.coopcloud.tech/hugo` in Element, I noticed it showed a generic title in the page metadata `Co-op Cloud Recipes` ![Screenshot 2024-01-12 at 15-43-45 Element Solar Co-op Cloud Tech.png](/attachments/2f7fd1c3-7019-4dfe-8229-a3279b15d4f9) Which confused me, as in my tab it showed the name `hugo - Co-op Cloud Recipe` ![hugo-browser-tab.png](/attachments/4467b883-9268-4ded-b66a-a5f5a823f18f) Upon inspecting the HTML of the page, I see: ``` <title>Co-op Cloud Recipes</title> ``` Having done zero further inspection, I assume this happening as the recipe name is being generated in JS / DOM land or such? In general, it's probably a good idea to not only have the proper page title rendered, but also the [Open Graph](https://ogp.me) tags with further metadata included.

Screenshot 2024-01-12 at 15-43-45 Element Solar Co-op Cloud Tech.png

46 KiB

hugo-browser-tab.png

3.5 KiB

👀 1

3wordchant commented

2024-01-12 14:57:06 +00:00

thanks so much for the report @basebuilder! 👏

I'm kind of amazed it's working at all, I wonder if Element is following a redirect in a non-standard way? https://opengraph.dev/panel?url=https%3A%2F%2Frecipes.coopcloud.tech%2Fhugo

Indeed the app is written in Elm, and all the content is generated client-side. Wonder how to add opengraph tags then 🤔

thanks so much for the report @basebuilder! 👏 I'm kind of amazed it's working at all, I wonder if Element is following a redirect in a non-standard way? https://opengraph.dev/panel?url=https%3A%2F%2Frecipes.coopcloud.tech%2Fhugo Indeed the [app is written in Elm](https://git.coopcloud.tech/coop-cloud/recipes.coopcloud.tech/), and all the content is generated client-side. Wonder how to add opengraph tags then 🤔

basebuilder commented

2024-01-12 15:13:41 +00:00

I haven't dealt with this issue in awhile as all my single page apps are authenticated. I always use server-side rendering for things I want "on the web" and thus output HTML for those bits. I know nothing about Elm, but maybe it has some ability to do that? Perhaps helpful?

Single Page Applications and Open Graph

I haven't dealt with this issue in awhile as all my single page apps are authenticated. I always use server-side rendering for things I want "on the web" and thus output HTML for those bits. I know nothing about Elm, but maybe it has some ability to do that? Perhaps helpful? - [Single Page Applications and Open Graph](https://stackoverflow.com/questions/16069501/single-page-applications-and-open-graph)

basebuilder added the

recipes.coopcloud.tech

label 2024-02-06 11:01:22 +00:00

basebuilder added this to the Improvements to Websites milestone 2024-02-06 11:06:35 +00:00

Sign in to join this conversation.

No Milestone

No project

No Assignees

2 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: coop-cloud/organising#549