HTML Page Boilerplate Generator

Generated HTML

<!doctype html>
<html lang="en">
<head>
  <!-- 1. CHARSET & VIEWPORT -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- 2. CORE SEO META -->
  <title>Page Title | Brand Name</title>
  <meta name="description" content="120-160 character description with your main keyword and a call-to-action." />
  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
  <meta name="keywords" content="keyword1, keyword2, keyword3" />
  <meta name="author" content="Author Name" />

  <!-- 3. CANONICAL & HREFLANG -->
  <link rel="canonical" href="https://www.example.com/page" />
  <link rel="alternate" hreflang="en" href="https://www.example.com/page" />
  <link rel="alternate" hreflang="x-default" href="https://www.example.com/page" />

  <!-- 4. OPEN GRAPH -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Page Title | Brand Name" />
  <meta property="og:description" content="120-160 character description with your main keyword and a call-to-action." />
  <meta property="og:site_name" content="Brand Name" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:url" content="https://www.example.com/page" />
  <meta property="og:image" content="https://www.example.com/images/og-image.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Page Title | Brand Name" />

  <!-- 5. TWITTER / X CARD -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Page Title | Brand Name" />
  <meta name="twitter:description" content="120-160 character description with your main keyword and a call-to-action." />
  <meta name="twitter:site" content="@YourBrand" />
  <meta name="twitter:creator" content="@AuthorHandle" />
  <meta name="twitter:image" content="https://www.example.com/images/og-image.jpg" />
  <meta name="twitter:image:alt" content="Page Title | Brand Name" />

  <!-- 6. SCHEMA / JSON-LD -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Page Title | Brand Name",
    "description": "120-160 character description with your main keyword and a call-to-action.",
    "image": {
      "@type": "ImageObject",
      "url": "https://www.example.com/images/og-image.jpg",
      "width": 1200,
      "height": 630
    },
    "author": {
      "@type": "Person",
      "name": "Author Name"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Brand Name"
    },
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://www.example.com/page"
    }
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Your frequently asked question here?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Your detailed answer here."
        }
      }
    ]
  }
  </script>

  <!-- 9. FAVICON & APP ICONS -->
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
  <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192" />
  <link rel="icon" type="image/png" href="/icon-512.png" sizes="512x512" />
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#ffffff" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="Brand Name" />

  <!-- 14. SKIP NAVIGATION -->
  <style>
    .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
    .skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:#141414;color:#fff;z-index:1000;border-radius:8px;}
  </style>
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- 15. SEMANTIC HTML -->
  <header>
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="/">Home</a></li>
        <li aria-current="page">Current Page</li>
      </ol>
    </nav>
  </header>

  <main id="main-content">
    <article>
      <h1>Page Title | Brand Name</h1>
      <p>Start building your page here.</p>
      <img src="https://www.example.com/images/hero.jpg" alt="Descriptive image alt text" />
      <p><a href="/contact">Contact us</a></p>
    </article>
  </main>

  <footer>
    <small>&copy; 2026 Brand Name. All rights reserved.</small>
  </footer>
</body>
</html>
โค้ดจะอัปเดตอัตโนมัติตามค่าที่คุณแก้ไข
เลือกดูบริการตามหมวดหมู่

Checklist

ตั้งค่า Boilerplate

Generated HTML
