Meta Tag Reference and Bullet Proof HTML Template

🧑‍💻 Go back to the homepage

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 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 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

html Copy

<meta name="description" content="Description of my website">
<meta name="robots" content="index,follow">
<meta name="keywords" content="tags,for,your,site">

Linking

html Copy

<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

html Copy

<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">

Twitter

html Copy

<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

html Copy

<!-- 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

html Copy

<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

html Copy

<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