Continuation of the following behavior I noticed for a link embed.
the issue
When I post a anilist link, the embedded preview doesn’t show up on this forum.
questions
Is this issue local to this forum or discourse
Does discourse use a embedding protocol that doesn’t support open graph?
Twitter, amazon, reddit and other links seem to embed properly.
How feasible is it possible to get open graph on L1?
asking the anilist site admins
Apparantly anilist uses the open graph protocol to embed previews.
example of issue
For example, posting the following link will not embed a preview of the title, description, and cover art, but rather only a link will be shown https://anilist.co/manga/97808/Zero-Game/
example of proper behavior
When I post the same link to discord, the omitted will be shown, as seen here
Tried putting the URL tags around it to see if it would work then as j have noticed the forums being a bit slo to embed properly with just regular links.
most likely that.
Is it possible we whitelist the anilist domain?
Also what’s the reasoning behind such paranoia?
Is the paranoia based on content moderation?
Is the paranoia based on security such embeds are a attack vector?
looking at the head with inspector and using a httl prettifier yields the following tags.
I don’t think anilist improperly set the header tags. It might be on L1 or Discourse’s end
<script async="" src="https://www.google-analytics.com/analytics.js" charset="utf-8"></script>
<meta property="og:image" content="https://img.anili.st/media/97808" data-vue-meta="true">
<meta property="og:url" content="https://anilist.co/manga/97808/Zero-Game" data-vue-meta="true">
<meta data-vmid="twitter:card" name="twitter:card" content="summary_large_image" data-vue-meta="true">
<link rel="canonical" href="https://anilist.co/manga/97808/Zero-Game" data-vue-meta="true">
<meta property="og:title" content="Zero Game" data-vue-meta="true">
<meta property="og:description" content="After the death of her parents, Hanna Yoo sees her life tumble out of control, until one day a mysterious email invites her to compete in Zero Game, where losing means death, but winning brings a big reward: the ability to reset your entire life and live it over again…this time without all the pain and suffering. In Zero Game, Hanna faces danger everywhere. But who can she trust? And how is her deceased father involved? Rivals beware: she may seem like a noob…but inside Zero Game, you underestimate Hanna Yoo at your own risk."
data-vue-meta="true">
<meta name="description" content="After the death of her parents, Hanna Yoo sees her life tumble out of control, until one day a mysterious email invites her to compete in Zero Game, where losing means death, but winning brings a big reward: the ability to reset your entire life and live it over again…this time without all the pain and suffering. In Zero Game, Hanna faces danger everywhere. But who can she trust? And how is her deceased father involved? Rivals beware: she may seem like a noob…but inside Zero Game, you underestimate Hanna Yoo at your own risk."
data-vue-meta="true">
<script type="application/ld+json" data-vue-meta="true">
{"@context":"http://schema.org","@type":"WebPage","breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://anilist.co/search/manga","url":"https://anilist.co/search/manga","name":"Manga"}},{"@type":"ListItem","position":2,"item":{"@id":"https://anilist.co/manga/97808/Zero-Game","url":"https://anilist.co/manga/97808/Zero-Game","name":"Zer0game","image":"https://s4.anilist.co/file/anilistcdn/media/manga/cover/medium/97808-e5NE4WoYJTmc.jpg"}}]},"mainEntity":{"@type":"BookSeries","name":"Zer0game","alternateName":["Zero Game","Zero Game","제로게임"],"image":"https://s4.anilist.co/file/anilistcdn/media/manga/cover/medium/97808-e5NE4WoYJTmc.jpg","description":"After the death of her parents, Hanna Yoo sees her life tumble out of control, until one day a mysterious email invites her to compete in Zero Game, where losing means death, but winning brings a big reward: the ability to reset your entire life and live it over again…this time without all the pain and suffering. In Zero Game, Hanna faces danger everywhere. But who can she trust? And how is her deceased father involved? Rivals beware: she may seem like a noob…but inside Zero Game, you underestimate Hanna Yoo at your own risk.","startDate":"2016-04-04","endDate":null,"genre":["Action","Drama","Fantasy"],"keywords":["Death Game","Survival","Isekai"],"countryOfOrigin":"KR","aggregateRating":{"@type":"AggregateRating","ratingValue":67,"ratingCount":113,"reviewCount":null,"bestRating":100,"worstRating":1}}}
</script>
As you already cited the head, the only OpenGraph data in it is the site name, and nothing else.
What discord is probably doing is just looking for a meta tag for the description, and failing that (as would be the case here as the site has no descriptionmeta tag), any paragraph that could possibly be a description (in this case the description text you can see in the screenshot is in a p tag with description as a class).
This is by no means perfect as it’s just a fallback trying to find something, but I guess they figured it would be better then nothing.
Or, alternatively, they just noticed in their piles of analytics that anilist links are getting posted frequently and built a custom parser for that usecase.
Long story short: Only the anilist developers can (and should, as it doesn’t only affect Discourse) fix this and actually use OG metadata, which currently they are not.
PS: When I open the source code of your link, there is no og:description either.
Edit… actually just noticed something. When looking at the page in the Dev Tools, there are more OG tags. The fuck? Are they inserting those client side via JavaScript? They drunk or something?
That would also explain why Discord finds them and Discourse doesn’t, because Discourse probably just pulls the raw source code while Discord might render the website server side and parse from there.
<html>
<head></head>
<body>
<div class="grid-1nZz7S">
<div class="embedSuppressButton-1FonMn" aria-label="Remove all embeds" role="button" tabindex="0">
<svg aria-hidden="false" width="16" height="16" viewbox="0 0 24 24">
<path fill="currentColor" d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"></path>
</svg>
</div>
<div class="embedProvider-3k5pfl embedMargin-UO5XwE">
<span>AniList</span>
</div>
<div class="embedTitle-3OXDkz embedMargin-UO5XwE">
<a class="anchor-3Z-8Bb anchorUnderlineOnHover-2ESHQB embedTitleLink-1Zla9e embedLink-1G1K1D embedTitle-3OXDkz" tabindex="0" href="https://anilist.co/manga/97808/Zero-Game/" rel="noreferrer noopener" target="_blank" role="button">Zero Game</a>
</div>
<div class="embedDescription-1Cuq9a embedMargin-UO5XwE">
After the death of her parents, Hanna Yoo sees her life tumble out of control, until one day a mysterious email invites her to compete in Zero Game, where losing means death, but winning brings a big reward: the ability to reset your entire life and live it over again…this time without all the pain and suffering. In Zero Game, Hanna faces danger...
</div>
<a class="anchor-3Z-8Bb anchorUnderlineOnHover-2ESHQB imageWrapper-2p5ogY imageZoom-1n-ADA clickable-3Ya1ho embedWrapper-lXpS3L embedMedia-1guQoW embedImage-2W1cML" tabindex="0" style="width: 400px; height: 209px;" href="https://img.anili.st/media/97808" rel="noreferrer noopener" target="_blank" role="button"><img alt="" src="https://images-ext-2.discordapp.net/external/apwyaL9ZUgPwFC7alWV4Dze7-IUJkP-tgyBF4ACpCtw/https/img.anili.st/media/97808?width=400&height=209" style="width: 400px; height: 209px;" /></a>
</div>
</body>
</html>
You can also confirm this by just disabling JS in the inspector (which fun fact: makes the site unusable).
As for phrasing, IDK.
OG was designed primarily for indexing bots that get the metadata from the site and then display it in some shape or form. Most bots will not be running JavaScript (Google for example has been running a non-JS GoogleBot and a JS GoogleBot for years to detect “cheating” the algorithm by swapping out site content client side, not sure if they still do). Most Indexers will not be running JS either and would benefit from the metadata in the site’s sourcecode, as it was intended. I don’t think there is strictly speaking a requirement to do it though, at least I couldn’t find any on the OG website.
Public where? In the Forum? I think Web-Development is more meant for personal projects but I don’t think anyone would mind it either.