Topic: [Feature/Implemented] Add in open graph data

Posted under Site Bug Reports & Feature Requests

Mairo

Janitor

Requested feature overview description.
Add necessary open graph meta tags.

Why would it be useful?
If someone is sharing the link to e6 post either on modern messaging applications, social media feeds or similar, most will show it as link only. If the site had proper data available, this would also show the user thumbnail, description and other small, but really convinient data.
This would also make it more viable to link post pages instead of direct url to images.

What part(s) of the site page(s) are affected?
At least post pages, but preferabely all sites publicly accessible pages.

Updated by KiraNoot

Chaser

Member

OG Reference:
Order isn't important but I like to sort stuff alphabetically.

<meta property="og:title" content="e621 - Art Archive"/>
<meta property="og:site_name" content="e621"/>

<!-- This is conditional, specify website if it is an image -- >

<meta property="og:type" content="website"/>

<!-- if it is a webm/flash, use this instead -- >

<meta property="og:type" content="video.other"/>

<!-- adding of these are optional but preferred, pick and choose which you want -->
<meta property="video:duration" content="${post.duration}"/>
<meta property="video:release_date" content="${post.postDate.as("YYYY-MM-DDTHH:MM:SSZ")}"/>

for character in post.tags.fromType("character"):
    <meta property="video:actor" content="${character}"/>

for character in post.tags.fromType("artist"):
    <meta property="video:writer" content="${artist}"/>

<!-- continue regular stuff -- >

<meta property="og:description" content="${post.description if post.description != "" else post.tags}"/>
<meta property="og:url" content="https://e621.net/post/${post.id}"/>
<meta property="og:image" content="${post.thumbnail}"/>
<meta property="og:image:width" content="${post.thumbnailWidth}"/>
<meta property="og:image:height" content="${post.thumbnailHeight}"/>
<!-- don't add full image if webm/flash -->
<meta property="og:image" content="${post.fullImage}"/>
<meta property="og:image:width" content="${post.fullImage.width}"/>
<meta property="og:image:height" content="${post.fullImage.height}"/>

Don't forget to add prefix="og: http://ogp.me/ns#" to the <head> field if added

Updated by anonymous

Circeus

Blocked

I _have_ been wondering why that doesn't work for E621... I didn't know specific meta tags were needed!

Updated by anonymous

KiraNoot

Member

I shall look into it. Not sure how easily manipulated the header area is in the current template structure.

I also want to nominate this specification for most misleading name.

Updated by anonymous

Tuvalu

Blocked

Definitely +1 for this. I've noticed that even FurAffinity has Open Graph support.

Circeus said:
I _have_ been wondering why that doesn't work for E621... I didn't know specific meta tags were needed!

Before OpenGraph came into common use, services (Facebook, for example) would just grab the largest image on the page. Some things may still do that, but for the most part you'll need the OG metatags.

Updated by anonymous

KiraNoot

Member

Code written and deployed to e9. Pending deploy on e6.

Updated by anonymous

KiraNoot

Member

It's out. Thumbnails are kinda small when used, but I have't found a good way to fix that. If anyone has any insight into why the thumbnails displayed are downscaled to such a small size in most applications, I'd be thrilled to know.

Updated by anonymous

  • 1