Skip to content

Instantly share code, notes, and snippets.

@jeremy0x

jeremy0x/meta-boilerplate.html

Last active March 21, 2023 13:49
Show Gist options
  • Save jeremy0x/15b47427512a83a098adc960d71b1de5 to your computer and use it in GitHub Desktop.
Save jeremy0x/15b47427512a83a098adc960d71b1de5 to your computer and use it in GitHub Desktop.
Download ZIP
A ready-to-use HTML meta-tags boilerplate to optimize your website's meta tags for search engines and social media platforms.
Raw
meta-boilerplate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="{{THEME_COLOR}}" />
<meta name="robots" content="index, follow">
<!-- Primary Meta Tags -->
<title>{{PAGE_TITLE}}</title>
<meta name="title" content="{{PAGE_TITLE}}" />
<meta name="description" content="{{PAGE_DESCRIPTION}}" />
<meta name="keywords" content="{{KEYWORDS}}" />
<!-- Alternate language versions of the page -->
<link rel="alternate" hreflang="{{LANGUAGE_CODE}}" href="{{ALTERNATE_PAGE_URL}}" />
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="{{FAVICON_32x32_URL}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{FAVICON16x16__URL}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{FAVICON_180x180_URL}}">
<!-- You can generate a favicon using a tool like https://favicon.io -->
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="{{PAGE_URL}}" />
<meta property="og:title" content="{{PAGE_TITLE}}" />
<meta property="og:description" content="{{PAGE_DESCRIPTION}}" />
<meta property="og:image" content="{{OG_IMAGE_URL}}" />
<meta property="og:site_name" content="{{OG_SITE_NAME}}" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="{{PAGE_URL}}" />
<meta property="twitter:title" content="{{PAGE_TITLE}}" />
<meta property="twitter:description" content="{{PAGE_DESCRIPTION}}" />
<meta property="twitter:image" content="{{TWITTER_IMAGE_URL}}" />
<!-- Schema markup for structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "{{SCHEMA_TYPE}}",
"name": "{{PAGE_TITLE}}",
"description": "{{PAGE_DESCRIPTION}}",
"url": "{{PAGE_URL}}",
"image": "{{SCHEMA_IMAGE_URL}}"
}
</script>
</head>
<body>
<!-- Your website's content goes here -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment