Meta tag - lighthouse audit

I am currently finishing up my portfolio page and I ran a lighthouse audit and it keeps telling me that it does not recognize my meta tag. I have this tag in the head of my HTML document. Does anyone know why it is not recognizing this tag?
/*Code */
https://codepen.io/AJS17/pen/pmvKrB?editors=1100

The stuff you put into the HTML tab in Codepen is rendered as the <body> of your site. So because you’ve put the entire web page in there, your page renders like:

html
  head
    style
      # all the stuff from the style tab goes here
  body
  # everything in the html tab goes here
    html
      head
        meta ....
      body
        # your html elements here

You can see this if you view the page source (bad tags are in red here):

So when you do the audit, it is flagging that you have incorrect markup (meta tags go in the <head>, but you have some in the body tag, inside another head tag, and there’s another body tag in the body tag etc)

So just put what you would put in the <body> in the HTML tab. If you want extra meta properties etc, click the little gear icon in the HTML tab:

And it will give you input fields to add in extra stuff for the <head>:

I do not know how to access the page source. I moved my body tag but i guess i am still confused as to why its not working properly. Thank you for your help. I appreciate it.

I understand what you’re saying in terms of rendering but I moved my tag to make sure the structure is appropriate. I must be missing something.

CodePen automatically gives you all the meta tags and HTML skeleton. Try removing the HTML skeleton from your code. Then, go to debug mode and do an audit. BTW, to get to the source, go into debug mode and then right-click and click “View page source”.

Ahhhh yes i see now. Thank you for your help!

2 Likes

Here is my results for the audit:

https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://s.codepen.io/AJS17/debug/pmvKrB/xnkabNXPyodM

Oh, you forgot to remove the closing body and html tags too. Also, consider formatting (or cleaning up) your code by clicking the arrow in the editor, and clicking “Tidy HTML”.

Good Morning, Fix those issues. Thank you very much for your help. Greatly appreciated.

1 Like