Why is markup breaking page?

[gilbertginsberg]

I run a Jekyll site at gilbertindex.com, and for a reason I’ve yet to determine, markup is breaking one blog post page in particular.

This one: https://www.gilbertindex.com/eighth-wonder-of-the-world/

Whenever I hyperlink or use markup of any kind (# for headers, etc.) text is being inserted at the top of the page, as you can see on the eighth wonder page above. And if you check other posts on the site (e.g., https://www.gilbertindex.com/25-times-rule-of-thumb/), this behavior doesn’t appear. Why might this be happening?

This is how the file (saved as 2017-04-22-eighth-wonder-of-the-world) looks:

And if I remove the links, the only markup, the inserted text disappears, so markup definitely seems to be the culprit, but I can’t quite figure out why. What solutions would you suggest?

Any help would be greatly appreciated. Thank you.

GitHub repo of site is: github dot com/gilbertginsberg/gilbert-index

[rdyar]

i believe it is because you are using the post excerpt in your meta description tag and the quotes in the link are breaking the meta tag since a meta tag ends when it sees the second quote - but that quote is the opening of your href=.

So when you take out the link, the post excerpt is just plain text, that works in a meta tag and the page displays ok.

Add a description to the front matter and use that instead of post excerpt for the meta description. Or maybe escaping it would work, but I think there are other things that can go wrong with using post excerpt like this.

An image would probably do the same thing.

[gilbertginsberg]

Yes, that’s it! Post excerpt is the problem. Thanks a lot, man.
Cheers.

[pabloduo]

Hmm, maybe Safari is tricking me but for goodness sake, I do not see where it is broken… Look at this side-by-side comparison, these are identical no?

[gilbertginsberg]

Indeed the page was broken and I fixed the problem per @rdyar’s suggestion. You’re seeing the fixed result. Thanks for looking into it @pabloduo.