Open navigation menu

Meta Tags for SEO and Social

Demonstrates essential meta tags for SEO, Open Graph, Twitter Cards, and mobile optimization including viewport and charset declarations.

HtmlConfig Management

Code

snippet
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Page Title | Site Name</title>
  <meta name="description" content="A concise description for search results.">
  <meta name="keywords" content="html, meta, seo, tutorial">
  <meta name="author" content="Author Name">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/page">

  <meta property="og:type" content="article">
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description for social sharing.">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:site_name" content="Site Name">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Description for Twitter.">
  <meta name="twitter:image" content="https://example.com/image.jpg">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="theme-color" content="#ffffff">

  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Page Content</h1>
</body>
</html>

Related Examples