Performance & SEO

How to Add Meta Tags & Schema to HTML Pages

Meta tags and schema markup are two essential components that help search engines understand and display your HTML pages correctly. If you’re running a static HTML site or customizing a template, learning how to implement meta tags and structured data will improve your SEO, click-through rates (CTR), and content visibility.

What Are Meta Tags?

Meta tags are HTML elements placed in the <head> section of a webpage that provide metadata (information about the page) to browsers and search engines.

How to Add Meta Tags

Add these tags inside your <head> section:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Your page description here">
<meta name="keywords" content="HTML, SEO, meta tags, schema, structured data">
<meta name="author" content="Your Name">
<title>Your Page Title | Brand Name</title>

Key Meta Tags Explained

  • <meta charset>: Defines the character encoding.
  • <meta name=”viewport”>: Controls how your page scales on mobile.
  • <meta name=”description”>: Describes your page in 155-160 characters for search engines.
  • <meta name=”keywords”>: Optional but useful for some search engines.
  • Open Graph Tags: Help control how your page appears on social media platforms.

What is Schema Markup?

Schema.org is a structured data vocabulary that you can use to add context to your content. When implemented correctly, schema markup enables rich snippets — extra information like star ratings, FAQs, product details, and more — in search results.

How to Add Schema Markup

Schema is best added in JSON-LD format. Place the script inside your <head> or before </body>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Your Page Title",
  "description": "Your page description here",
  "url": "https://yourdomain.com/page"
}
</script>

Common Schema Types

  • Article / BlogPosting
  • LocalBusiness
  • Product
  • FAQPage
  • BreadcrumbList

Testing and Validation Tools

Best Practices

  • Keep meta descriptions unique per page.
  • Use natural keywords in the title and description.
  • Validate schema before publishing.
  • Avoid duplicated or outdated meta tags.
  • Update Open Graph and Twitter cards for better social media presentation.

Conclusion

Adding meta tags and schema markup to your HTML pages is a simple yet powerful way to boost your SEO and content visibility. Whether you’re building from scratch or using a static template, following this guide will help ensure your website is both search engine–friendly and user-friendly.