Return to Level1Techs.com

Anilist link doesn't embeds to website issue

origin

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

  1. Is this issue local to this forum or discourse
  2. Does discourse use a embedding protocol that doesn’t support open graph?
    Twitter, amazon, reddit and other links seem to embed properly.
  3. 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

https://anilist.co/manga/97808/Zero-Game

Just a test.

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.

1 Like

Discourse pulls the info from the meta tags in the header of the webpage.

If it is not parsed in a way it expects, then it fails.

If it works just fine elsewhere, either one of two possibilities:

  • discourse bug
  • discord set up a specific use case for that site, or sites like that.
1 Like

third possibility:

admins are paranoid and only some domains are whitelisted for fancy embeds :smiley:

3 Likes

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

<title>Zer0game (Zero Game) · AniList</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta property="og:site_name" content="AniList">
<meta name="twitter:site" content="@AniListco">
<script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/releases/qc5B-qjP0QEimFYUxcpWJy5B/recaptcha__en.js" crossorigin="anonymous" integrity="sha384-EauiKN7dy30bq/wDo7lcvebLQr7wwQPtEV6A1G43RAWnhPwxWZFCCTOT/hE+ffe3"></script>
<script>
    window.al_token = "...";
</script>

extra formatting/styling stuff

<style type="text/css">
    svg:not(:root).svg-inline--fa {
      overflow: visible;
    }
    .svg-inline--fa {
      display: inline-block;
      font-size: inherit;
      height: 1em;
      overflow: visible;
      vertical-align: -0.125em;
    }
    .svg-inline--fa.fa-lg {
      vertical-align: -0.225em;
    }
    .svg-inline--fa.fa-w-1 {
      width: 0.0625em;
    }
    .svg-inline--fa.fa-w-2 {
      width: 0.125em;
    }
    .svg-inline--fa.fa-w-3 {
      width: 0.1875em;
    }
    .svg-inline--fa.fa-w-4 {
      width: 0.25em;
    }
    .svg-inline--fa.fa-w-5 {
      width: 0.3125em;
    }
    .svg-inline--fa.fa-w-6 {
      width: 0.375em;
    }
    .svg-inline--fa.fa-w-7 {
      width: 0.4375em;
    }
    .svg-inline--fa.fa-w-8 {
      width: 0.5em;
    }
    .svg-inline--fa.fa-w-9 {
      width: 0.5625em;
    }
    .svg-inline--fa.fa-w-10 {
      width: 0.625em;
    }
    .svg-inline--fa.fa-w-11 {
      width: 0.6875em;
    }
    .svg-inline--fa.fa-w-12 {
      width: 0.75em;
    }
    .svg-inline--fa.fa-w-13 {
      width: 0.8125em;
    }
    .svg-inline--fa.fa-w-14 {
      width: 0.875em;
    }
    .svg-inline--fa.fa-w-15 {
      width: 0.9375em;
    }
    .svg-inline--fa.fa-w-16 {
      width: 1em;
    }
    .svg-inline--fa.fa-w-17 {
      width: 1.0625em;
    }
    .svg-inline--fa.fa-w-18 {
      width: 1.125em;
    }
    .svg-inline--fa.fa-w-19 {
      width: 1.1875em;
    }
    .svg-inline--fa.fa-w-20 {
      width: 1.25em;
    }
    .svg-inline--fa.fa-pull-left {
      margin-right: 0.3em;
      width: auto;
    }
    .svg-inline--fa.fa-pull-right {
      margin-left: 0.3em;
      width: auto;
    }
    .svg-inline--fa.fa-border {
      height: 1.5em;
    }
    .svg-inline--fa.fa-li {
      width: 2em;
    }
    .svg-inline--fa.fa-fw {
      width: 1.25em;
    }
    
    .fa-layers svg.svg-inline--fa {
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
    }
    
    .fa-layers {
      display: inline-block;
      height: 1em;
      position: relative;
      text-align: center;
      vertical-align: -0.125em;
      width: 1em;
    }
    .fa-layers svg.svg-inline--fa {
      -webkit-transform-origin: center center;
              transform-origin: center center;
    }
    
    .fa-layers-counter, .fa-layers-text {
      display: inline-block;
      position: absolute;
      text-align: center;
    }
    
    .fa-layers-text {
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      -webkit-transform-origin: center center;
              transform-origin: center center;
    }
    
    .fa-layers-counter {
      background-color: #ff253a;
      border-radius: 1em;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      color: #fff;
      height: 1.5em;
      line-height: 1;
      max-width: 5em;
      min-width: 1.5em;
      overflow: hidden;
      padding: 0.25em;
      right: 0;
      text-overflow: ellipsis;
      top: 0;
      -webkit-transform: scale(0.25);
              transform: scale(0.25);
      -webkit-transform-origin: top right;
              transform-origin: top right;
    }
    
    .fa-layers-bottom-right {
      bottom: 0;
      right: 0;
      top: auto;
      -webkit-transform: scale(0.25);
              transform: scale(0.25);
      -webkit-transform-origin: bottom right;
              transform-origin: bottom right;
    }
    
    .fa-layers-bottom-left {
      bottom: 0;
      left: 0;
      right: auto;
      top: auto;
      -webkit-transform: scale(0.25);
              transform: scale(0.25);
      -webkit-transform-origin: bottom left;
              transform-origin: bottom left;
    }
    
    .fa-layers-top-right {
      right: 0;
      top: 0;
      -webkit-transform: scale(0.25);
              transform: scale(0.25);
      -webkit-transform-origin: top right;
              transform-origin: top right;
    }
    
    .fa-layers-top-left {
      left: 0;
      right: auto;
      top: 0;
      -webkit-transform: scale(0.25);
              transform: scale(0.25);
      -webkit-transform-origin: top left;
              transform-origin: top left;
    }
    
    .fa-lg {
      font-size: 1.3333333333em;
      line-height: 0.75em;
      vertical-align: -0.0667em;
    }
    
    .fa-xs {
      font-size: 0.75em;
    }
    
    .fa-sm {
      font-size: 0.875em;
    }
    
    .fa-1x {
      font-size: 1em;
    }
    
    .fa-2x {
      font-size: 2em;
    }
    
    .fa-3x {
      font-size: 3em;
    }
    
    .fa-4x {
      font-size: 4em;
    }
    
    .fa-5x {
      font-size: 5em;
    }
    
    .fa-6x {
      font-size: 6em;
    }
    
    .fa-7x {
      font-size: 7em;
    }
    
    .fa-8x {
      font-size: 8em;
    }
    
    .fa-9x {
      font-size: 9em;
    }
    
    .fa-10x {
      font-size: 10em;
    }
    
    .fa-fw {
      text-align: center;
      width: 1.25em;
    }
    
    .fa-ul {
      list-style-type: none;
      margin-left: 2.5em;
      padding-left: 0;
    }
    .fa-ul > li {
      position: relative;
    }
    
    .fa-li {
      left: -2em;
      position: absolute;
      text-align: center;
      width: 2em;
      line-height: inherit;
    }
    
    .fa-border {
      border: solid 0.08em #eee;
      border-radius: 0.1em;
      padding: 0.2em 0.25em 0.15em;
    }
    
    .fa-pull-left {
      float: left;
    }
    
    .fa-pull-right {
      float: right;
    }
    
    .fa.fa-pull-left,
    .fas.fa-pull-left,
    .far.fa-pull-left,
    .fal.fa-pull-left,
    .fab.fa-pull-left {
      margin-right: 0.3em;
    }
    .fa.fa-pull-right,
    .fas.fa-pull-right,
    .far.fa-pull-right,
    .fal.fa-pull-right,
    .fab.fa-pull-right {
      margin-left: 0.3em;
    }
    
    .fa-spin {
      -webkit-animation: fa-spin 2s infinite linear;
              animation: fa-spin 2s infinite linear;
    }
    
    .fa-pulse {
      -webkit-animation: fa-spin 1s infinite steps(8);
              animation: fa-spin 1s infinite steps(8);
    }
    
    @-webkit-keyframes fa-spin {
      0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }
    
    @keyframes fa-spin {
      0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }
    .fa-rotate-90 {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    
    .fa-rotate-180 {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    
    .fa-rotate-270 {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
      -webkit-transform: rotate(270deg);
              transform: rotate(270deg);
    }
    
    .fa-flip-horizontal {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
      -webkit-transform: scale(-1, 1);
              transform: scale(-1, 1);
    }
    
    .fa-flip-vertical {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
      -webkit-transform: scale(1, -1);
              transform: scale(1, -1);
    }
    
    .fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
      -webkit-transform: scale(-1, -1);
              transform: scale(-1, -1);
    }
    
    :root .fa-rotate-90,
    :root .fa-rotate-180,
    :root .fa-rotate-270,
    :root .fa-flip-horizontal,
    :root .fa-flip-vertical,
    :root .fa-flip-both {
      -webkit-filter: none;
              filter: none;
    }
    
    .fa-stack {
      display: inline-block;
      height: 2em;
      position: relative;
      width: 2.5em;
    }
    
    .fa-stack-1x,
    .fa-stack-2x {
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
    }
    
    .svg-inline--fa.fa-stack-1x {
      height: 1em;
      width: 1.25em;
    }
    .svg-inline--fa.fa-stack-2x {
      height: 2em;
      width: 2.5em;
    }
    
    .fa-inverse {
      color: #fff;
    }
    
    .sr-only {
      border: 0;
      clip: rect(0, 0, 0, 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    
    .sr-only-focusable:active, .sr-only-focusable:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
    }
</style>

more style + refs

<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Overpass:400,600,700,800">
<link href="https://fonts.googleapis.com/css?family=Overpass:400,600,700,800" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1f2631">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="AniList">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#1f2631">
<meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#1f2631">
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&amp;render=explicit" async="" defer=""></script>
<link href="/css/forum.553078c5.css" rel="prefetch">
<link href="/css/lists.ad0fecdd.css" rel="prefetch">
<link href="/css/settings.c5846ae2.css" rel="prefetch">
<link href="/css/staff.6ef7a657.css" rel="prefetch">
<link href="/css/stats.eb85b690.css" rel="prefetch">
<link href="/css/submissions.0c8e1b73.css" rel="prefetch">
<link href="/js/forum.c16f2bc4.js" rel="prefetch">
<link href="/js/lists.14d402ea.js" rel="prefetch">
<link href="/js/settings.d4a8fc4f.js" rel="prefetch">
<link href="/js/settings~submissions.33adc7c7.js" rel="prefetch">
<link href="/js/staff.9ccb572f.js" rel="prefetch">
<link href="/js/stats.f6124817.js" rel="prefetch">
<link href="/js/submissions.7b448704.js" rel="prefetch">
<link href="/css/chunk-vendors.3826fb1f.css" rel="preload" as="style">
<link href="/css/main.f51162f4.css" rel="preload" as="style">
<link href="/js/chunk-vendors.93654cf8.js" rel="modulepreload" as="script">
<link href="/js/main.b3506417.js" rel="modulepreload" as="script">
<link href="/css/chunk-vendors.3826fb1f.css" rel="stylesheet">
<link href="/css/main.f51162f4.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/staff.6ef7a657.css">
<script charset="utf-8" src="/js/staff.9ccb572f.js"></script>
<link rel="stylesheet" type="text/css" href="/css/lists.ad0fecdd.css">
<script charset="utf-8" src="/js/lists.14d402ea.js"></script>
<link rel="stylesheet" type="text/css" href="/css/forum.553078c5.css">
<script charset="utf-8" src="/js/forum.c16f2bc4.js"></script>
<script charset="utf-8" src="/js/settings~submissions.33adc7c7.js"></script>
<link rel="stylesheet" type="text/css" href="/css/settings.c5846ae2.css">
<script charset="utf-8" src="/js/settings.d4a8fc4f.js"></script>
<link rel="stylesheet" type="text/css" href="/css/stats.eb85b690.css">
<script charset="utf-8" src="/js/stats.f6124817.js"></script>
<link rel="stylesheet" type="text/css" href="/css/submissions.0c8e1b73.css">
<script charset="utf-8" src="/js/submissions.7b448704.js"></script>
<style type="text/css">
    .ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto
    }
    .ps__rail-x{height:15px;bottom:0
    }
    .ps__rail-x,.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;position:absolute
    }
    .ps__rail-y{width:15px;right:0
    }
    .ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent
    }
    .ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6
    }
    .ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9
    }
    .ps__thumb-x{transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px
    }
    .ps__thumb-x,.ps__thumb-y{background-color:#aaa;border-radius:6px;position:absolute
    }
    .ps__thumb-y{transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px
    }
    .ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px
    }
    .ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px
    }
    @supports (-ms-overflow-style:none){
    .ps{overflow:auto!important
    }
    }
    @media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){
    .ps{overflow:auto!important
    }
    }
</style>
<style type="text/css">
    .ps-container{position:relative
    }
</style>

Meta properties

<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>

image

It’s not level1.

1 Like

so is it discourse?

It’s probably that we’re being blacklisted by anilist.

Or more accurately, we’re not on the whitelist.

1 Like

so do we need request it through anilist?

What do the anilist admins need to get us whitelisted?

probably.

I honestly don’t know.

1 Like

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.

1 Like

discord’s embed with inspector

<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&amp;height=209" style="width: 400px; height: 209px;" /></a>
  </div>
 </body>
</html>

oh that’s interesting

That’s what I mean:

1 Like

hmm that’s interesting, is the following the right phrasing when reporting to the site admins?

og tags are not configured properly.
running the following link in open graph checker


yields the following result

using the inspector for og, has the open graph tags as javascript

also if I want to make this public should I put it in the web development category?

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.

1 Like

yeah I was planning on sharing links to this post to the devs