HTML & CSS · 8 entries
<title>Page Title - Site Name</title><head>
<title>Pricing Plans - CloudDash</title>
</head>Note The title appears in browser tabs, bookmarks, and search engine results. Keep it under 60 characters. Place the specific page name before the site name for better scannability.
<meta name="description" content="..."><meta name="description" content="Compare our Starter, Pro, and Enterprise plans. Start free and scale as your team grows.">Note Search engines display this as the page snippet. Keep it between 120-160 characters. Each page should have a unique description that summarizes its specific content.
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta property="og:url" content="..."><meta property="og:title" content="CloudDash Pricing">
<meta property="og:description" content="Plans starting at $0/month. No credit card required.">
<meta property="og:image" content="https://clouddash.example.com/images/og-pricing.png">
<meta property="og:url" content="https://clouddash.example.com/pricing">
<meta property="og:type" content="website">Note Open Graph controls how your page appears when shared on social platforms. The og:image should be at least 1200x630 pixels. Test with platform-specific debugging tools after deploying.
<link rel="canonical" href="preferred-url"><link rel="canonical" href="https://example.com/blog/flexbox-guide">Note Use canonical when the same content is accessible at multiple URLs (with/without www, query parameters, etc.). It tells search engines which URL to index and rank.
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow"><meta name="robots" content="noindex, nofollow">
<!-- Use on staging, admin, or private pages -->
<meta name="robots" content="index, follow">
<!-- Default behavior, but explicit is fine -->Note noindex prevents a page from appearing in search results. nofollow tells crawlers not to follow links on the page. For specific bots, use their name instead of robots (e.g., googlebot).
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml"><link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Note Modern browsers support SVG favicons which scale perfectly. Include the .ico fallback for older browsers. apple-touch-icon is used when users add your site to their iOS home screen.
<script type="application/ld+json">
{ "@context": "https://schema.org", ... }
</script><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Understanding CSS Grid",
"author": {
"@type": "Person",
"name": "Jamie Chen"
},
"datePublished": "2026-03-20",
"image": "https://example.com/images/grid-article.jpg"
}
</script>Note JSON-LD structured data helps search engines understand your content and may trigger rich results (star ratings, recipe cards, event details). Place it in the head or body. Validate with search engine testing tools.
<meta name="theme-color" content="#hexcolor"><meta name="theme-color" content="#1a1a2e">
<meta name="theme-color" content="#f5f5f5" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">Note Controls the browser toolbar color on mobile devices. Use the media attribute to set different colors for light and dark system themes.