Difference between DOM in Page Source and Inspect Element i

I want to add a meta tag to one of my pages. However, I am using a CMS (ocotberCMS) which gives me access to only the body of the page. I attempted to add the meta tag to the markup looks like:

<meta name="robots" content="noindex, nofollow, noarchive">
{% partial "temp-partial" %}

the result in page source and inspect element is different:

page source:

<meta name="robots" content="noindex, nofollow, noarchive">
<div>
    .......// the body of the page generated by {% partial "temp-partial" %}
</div>

Inspect Element:

<html>
   #shadow-root
<head>
<meta name="robots" content="noindex, nofollow, noarchive">
</head>
<body>
<div>
    .......// the body of the page generated by {% partial "temp-partial" %}
</div>
</body>
</html>

I have read that it is necessary to add the meta tag to the header according to the HTML4++ documentation. I was wondering if this means it will work in above case or it won't?

Solution

OctoberCMS has a "Placeholder" feature which is perfect for what you are trying to do:

https://octobercms.com/docs/markup/tag-placeholder

You can use it in your HTML layout like this:

<html>
     <head>
         <meta name="robots" content="noindex, nofollow, noarchive">
         {% placeholder meta %}
     </head>

     <body>
         {% page %}
     </body>
</html>

Then, later in any page:

{% put meta %}
    <meta name="robots" content="noindex, nofollow, noarchive">
{% endput %}

Whatever is between the {% put %} tags will be put where the {% placeholder %} is in the layout when it is compiled.