SEO &
METADATA
Code isn't just for browsers; it's for robots. Search Engine Optimization (SEO) relies on semantic HTML and invisible metadata to help crawlers understand, index, and rank your content.
The <head>
While the <body> is for humans, the <head> is for machines. It contains the instructions that determine how your site appears in Google searches and Twitter feeds.
<head>
<title>The Knowledge Web</title>
<meta name="description" content="..." />
<meta property="og:image" content="..." />
</head>
Crucial Tags
Canonical
Prevents duplicate content issues by telling Google which URL is the "master" copy.
Open Graph
Controls how links look when shared on social media (Image, Title, Desc).
JSON-LD
Structured data that powers "Rich Snippets" (Star ratings, Recipes, Events).
Alt Text
Describes images for blind users AND tells Google what the image contains.
Metadata Simulator
PREVIEW_MODE: LIVE
26/60
61/160
The Knowledge Webhttps://society-os.com/engineering
Learn Frontend Engineering
Master HTML, CSS, and React in this interactive visual guide.
og:image
society-os.com
Learn Frontend Engineering
Master HTML, CSS, and React in this interactive visual guide.
The Logic of Ranking
Google doesn't "read" your article; it parses your DOM. It looks for signals:
- Is there exactly one
<h1>? - Do link texts describe destination (not "click here")?
- Is the meta description under 160 characters?