d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Meta Tag Reference and Bullet Proof HTML5 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 customize 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="http://dzone.com/style.css" as="style" />
        <!-- if you want to load some CSS async uncomment this -->
        <!--<link rel="preload" href="http://dzone.com/async.css" as="style" />-->
    
        <!-- Preload your fonts if necessary -->
        <link rel="preload" href="http://dzone.com/fonts/fontName.ttf" as="font" crossorigin="anonymous" />
        <link rel="preload" href="http://dzone.com/fonts/fontName.ttf" as="font" crossorigin="anonymous" />
        
        <!-- Load your stylesheets -->
        <link rel="stylesheet" href="http://dzone.com/style.css" />
        <!-- if you want to load some CSS async uncomment this -->
        <!--link rel="stylesheet" href="http://dzone.com/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

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

<link rel="shortlink" href="https://dzone.com/articles/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

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

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

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

That’s all for today. If you have any suggestions, feel free to leave a comment!

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this