1. The Title Tag (Most Important)
The title tag (<title>) is the blue clickable headline in Google search results. It is the single most impactful on-page SEO element after content itself.
- Optimal length: 50–60 characters (Google truncates beyond ~580 pixels wide)
- Include your primary keyword near the beginning
- Include your brand name at the end:
Keyword Phrase | Brand Name - Write for humans first: Titles that look like keyword lists get low CTR even with high rankings
❌ loan calculator mortgage calculator amortization schedule free online tool
2. Meta Description
The meta description appears as the grey text beneath the title in search results. Google does not use it as a ranking factor, but it dramatically affects click-through rate (CTR).
- Optimal length: 120–155 characters (Google may rewrite longer ones)
- Include a clear value proposition and implicit call-to-action
- Include your primary keyword — Google bolds matching search terms
- Each page needs a unique meta description
3. Open Graph Tags (og:)
Open Graph tags control how your page looks when shared on Facebook, LinkedIn, and thousands of other platforms. Without them, social shares look broken and unprofessional.
| Tag | Purpose | Recommended |
|---|---|---|
| og:title | Title shown on the share card | Can differ from <title> |
| og:description | Description on the share card | 130–160 chars |
| og:image | Preview image | 1200 × 630px minimum |
| og:url | Canonical URL of the page | Include always |
| og:type | Content type | website or article |
4. Twitter Card Tags
Twitter (now X) uses its own meta tag format alongside Open Graph. The most important is:
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/og-image.jpg" />
Use summary_large_image for a full-width card. If Twitter tags are missing, the platform will attempt to use OG tags as a fallback.
5. Other Important Meta Tags
- Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">— Required for mobile rendering. Never omit. - Canonical:
<link rel="canonical" href="...">— Tells Google which is the authoritative URL when duplicate content exists (e.g., www vs. non-www, or paginated content). - robots:
<meta name="robots" content="noindex,nofollow">— Prevents pages from appearing in search results. Use for thank-you pages, admin areas, and staging environments.