TikTok redirects with Open Graph Metadata in Jekyll

20 Nov 2025

I posted back in March 2025 about how I’m using social media now - basically switching to Mastodon and BlueSky for text, and TikTok and YouTube for video sharing.

8 months on I’ve pretty much stuck to that, and have surprisingly got much more (maybe too much!) into TikTok, and not posting much text any more

One problem I did find is that posting a link to TikTok on Mastodon or BlueSky didn’t look so good, as they don’t do a great job of implementing OpenGraph tags. So I thought I’d fix that myself

Redirect Pages with Custom Metadata

My solution was to make some intermediate redirect pages hosted on my own site here that contain the exact Open Graph metadata I want, then automatically redirect to the TikTok video.

First, I created a custom Jekyll layout called redirect.html that handles the redirection while including all the necessary metadata:

<!DOCTYPE html>
<html lang="en-gb">
    <head>
        {% include opengraph.html %}
        <meta http-equiv="refresh" content="0;url={{ page.redirect }}" />
        <link rel="canonical" href="{{ page.redirect }}" />
        <script>
            window.location.replace("{{ page.redirect }}");
        </script>
    </head>
    <body>
        This page has been moved to <a href="{{ page.redirect }}">{{ page.redirect }}</a>.
    </body>
</html>

This layout uses three different methods to ensure the redirect works reliably:

Meta refresh: A standard HTML meta tag that tells browsers to redirect immediately
Canonical link: Helps search engines understand the relationship between pages
JavaScript redirect: Provides a fallback for modern browsers

Each TikTok video gets its own post with custom front matter. Here’s an example:

---
layout: redirect
title: Steel Rigg (TikTok)
description: "Old bloke clambering up Steel Rigg (Hadrian's Wall) #hadrianswall #northumberland"
published: true
image: /assets/social_images/steelrigg.jpg
redirect: https://www.tiktok.com/@yeltzland/video/7479828444398865686
---

The key fields here are:

title and description: Used in the Open Graph metadata for the preview card
image: A custom thumbnail that appears in the preview
redirect: The actual TikTok URL to redirect to
published: Controls whether the post appears in the index

My existing OpenGraph include already handles most of the work. It checks for page-level metadata and uses it to populate the Open Graph tags:

{% if page.title %}
<meta name="og:title" content="{{ page.title }}" />
{% else %}
<meta name="og:title" content="{{ site.title }}" />
{% endif %}

{% if page.description %}
<meta property="og:description" content="{{ page.description }}"/>
{% else %}
<meta property="og:description" content="{{ content | markdownify | strip_html | xml_escape | truncate: 200 }}"/>
{% endif %}

{% if page.image %}
<meta property="og:image" content="{{ site.url }}{{ page.image }}"/>
{% else %}
<meta property="og:image" content="{{ site.url }}/images/logos/og-bravelocation.png">
{% endif %}

I can then post a link to my site, and it will look pretty good when the social site turns that link into a rich card - see https://mastodon.social/@yeltzland/115519188300810818 for example

To make these posts discoverable, I created an index page at /social/ that displays all published posts as cards. The page uses Jekyll’s liquid templating to filter and sort the posts:

{% assign social_posts = site.pages | where_exp: "page", "page.path contains 'social/'" | where_exp: "page", "page.name != 'index.html'" | where: "published", true %}
{% assign sorted_posts = social_posts | sort: 'path' | reverse %}

{% for post in sorted_posts %}
    <a href="{{ post.redirect }}" class="social-card" target="_blank">
        {% if post.image %}
        <img src="{{ post.image }}" alt="{{ post.title }}" class="social-card-image">
        {% endif %}
        <div class="social-card-content">
            <h2 class="social-card-title">{{ post.title }}</h2>
            {% if post.description %}
            <p class="social-card-description">{{ post.description }}</p>
            {% endif %}
        </div>
    </a>
{% endfor %}

I used CoPilot to make some nice CSS cards that match the existing design - and you can see the results on this page

Conclusion

I’m pretty happy with this approach for sharing social videos - and in doing this I forgot how much I love Jekyll for running static sites!

If you want to follow me directly on TikTok, I’m @yeltzland on there of course!

The online home of Brave Location Services Ltd.

TikTok redirects with Open Graph Metadata in Jekyll

Redirect Pages with Custom Metadata

Building a Social Posts Index

Conclusion