Metadata and opengraph tags

[funkydunc]

Added title, description and opengraph tags to all pages.

Home, About, Search and Listing pages have placeholder description keys in the en.json and nl.json files. These descriptions can be updated later.

Using the meta.json file for Exhibition, Object pages. Using the publication file for Publication detail page. Collection page still uses the collection.json as discussed.

Title, Summary and image are pulled from these files to use in the metadata.

It was necessary to remove static prerendering from the Exhibition page via generateStaticParams for the time being, in order to use generateMetadata. There may be a workaround to come back to.

A breadcrumb style title has been chosen, see slack thread https://digirati.slack.com/archives/CE4B06X9V/p1736778154847079
We later discussed that this would be reversed, and not contain a middle item.

e.g.

TU Delft Academic Heritage
About | TU Delft Academic Heritage
Exhibitions | TU Delft Academic Heritage
Irrigation Knowledge | TU Delft Academic Heritage

Used a png downloaded from Delfts corporate design site, as the og tags require a size to be given so that the image appears a decent size on the social preview, which can't be done with svg.

Made helpers for getting the site name, title and basic metadata to avoid repeating code in many pages.

The metadata helper accepts:

• locale
• siteName
• title
• description
  and is used on pages that do not have a dynamic title / description / image that come from a file. For detail pages, the metadata is explicitly defined.

n.b. Currently no object meta files have summary, which is used for the <meta name="description" tag, so this tag is missing on Objects.

n.b. We are waiting for the descriptions to be provided for the non dynamic pages:

• Home / About / Search
• Exhibitions Listing / Collections Listing / Publications Listing
  before merging this, to avoid the current placeholder description being indexed.

this shows an example of the tags generated in the page source

<title>Voices of Women in Science  | TU Delft Academic Heritage</title><meta name="description" content="Voices of Women in Science "/><meta property="og:title" content="Voices of Women in Science  | TU Delft Academic Heritage"/><meta property="og:description" content="Voices of Women in Science "/><meta property="og:url" content="https://heritage.tudelft.nl/en/objects/voices-of-wis"/><meta property="og:site_name" content="TU Delft Academic Heritage"/><meta property="og:locale" content="en"/><meta property="og:image" content="https://dlc.services/thumbs/7/24/14204410-74cc-5796-04f2-a59eeaa8ab44/full/200,/0/default.jpg"/><meta property="og:image:width" content="200"/><meta property="og:image:height" content="110"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Voices of Women in Science  | TU Delft Academic Heritage"/><meta name="twitter:description" content="Voices of Women in Science "/><meta name="twitter:image" content="https://dlc.services/thumbs/7/24/14204410-74cc-5796-04f2-a59eeaa8ab44/full/200,/0/default.jpg"/><meta name="twitter:image:width" content="200"/><meta name="twitter:image:height" content="110"/><title>TU Delft Academisch Erfgoed | Collecties</title><meta name="description" content="Collections listing description nl"/><meta property="og:title" content="TU Delft Academisch Erfgoed | Collecties"/><meta property="og:description" content="Collections listing description nl"/><meta property="og:url" content="https://heritage.tudelft.nl/"/><meta property="og:site_name" content="TU Delft Academisch Erfgoed"/><meta property="og:locale" content="nl"/><meta property="og:image" content="http://localhost:3000/logo/TUDelft_logo_rgb.png"/><meta property="og:image:width" content="1080"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="TU Delft Academisch Erfgoed | Collecties"/><meta name="twitter:description" content="Collections listing description nl"/><meta name="twitter:image" content="http://localhost:3000/logo/TUDelft_logo_rgb.png"/><meta name="twitter:image:width" content="1080"/>

<title>Theodoliet met controlekijker door Secrétan | TU Delft Academic Heritage</title><meta property="og:title" content="Theodoliet met controlekijker door Secrétan | TU Delft Academic Heritage"/><meta property="og:url" content="https://heritage.tudelft.nl/en/objects/d06fa982-fd1e-4436-a255-7717aa3af9f6"/><meta property="og:site_name" content="TU Delft Academic Heritage"/><meta property="og:locale" content="en"/><meta property="og:image" content="https://dlc.services/thumbs/7/18/4045ba8b-2160-40b4-9a4b-ae2235280f3d/full/200,/0/default.jpg"/><meta property="og:image:width" content="200"/><meta property="og:image:height" content="133"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Theodoliet met controlekijker door Secrétan | TU Delft Academic Heritage"/><meta name="twitter:image" content="https://dlc.services/thumbs/7/18/4045ba8b-2160-40b4-9a4b-ae2235280f3d/full/200,/0/default.jpg"/><meta name="twitter:image:width" content="200"/><meta name="twitter:image:height" content="133"/>

<title>The Spanish Flu in Delft | TU Delft Academic Heritage</title><meta name="author" content="Abel Streefland"/><meta property="og:title" content="The Spanish Flu in Delft | TU Delft Academic Heritage"/><meta property="og:url" content="https://heritage.tudelft.nl/en/publications/delta-spanish-flu"/><meta property="og:site_name" content="TU Delft Academic Heritage"/><meta property="og:locale" content="en"/><meta property="og:image" content="https://dlc.services/thumbs/7/21/b65dbfcc-4daf-0b7d-86fc-74a126248b03/full/full/0/default.jpg"/><meta property="og:image:width" content="1080"/><meta property="og:type" content="article"/><meta property="article:published_time" content="July 20, 2020"/><meta property="article:author" content="Abel Streefland"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="The Spanish Flu in Delft | TU Delft Academic Heritage"/><meta name="twitter:image" content="https://dlc.services/thumbs/7/21/b65dbfcc-4daf-0b7d-86fc-74a126248b03/full/full/0/default.jpg"/><meta name="twitter:image:width" content="1080"/>

[github-actions]

Netlify output

Static site (preview): https://deploy-preview-32--heritage-tudelft.netlify.app
IIIF (preview): https://deploy-preview-32--delft-iiif.netlify.app
IIIF Collection (preview): Theseus

[funkydunc]

Converted to draft while amendments noted during yesterday's call are addressed.

[funkydunc]

DO NOT MERGE UNTIL WE HAVE THE META DESCRIPTIONS FROM JULES.

[sammeltassen]

Some feedback on this PR:

• Can you use the largest rather than the smallest thumb size for the meta image tags?
• Can you remove the TU logo as default image? I'd like to use a rotating IIIF image for this, currently:

https://dlc.services/iiif-img/7/13/00a1a6c3-25cb-4873-b570-2a77205852c9/0,291,854,854/800,800/0/default.jpg

(This was used on the previous site; I made it square for compatibility but you can also use:)

https://dlc.services/thumbs/7/13/00a1a6c3-25cb-4873-b570-2a77205852c9/full/683,1024/0/default.jpg

• Can you add a default description when it is missing from the page metadata? The following defaults can be used:

EN: Explore the history of Delft University of Technology and the Special Collections of TU Delft Library
NL: Verken de geschiedenis van de TU Delft en de bijzondere collecties van de TU Delft Library

• It would make more sense to me to add the descriptions of the static pages in the frontmatter of the mdx source file and if this is missing use the default description. Would that be possible?
• Can you provide an example for adding a description and image to an article?
• Will the image tags be updated when changing the canvas on object pages? Will that work be part of this PR or the other one?
• Can you check the encoding of article:published_time; I don't think this is correct

[funkydunc]

Thanks for the feedback @sammeltassen. Please reply if you need any further answers to the points below.

Can you use the largest rather than the smallest thumb size for the meta image tags?

I've consulted @stephenwf who has advised this would be a separate ticket.

Can you remove the TU logo as default image? I'd like to use a rotating IIIF image for this, currently
https://dlc.services/iiif-img/7/13/00a1a6c3-25cb-4873-b570-2a77205852c9/0,291,854,854/800,800/0/default.jpg

Yes I can use this image. For the 'rotating' behaviour, will you rotate the image yourself by editing the code / replacing the image?

Can you add a default description when it is missing from the page metadata? The following defaults can be used:
EN: Explore the history of Delft University of Technology and the Special Collections of TU Delft Library
NL: Verken de geschiedenis van de TU Delft en de bijzondere collecties van de TU Delft Library

Yes

It would make more sense to me to add the descriptions of the static pages in the frontmatter of the mdx source file and if this is missing use the default description. Would that be possible?

For 'publications' mdx files and the 'about' page mdx file, this is fine.

Can you provide an example for adding a description and image to an article?

For Publications, it can use the description and image from the frontmatter. Publications are currently the only pages which are tagged as 'articles'. Does that answer your question?

Will the image tags be updated when changing the canvas on object pages? Will that work be part of this PR or the other one?

The ability to link to a specific canvas of an object page by appending ?id=<canvas index> to the url, is in this PR.
The ability for the image tag to reflect the selected canvas image will be in a separate PR.

Can you check the encoding of article:published_time; I don't think this is correct

Yes, I will check

[funkydunc]

It would make more sense to me to add the descriptions of the static pages in the frontmatter of the mdx source file and if this is missing use the default description. Would that be possible?

I've now added mdx files for Home, Search, plus Collections, Publications, Exhibitions listings, in #34 so this behaviour will be consistent across the site.

[funkydunc]

@sammeltassen Just to double check.
I've merged #35 and #34 back into this PR, and given the branch a quick test. It looks good to me.
Am I OK to merge to main? Thank you!

[sammeltassen]

@funkydunc Looking good, I only noticed that the default imageHeight is incorrect on collection pages.

About the id=[canvasIndex]: Can the query param automatically be added when navigating the object (so that it can easily be shared as well)?

[funkydunc]

default imageHeight is incorrect on collection pages

Well spotted - this has been fixed.

If you can let me know when this is good to merge, that would be great, thanks @sammeltassen

[funkydunc]

About the id=[canvasIndex]: Can the query param automatically be added when navigating the object (so that it can easily be shared as well)?

For the url to update automatically to contain the id query string parameter, while paging through an object, I'd like to split that into a separate ticket.