More descriptive page titles

[azizLIGHT]

Many pages have a nondescriptive title 'CoVariants'.

Pages like Home, Variants, Per country, Per variant, Shared Mutations, and Acknowledgements all have a HTML title of <title>CoVariants</title>, with the exception of the FAQ page, which is titled <title>CoVariants: FAQ</title>.

Please consider using more descriptive page titles, like how the FAQ page currently is, for all the other pages, so that browser tabs can have useful titles and browsing can be done easier.

[ivan-aksamentov]

This is implemented, but someone needs to take time and fill-in the content here:

covariants/web/src/seo/seoMetadata.ts

Lines 18 to 24 in 2f2f267

	export const SEO_OVERRIDES: Record<string, PageMetadata> = {
	'/faq': {
	name: `${PROJECT_NAME}: FAQ`,
	description: `${PROJECT_NAME}: Frequently Asked Questions`,
	image: faqImage,
	},
	}

A little guide is here: #41

Contributions are very welcome!

[azizLIGHT]

That's what I saw as well but wasn't sure because it seems a little 'hard-coded'.

How can I use the already existing title of the page that exists in the content, and add it to <title>?

For example, /per-country has a in-page <h1 class="PageHeading-sc-1380ypn-0 gStIVs">Overview of Variants in Countries</h1> and that should be the title for this page probably. How can I refer to that title programmatically in <title> inside seoMetadata.ts. I would like to avoid writing it out manually in seoMetadata.ts, in case the title in <h1> changes, then you have a different and old title inside seoMetadata.ts that will have to be changed again manually.

[ivan-aksamentov]

I guess you could extract the existing titles into variables or into a map, and then import into both places. But it's an inconvenience for content editing.

Alternatively, instead of this centralized solution with a map and Document component, one could use the Head component on every page: https://nextjs.org/docs/api-reference/next/head. This way the SEO things would be in close proximity to the content. I haven't explored this solution, there might be drawbacks as well. For a complete solution (with social tags etc.) you'd probably need to reimplement tags and logic similar to what's in the Document component, but for every page.

Feel free to play with different approaches and try different things if you have time.

P.S. Note that Next.js has 2 Head components. One in 'next/document', another in 'next/head'.

[emmahodcroft]

This was another post-Christmas PR that I missed entirely - sorry!
Something that auto-updates would be a nice touch! However in the meantime, I updated these manually. See #289