search

zjedi / hugo-scroll

Clean, responsive, single-page Hugo website theme.
https://themes.gohugo.io/hugo-scroll/
MIT License
256 stars 187 forks source link

Wrap meta information in <HEAD> tags #194

Closed welcome-me closed 1 week ago

welcome-me commented 1 week ago

I have a site that uses this theme, and I wanted to verify my ownership of it so I could use Google's search console. Google supplied a custom meta tag so I put it into layouts/partials/custom_head.html; however, I still failed Google's validation. Then, I realized that the output of layouts/partials/head.html is not wrapped in tags.

Once I added wrapped the output of head.html in <head> and </head>, I was able to verify my site.

zjedi commented 1 week ago

I wonder, can you put the head tag inside the customization file? This looks like breaking change for everyone who already does that.

welcome-me commented 1 week ago

@zjedi Okay, so are you asking me to put it in layouts/partials/head.html? I'm fine with doing that if you think it is best. I don't know how other people do it.

zjedi commented 1 week ago

@welcome-me I don't know for sure how other people use it either :) I'm just trying to think critically about what could break. Since nobody complained about this in the recent years, I assume it wasn't a problem or people were able to get around it.

From theoretical point of view, it's better to have the tag being customized in the customization file, since you may want to customize also that tag's attributes. That won't apply to head, because it has no attributes, but in general it sounds like more flexible way.

Just by checking the demo page's source, there IS proper head tag. image

Your PR looks logical, but how come the demo does have the head? Won't adding the head duplicate the tag?

zjedi commented 1 week ago

Bear with me, I'll check this out at the weekend.

welcome-me commented 1 week ago

I'm a little confused. I'm not seeing a <head> tag after the <html> tag in the source for the example site. 🤔

Screenshot_20240626-163418_Via.png

zjedi commented 1 week ago

@welcome-me That is truly confusing because I do see head tag there. I can't see an explanation for getting different results here. I'm checking https://zjedi.github.io/hugo-scroll/ via desktop Chrome

welcome-me commented 1 week ago

@welcome-me That is truly confusing because I do see head tag there. I can't see an explanation for getting different results here. I'm checking https://zjedi.github.io/hugo-scroll/ via desktop Chrome

I expect that the browser console is showing that there because those tags are supposed to be in the head tag. If you right click the page and click view the source, I think it will show that the head tag is not in the output we're generating for the browser.

zjedi commented 1 week ago

Aha, I am using inspect element. So the browser gives two different results based on inspection method. I still don't get it :) Do browsers just figure out there should be wrapping head tag when inspect element is used?

welcome-me commented 1 week ago

Based on the below Stack Overflow answer and your experience with your browser inspector, it looks like the page is correctly parsed without the head tags. In fact, it looks like that's part of the HTML5 spec!

However, it is also true that implicit HEAD tags are required for verifying site ownership with Google. I don't know why we wouldn't want a three line change that increases compatibility with website analysis tools.

Does that make sense?

Is it necessary to write HEAD, BODY and HTML tags? - Stack Overflow https://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags