wermi

Neocities' unsolicited Open Graph tag injection

TL;DR skip to the fix

Neocities loves to inject stuff into your HTMLs when your website is visited with a bot user agent. Notably, if you don’t specify the Open Graph metadata, it will generate them on its own, putting whatever is in the <title> tag as the title and adding a screenshot of your website as the image. The general idea is to provide some nice fallback for people who don’t know/care about those metadata tags and make embeds on social platforms look more pleasant.

What happens under the hood

Here’s a basic HTML page, made for testing purposes:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>This is a test page.</h1>
        <p style="font-size: 10em; margin: 0;">&#128572; &#128077;</p>
    </body>
</html>

The same page, visited with a bot user agent1 has the following tags added, all right before the closing </head> tag and on the very same line:

<!-- line breaks added for readability -->
<meta property="og:type" content="website">
<meta property="og:image" content="https://neocities.org/site_screenshots/84/52/wermi/testing_area/hello.html.jpg">
<meta property="og:title" content="Hello World">

Note the image link is already added, but it might take a while for the screenshot to be actually generated.

When the link is posted to Discord, the embed might look something like image below. Generally, it might seem like a rather unoffensive feature.

Example Discord embed, showing a title and a little screenshot icon

Here’s the same page, but with partially defined metadata instead. We also included the twitter:card property to make the embedded image Big on Discord (let’s ignore the fact Discord is not Twitter, and we’re not even adding the image ourselves).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <!-- metadata tags we just added -->
        <meta property="og:type" content="website">
        <meta property="og:title" content="Hello World">
        <meta property="og:description" content="Lorem ipsum dolor sit amet">
        <meta property="twitter:card" content="summary_large_image">
    </head>
    <body>
        <h1>This is a test page.</h1>
        <p style="font-size: 10em; margin: 0;">&#128572; &#128077;</p>
    </body>
</html>

Again, appended tags by Neocities. Note how the og:type tag appears again, even though we already defined it.

<!-- line breaks added for readability -->
<meta property="og:type" content="website">
<meta property="og:image" content="https://neocities.org/site_screenshots/84/52/wermi/testing_area/hello.html.jpg">
Another Discord embed, now with a description and a big screenshot of the page, with clearly visible contents.

Quite big.

The straw that broke the camel’s back

Let’s take a look at a real world example instead. On this very Neocities account, I host a subpage with an emulator setup guide, which is distinct from my blog. Some years ago, I made sure the metadata is in line with how I want the embed to appear on Discord. That is, until Neocities started shoving screenshots into the tags. Not only this is completely unsolicited, but also you can’t turn it off anywhere! To add insult to the injury, the embed appears with a screenshot of my personal blog rather than the guide.

A Discord embed, with a title 'emu guide', description 'Comprehensive emulator setup guide for Super Mario 64 speedruns', and an image. The embedded image is a screenshot of my blog rather than the guide page.

This disgraceful embed likely appeared in at least hundreds of messages.

The fix

Fortunately, there’s a really simple way to force Neocities to not touch your tags, and the solution is hinted in a comment on a GitHub issue. The downside? You need to edit your HTMLs, but that’s still better than not having any control.

<!-- og:title og:image -->

Simply put the comment above anywhere in your page.

Yep. That’s it.

Try viewing the source of this page, I do the very same thing.

Unfortunately for the guide page, I had to write a simple postprocessing script that I need to remember to run before uploading, since I don’t have much control over the static site generator itself. It would probably be a good idea to switch to something else at some point, but I digress.

  1. Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com) ↩︎