Johnny SimpsonFor every HTML page you should have a few key elements to ensure fast loading, and good SEO. In this guide we'll be going through all the meta tags you should be including on your web page, so that it's fully optimised for every situation. Below, you can find a full SEO meta tag template which gives you all the meta tags you need on your web page, and which you can quickly customise for your needs. Scroll further to find information on social media meta tags, video meta tags, image meta tags, and 3d asset meta tags.
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="icon" type="text/png" href="https://fjolt.com/favicon.png">
<!-- load if you are using google fonts -->
<!--<link rel="preconnect" href="https://fonts.gstatic.com">-->
<meta name=”description” content="Description of my website">
<meta name="robots" content="index,follow">
<link rel="canonical" href="URL for this page">
<meta property="og:title" content="My Website" />
<meta property="og:locale" content="en_GB (or other locality code)" />
<meta property="og:description" content="Description of my website" />
<meta property="og:image" content="Image URL representing my website" />
<meta property="og:image:width" content="Image Width" />
<meta property="og:image:height" content="Image Height" />
<meta property="og:image:alt" content="Image alternative text, if the image is missing" />
<meta property="og:image:type" content="image/png (or other i.e. image/jpeg, image/gif)" />
<meta property="og:url" content="URL for this page" />
<meta property="og:site_name" content="My Website" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="https://fjolt.com">
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:creator" content="{{twitterHandle}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:image" content="{{image}}">
<!-- For mobile devices -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- Use if you are using google analytics, replace [[ID HERE]] in script and code with your ID -->
<!--
<script async src="https://www.googletagmanager.com/gtag/js?id=G-[[ID HERE]]"></script>
<script>
var host = window.location.hostname;
if(host !== "localhost") {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[[ID HERE]]');
}
</script>-->
<!-- Preload your stylesheets -->
<link rel="preload" href="/style.css" as="style" />
<!-- if you want to load some CSS async uncomment this -->
<!--<link rel="preload" href="/async.css" as="style" />-->
<!-- Preload your fonts if necessary -->
<link rel="preload" href="/fonts/fontName.ttf" as="font" crossorigin="anonymous" />
<link rel="preload" href="/fonts/fontName.ttf" as="font" crossorigin="anonymous" />
<!-- Load your stylesheets -->
<link rel="stylesheet" href="/style.css" />
<!-- if you want to load some CSS async uncomment this -->
<!--link rel="stylesheet" href="/async.css" media="print" onload="this.media='all'">-->
</head>
<body>
<!-- Your Website Body -->
<!-- Your Main JS Script -->
<script defer src="local.js"></script>
</body>
</html>
Meta Tags
Make sure you include these tags to optimise your page SEO.
<meta name="description" content="Description of my website">
<meta name="robots" content="index,follow">
<link rel="canonical" href="URL for this page">
Linking Meta Tags
Linking tags give your page more context, and help the browser know what to expect.
<link rel="shortlink" href="Short form link for this page">
<link rel="prev" href="URL for the prev page in this series">
<link rel="next" href="URL for the next page in this series">
<link rel="dns-prefetch" href="Link to a DNS server far to lookup early on">
<link rel="prefetch" href="Link to a document or file to prefetch and cache">
<link rel="prerender" href="The document should be optimised for rendering on the page">
<link rel="preload" href="Link to a document or file to prefetch and cache which will be used in the page" as="script"> <!-- "as" can be script, font, stylesheet -->
Social Media Meta Tags
Lots of web pages end up on social media. Make sure your page is prepared by using these general HTML social meta tags.
<meta property="og:title" content="My Website">
<meta property="og:locale" content="en_GB (or other locality code)">
<meta property="og:description" content="Description of my website">
<meta property="og:image" content="Image URL representing my website">
<meta property="og:image:width" content="Image Width">
<meta property="og:image:height" content="Image Height">
<meta property="og:image:alt" content="Image alternative text, if the image is missing">
<meta property="og:image:type" content="image/png (or other i.e. image/jpeg, image/gif)">
<meta property="og:url" content="URL for this page">
<meta property="og:site_name" content="My Website">
Twitter Meta Tags
While the og: tags are good for a lot of social media, twitter has specific HTML meta tags. Add these so your page works properly on twitter.
<meta name="twitter:card" content="summary_large_image"> <!-- Don't change this one -->
<meta name="twitter:site" content="Website URL">
<meta name="twitter:title" content="Title for page">
<meta name="twitter:creator" content="Your Twitter Handle">
<meta name="twitter:description" content="Description of page">
<meta name="twitter:image" content="Image of page">
Apple Meta Tags
These tags are used by apple to detect the format and size of your page, mostly on mobile devices. Add these Apple meta tags to your HTML documents to ensure everything works as expected on mobile.
<!-- indicates this will run in full screen mode on iOS devices -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- set color of top band in iOS, requires apple-mobile-web-app-capable to be set -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- auto detect phone numbers on apple devices on this page -->
<meta name="format-detection" content="telephone=yes">
<!-- For mobile devices -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1" user-scalable="no">
Social Media Video Meta Tags
If your page contains a video, add this set of HTML video meta tags in so that when it is shared, websites will recognise the key assets on your page.
<meta name="og:video" content="Video URL">
<meta name="og:video:secure_url" content="Secure Video URL">
<meta name="og:video:types" content="Video Format"> <!-- i.e. video/mp4. -->
<meta name="og:video:width" content="Video Width i.e. 100px">
<meta name="og:video:height" content="Video Height i.e. 200px">
<meta name="og:video:image" content="Placeholder image for video">
Social Media 3d Asset Meta Tags
It's not often, but sometimes you have a 3D asset on your page. These HTML 3d meta tags helps the browser and other sites understand the key 3d asset on your page.
<meta property="og:type" content="threed.asset"> <!-- set to threed.asset for 3d -->
<meta property="og:asset" content="/link/to/asset.glb">
<meta property="og:title" content="Title of asset">
