HTML
Meta Tag Reference and Bullet Proof HTML Template
For every HTML page you should have a few key elements to ensure fast loading, and good SEO. The template below gives you all of those features, which you can quickly customise for your needs. I've also listed all useful meta tags below (including the Open Graph OG Meta Tags) if you want to pull them out individually.
<!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">
<meta name="keywords" content="tags,for,your,site">
<link rel="canonical" href="URL for this page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="My Website" />
<meta property="og:description" content="Description of my website" />
<meta property="og:image" content="Image URL representing my website" />
<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: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
SEO
<meta name="description" content="Description of my website">
<meta name="keywords" content="tags,for,your,site">
<meta name="robots" content="index,follow">
Linking
<link rel="shortlink" href="Short form link for this page">
<link rel="canonical" href="URL 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 -->
General Social Media Page
Open Graph og Social Media Tags
<meta property="og:title" content="My Website">
<meta property="og:description" content="Description of my website">
<meta property="og:image" content="Image URL representing my website">
<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"> <!-- Don't change this one -->
<meta name="twitter:site" content="Website URL">
<meta name="twitter:title" content="Title for page">
<meta name="twitter:description" content="Description of page">
<meta name="twitter:image" content="Image of page">
Apple Meta Tags
<!-- 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
Open Graph og Social Media Video Tags
<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"> <!-- can be application/x-shockwave-flash or 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
Open Graph og Social Media 3d Asset Tags
<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">
Last Updated Tuesday, 22 December 2020