Add Open Graph meta tags to each page

[codemonkey800]

Open Graph meta tags allow us to enrich the appearance of links on social media. We currently have Open Graph tags implemented for collections: #553

But we do not have it for other pages. The main things we can add to the Open Graph tags are:

• Title
• Type
• URL
• Image
• Description

napari-hub/frontend/src/pages/collections/[symbol].tsx

Lines 84 to 102 in 36f7ce2

	<>
	<meta property="og:title" content={collection.title} />
	<meta property="og:type" content="article" />
	<meta
	property="og:url"
	content={`https://napari-hub.org/collections/${collection.title}`}
	/>
	<meta property="og:image" content={collection.cover_image} />
	<meta property="og:description" content={collection.summary} />
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content="@napari_imaging" />
	<meta name="twitter:title" content={collection.title} />
	<meta name="twitter:description" content={collection.summary} />
	<meta name="twitter:image" content={collection.cover_image} />
	{curatorTwitter && (
	<meta name="twitter:creator" content={`@${curatorTwitter}`} />
	)}
	</>

[EricMaxWang]

@codemonkey800 split ticket into different tickets for: metadata vs. image service

TBD on image service effort; @codemonkey800 to follow up w/ @neuromusic

[codemonkey800]

almost done with a PR for this, but currently running into an issue with duplicate meta tags being stuck on the page after initial render:

meta-tags-duplicate-issue.mp4

I'm looking into a fix right now

[codemonkey800]

actually I looked into it more, and I think it's fine if we hold off on fixing the above issue for now. what's important is the meta tags are correct on initial render, and they are:

it seems like the duplicates happen after Next.js hydrates the page, but for open graph it doesn't matter since it doesn't use JavaScript to load the tags

[codemonkey800]

created a separate issue to track the above bug:

#912