Incorrect, inconsistent, and under-utilised OpenGraph tags

[sarayourfriend]

Description

Note

This issue includes a handful of highly ambigious problems with Openverse's OpenGraph usage. OGP is not necessarily precise, so there's a lot of room for interpretation. The issue is mainly that Openverse's usage is inconsistent or technically inaccurate. Please refer to OpenGraph Protocol for references of the OGP term definitions.

Openverse incorrectly uses certain OpenGraph metadata properties. It also under-utilises the available properties. Please reference this Spanish language single result page of an image of a bird for an example of these issues

Openverse's tags:

og:description : Search over 700 million free and openly licensed images, photos, audio, and other media types for reuse and remixing.
og:title : bird
og:image : https://api.openverse.engineering/v1/images/da5cb478-c093-4d62-b721-cda18797e3fb/thumb/
og:locale : es
og:locale:alternative : all locales the website supports

Flickr's tags:

og:site_name : Flickr
og:updated_time : 2023-10-17T03:52:32.759Z
og:title : bird
og:description : bird in bird house  Visit Chester Zoo
og:type : article
og:url : https://www.flickr.com/photos/chesterzoo/2385230430/
og:image : https://live.staticflickr.com/2129/2385230430_a699b25f12_b.jpg
og:image:width : 1024
og:image:height : 768

Compare something similar on Wikimedia Commons:

og:image : https://upload.wikimedia.org/wikipedia/commons/0/01/Paradisaea_apoda_-Bali_Bird_Park-6.jpg
og:image:width : 1200
og:image:height : 800
og:image : https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Paradisaea_apoda_-Bali_Bird_Park-6.jpg/800px-Paradisaea_apoda_-Bali_Bird_Park-6.jpg
og:image:width : 800
og:image:height : 534
og:image : https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Paradisaea_apoda_-Bali_Bird_Park-6.jpg/640px-Paradisaea_apoda_-Bali_Bird_Park-6.jpg
og:image:width : 640
og:image:height : 427
og:title : File:Paradisaea apoda -Bali Bird Park-6.jpg - Wikimedia Commons
og:type : website

And one from Europeana:

og:description : Sculpture, half man half bird. Ba-bird. Painted wood.
og:image : https://collections.smvk.se/carlotta-mhm/web/image/zoom/3633937/NME%20392.jpg
og:image:height : 600
og:image:type : image/jpeg
og:image:width : 424
og:title : NME 392
 :: 
Ba, Bird, Sculpture
og:url : https://collections.smvk.se/carlotta-mhm/web/object/3015635

• og:description is meant to be a description of the work. On single result pages like the one above, it is set to: <meta data-n-head="ssr" data-hid="og:description" name="og:description" content="Search over 700 million free and openly licensed images, photos, audio, and other media types for reuse and remixing.">. Instead it should be the work's description. For some Openverse results this isn't practical, and the API doesn't surface this information anyway. og:description isn't a required field, so we can just remove it.
• og:locale is meant to be the locale the work is described in, not the locale of the page. That work in particular is described in English, yet the og:locale is set to es. If og:description is changed to use the work description, I don't know if it's possible for us to easily correct og:locale to match. og:locale should also be in language_TERRITORY format, so the format we are using is incorrect.
• og:url is a required property, but isn't present. OpenGraph defines it as "The canonical URL of your object that will be used as its permanent ID in the graph", which could be the foreign landing URL but could also need to be the Openverse single result page, depending on how og:url is interpreted.
• og:type is also required but not implemented. OGP's types are extremely unclear. They have types for video and music, but not for images. All of the places above exclude it, except for Flickr, which uses article. The benefit of article is that it is built in and does include some important attributes like "article:author", which we could interpret as creator, and article:tag where we could put some tags (probably not all, though!). Alternatively, OpenGraph does not have a native "image" type, but it can be defined following OGP using Dublin Core by including the DC namespace and using it for og:type as follows:

  <head prefix="dcmitype: http://purl.org/dc/dcmitype/">
  <meta property="og:type" content="dcmitype:Image" />
  

  Audio also needs to use the DC type ("Sound" in that case), because the available OpenGraph types are only for music, which we don't know definitively one audio file or another is. We could narrow this by inferring more specific types for certain providers (like Jamendo is only music), but I don't know how many providers that's likely to be possible for.

If the OpenGraph tags are meant to describe the webpage rather than the work, then the list above is mostly incorrect. In that case, these are the issues:

• og:description is not translated, so og:locale is inaccurate. og:locale format is incorrect (should be language_TERRITORY but we only have language).
• og:type is required should be set to "website" explicitly
• og:url is required and should be set to the single result, either the Openverse.org page or the API URI
• og:image is fine as-is
• og:description might be fine, though we could use more specific versions depending on whether the work is an image or audio, and we could due to specify the source. Maybe something like "<title> by on , indexed by Openverse"?. The idea would be to relate the contents of the page more accurately than the generic statement we currently use.
• og:title should probably be something like "<title> by on Openverse", similar to the description.

og:image:height and og:image:width can also be set because we point og:image to the thumbnail, for which we can fairly easily get the dimensions. We could also potentially get og:image:type, which is just the mimetype of og:image.