Meta Tags and SEO Basics
The head tags that control how a page appears in search results and when shared on social media.
읽는 데 2분
Search engines and social media platforms don't render your page like a browser does — they read specific tags in <head> to figure out what to show.
The essentials
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>10 Tips for Better Sleep — HealthBlog</title>
<meta name="description" content="Simple, science-backed changes to your evening routine that actually improve sleep quality." />
</head><title>— shown as the clickable headline in search results and the browser tab. Keep it specific and under ~60 characters, or search engines will truncate it.<meta name="description">— the summary text shown under the title in search results. It doesn't affect ranking directly, but a compelling description affects whether people actually click through.
Open Graph tags for social sharing
When a link is shared on Facebook, Slack, LinkedIn, or similar platforms, they look for Open Graph (og:) tags to build the preview card:
<meta property="og:title" content="10 Tips for Better Sleep" />
<meta property="og:description" content="Simple, science-backed changes to your evening routine." />
<meta property="og:image" content="https://example.com/sleep-tips-cover.jpg" />
<meta property="og:url" content="https://example.com/blog/sleep-tips" />
<meta property="og:type" content="article" />Without these, a shared link often falls back to a generic or missing preview image — a real, visible loss for anything meant to be shared.
Canonical URLs
<link rel="canonical" href="https://example.com/blog/sleep-tips" />If the same content is reachable at multiple URLs (?utm_source=... tracking parameters, www vs. non-www, a paginated duplicate), canonical tells search engines which one is the "real" version to index — avoiding the content being treated as duplicate or split across several diluted rankings.
Favicon
<link rel="icon" href="/favicon.ico" />Small, but every real site needs one — it's the icon shown in browser tabs and bookmarks.
The honest limit of meta tags
None of this replaces having genuinely good, well-structured content — search ranking depends heavily on factors outside your <head> entirely (page speed, backlinks, real content quality). What these tags control is more specific: making sure your page is represented accurately wherever it shows up, rather than with a broken or missing preview.