← Back to HTML
16

Technical SEO in HTML: Metadata, Social Cards and Structured Data

Use titles, descriptions, canonicals, Open Graph tags and JSON-LD with better judgment so the HTML gives search engines and sharing platforms a cleaner picture of the page.

📘 Theory

Essential Metadata First

Start with what every real page should already get right.

1

A page needs a specific, useful title and a description written for humans, not just for keywords.

2

A canonical URL helps clarify which URL should be treated as the main version when duplicates or close variants exist.

Social Metadata and Structured Data

Search and sharing both benefit from a clearer description of the page.

1

Open Graph and similar tags help platforms build better preview cards when the page is shared.

2

JSON-LD can provide a more explicit semantic model when it matches what the visible page actually contains.

🧪 Learn by doing

Example Guided Example: A Stronger Head Section Review a small but realistic combination of title, description, canonical and social metadata.

🏁 Challenges

Challenge Challenge: Complete the Missing Metadata Add a description and canonical URL to a partial head block.

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com