seo Question posted in
Some basic information to get you started with this can be found here.

Seo – Can a Lit element go in the <head> tag?

I’d like to make an SEO lit component where I can pass data to fill in meta tags, etc so I don’t need to repeat them on every index page. If I place my component like so…

<head>
    <script type="module" src="/src/lit-head.ts"></script>
    <lit-head></lit-head>
</head>

It still places the rendered markup that’s returned by the lit-head module inside the body…

Anyway to get this to work? It would also make it possible to localize things like my meta tags, title, description, etc.

Tags:

2

Answers


  1. 0

    The HTML spec only allows metadata content within the <head> element.

    If the HTML parser sees a custom element there, it’ll close the document head from that point and the rest will be added to the document body. So if you need specific meta tags to be present in the head, you cannot replace those with a single custom element.

    You should look for ways of abstracting and customizing the tags at the HTML templating level.

    Login or Signup to reply.
  2. 0

    Yes, you can put any element in the <head> of your document.

    It will get parsed, but the Browser will move it and all following elements to the <body>

    So put/use your <in-head>Web Component at the end of the head

    Your Web Component than can create Elements in the <head>

    Valid HEAD elements are: meta, link, title, style, script, noscript, base

    <html>

<head>
    <script>
        customElements.define("in-head", class extends HTMLElement {
            connectedCallback() {
                console.log(this.nodeName, "in:", this.parentNode);
                document.head.append(Object.assign(document.createElement("style"), {
                    textContent: "body {background:green}",
                    onload: (e) => console.log("style in", e.target.parentNode)
                }));
            }
        });
    </script>
    <in-head></in-head>
    <script>
        console.log("End of head", document.body.children);
    </script>
</head>

<body>
</body>

</html>

    Note: running above snippet outputs a different result than running in the browser, because SOsnippet adds an additional <script> tag

    See my Dev.to blog-post The head Web Component you never see in F12 Dev tools how I use a Web Component in the <head>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search