Search code examples
javascripthtmlmeta-tagsurl-parameters

How to change open graph meta tag content via url params

I am trying to make a custom embed generator using url parameters and open graph meta tags, but whenever I post the link to sites such as Discord, it uses the default tags I've set for it rather than the url parameter ones. Does anyone know how to fix this? I've posted the code and an example image of what happens below.

<html prefix="og: https://ogp.me/ns#">

<head>
    <meta property="og:title" content="Title">
    <meta property="og:description" content="Description">
    <script>
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);

        if (urlParams.has("title")) {
            const title = urlParams.get("title");
            document.querySelector('meta[property="og:title"]').setAttribute("content", title);
        };

        if (urlParams.has("desc")) {
            const desc = urlParams.get("desc");
            document.querySelector('meta[property="og:description"]').setAttribute("content", desc);
        };
    </script>
</head>

</html>

Solution

  • You can't expect from crawlers that fetch open graph data to execute JS on your page. Only valid solution would be to render this HTML on server.