Add ograph tags to Phadra to enable previews when posting a link to phaidra in social networks

Hi!

when embedding Phaidra content in social networks (and also here), there’s no preview. This is an example:

https://phaidra.univie.ac.at/detail/o:2090186

Sorry, the preview here shows only when editing, here the screenshot:

===

===

I don’t have more in-depth knowledge of the software, but is this a feature request or is the OG not implemented correctly?

the feature is there if I inspect the page but maybe socials get the page directly and the meta tags are not rendered. Here some hints:

We do use vue-meta, that’s where all the meta-tags are coming from. Does that social say which tags it needs?

I don’t see any ograph (https://ogp.me) properties in the source. @yurj what do you refer to when inspecting? Also, when testing in https://www.opengraph.xyz/ I get ‘invalid URL’ in return. I tried to find examples of repositories that do use ograph, but I could not find any (did not look that hard). From what I know, ograph is generally accepted as default, although Twitter has its own version.

With the limited amount of knowledge I have about repositories, having a preview for social would be very meaningful.

The Guardian does a really good job implementing ograph: OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph

Tags are rendered via javascript. It is fine in the browser ma socials do a GET and find no meta, I suppose.

using https://biblio.unipd.it/news/science4all-2024 I get:

1 Like

As far as I see they are there

And yes there was a feature request for it: Meta tags for social media · Issue #33 · phaidra/phaidra-ui · GitHub

For it to work properly you also need ‘<meta property=“og:title” …>’ as far as I can see.

If you grab the page with curl? I don’t see them…

og:title is there, but why it does not get rendered on server is a mystery to me, I’ll put it on my TODO list!

OK it works in v3.3.x on sandbox: 1871 Original Three Color Print of Botanical Specimens* (Phaidra Sandbox - o:179694) though you would not be able to check with socials. So this should get fixed when I come to roll out the latest version to our prod.

1 Like

On second thought, you might be able to test it, if the app is making the request directly from you browser and you can reach sandbox.

You can temporarily install a browser extension, e.g. Social Share Preview – Free Browser Extensions, to check the social sharing preview on Phaidra Sandbox.

1 Like

I confirm, curl displays the ograph meta tags. Great!

1 Like