hellocatfood tooted a link to a hydra sketch:
https://post.lurk.org/@hellocatfood/114189240523352684
the Mastodon web interface software gets metadata from the HTML page and displays a cute box with title and image etc.
bug I clicked the picture in the toot and got a different sketch to the one linked by the URL in the text of the toot.
the metadata links to hydra front page which picks a random example on load, and the image doesn't resemble either of those sketches (it's just some unrelated hydra landing image).
however actually removing (part of) the HTML metadata leads it to default to the URL itself, thereby solving the main problem (link going to front page instead of particular sketch). tested with Mastodon web interface, other systems may vary...
see how mastodon displays the following small tests:
https://post.lurk.org/@mathr/114189804872692669
compare these two small test files:
https://mathr.co.uk/tmp/metadata/1.html?id=42 has no og:url and id is preserved when clicking card
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>< Title ></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="This is the Title">
<meta property="og:description" content="This is the Description">
<meta property="og:image" content="landing.png">
<!--
<meta property="og:url" content="https://mathr.co.uk/tmp/metadata/1.html">
-->
<meta name="twitter:title" content="This is the Title">
<meta name="twitter:description" content="This is the Description">
<meta name="twitter:image" content="landing.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" type="image/png" href="/web/favicon.png" />
</head>
<body onload="document.querySelector('p').innerText=''+parseInt(new URLSearchParams(location.search).get('id'));">
<h1>metadata test</h1>
<p>id</p>
</body>
</html>https://mathr.co.uk/tmp/metadata/2.html?id=42 has og:url and id gets lost when clicking card
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>< Title ></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="This is the Title">
<meta property="og:description" content="This is the Description">
<meta property="og:image" content="landing.png">
<meta property="og:url" content="https://mathr.co.uk/tmp/metadata/2.html">
<meta name="twitter:title" content="This is the Title">
<meta name="twitter:description" content="This is the Description">
<meta name="twitter:image" content="landing.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" type="image/png" href="/web/favicon.png" />
</head>
<body onload="document.querySelector('p').innerText=''+parseInt(new URLSearchParams(location.search).get('id'));">
<h1>metadata test</h1>
<p>id</p>
</body>
</html>https://mathr.co.uk/tmp/metadata/3.html?id=42 has no og:url nor image and looks a bit sad in comparison, but the link goes to the correct place
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>< Title ></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="This is the Title">
<meta property="og:description" content="This is the Description">
<meta name="twitter:title" content="This is the Title">
<meta name="twitter:description" content="This is the Description">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" type="image/png" href="/web/favicon.png" />
</head>
<body onload="document.querySelector('p').innerText=''+parseInt(new URLSearchParams(location.search).get('id'));">
<h1>metadata test</h1>
<p>id</p>
</body>
</html>the smaller problem is the image being unrelated to the sketch : maybe the image could be more obviously a placeholder or logo than a screenshot of a sketch?
hellocatfood tooted a link to a hydra sketch:
https://post.lurk.org/@hellocatfood/114189240523352684
the Mastodon web interface software gets metadata from the HTML page and displays a cute box with title and image etc.
bug I clicked the picture in the toot and got a different sketch to the one linked by the URL in the text of the toot.
the metadata links to hydra front page which picks a random example on load, and the image doesn't resemble either of those sketches (it's just some unrelated hydra landing image).
however actually removing (part of) the HTML metadata leads it to default to the URL itself, thereby solving the main problem (link going to front page instead of particular sketch). tested with Mastodon web interface, other systems may vary...
see how mastodon displays the following small tests:
https://post.lurk.org/@mathr/114189804872692669
compare these two small test files:
https://mathr.co.uk/tmp/metadata/1.html?id=42 has no
og:urlandidis preserved when clicking cardhttps://mathr.co.uk/tmp/metadata/2.html?id=42 has
og:urlandidgets lost when clicking cardhttps://mathr.co.uk/tmp/metadata/3.html?id=42 has no
og:urlnor image and looks a bit sad in comparison, but the link goes to the correct placethe smaller problem is the image being unrelated to the sketch : maybe the image could be more obviously a placeholder or logo than a screenshot of a sketch?