How to Include Extra Metadata Without Messing Your Content

Post from the HTML category metadata HTML code How to include metadata seamlessly without changing the structure of your content?

One of the main reasons why you might want to include metadata in your website is to make it rank better. Of course, Google will favour websites including such data, as you help them understand the web better. You're giving Google information they couldn't understand so easily in exchange of better ranking in their search engine. Fair enough. is quite overwhelming when you start delving into the world of SEO. It's about tagging your website's content so robots can understand it better, and Google will give you smart snippets in the search result pages, among other benefits. However, the possibilities are endless. You can tag People, Organisations, Blog posts, Images, Brands, Professions, etc.

If you really wanted, you could tag for hours.

One of the main challenges is finding the sections that really do contain all that information. But chances are the content you want to tag is spread all over the website, divided into multiple dividers and other HTML tags.

For instance, if you want to tag your company's information (as a Brand, Organisation or Company, among other options), you might tag the logo in one HTML partial, along with the name of the company. But then you realise that the company legal name, the address, and the tax ID are on the Privacy page.

However, requires that any entity's information be enclosed in just one HTML tag, be it a divider, a section tag, an article tag…

How to solve this?

Simple enough: use invisible tags. In the screenshot above I show how to tag a "Person" entity. Some of the properties are visible: the profession and the image. But some of them are written nowhere in the page, but I did want to include them somehow.

So I created an extra file named alex-metadata.erb that I included using Jekyll's include tag, where I concentrated all metadata relative to my person.

I wrote all the metadata I wanted to aggregate using invisible tags such as link and meta. You can see it in the screenshot below. metadata HTML code

Hope that was useful!

Now Playing: Lacrimosa - Mondfeuer.