Learn to Code via Tutorials on Repl.it!

← Back to all posts
HTML5 metadata that is incredibly usefull!
RayvelArjoon (82)

This tutorial is going to cover some of the metadata you can include. It will include essential and incredibly useful metadata that will make your website stand out vs others. At the bottom of this tutorial, it will include a list of all of the metadata you could possibly include. Make sure to add opening and closing <head> tags to inclose your metadata. Now, let's get started!

Here is a link to some country codes and language codes:

Although it's not completely considered metadata by some, include these two attributes to your html tag at the start of your document:

<html lang="en-ca" dir="ltr">

The lang attribute has the language used on the website. Use the language code followed by a hyphen and your country code. Currently, the langauge is set to English, Canadian. Some codes include, but are not limited to:

The second attribute of dir is the direction of the sentences on the website. ltr means left-to-right. rtl would mean right-to-left.

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!--Specifies the viewing area of the website-->

    <meta name="owner" content="First Middle Last">
    <!--Specifies the owner of the website-->

    <meta name="keywords" content="conquest, fazerdevs, rayvel">
    <!--specifies keywords people can search on their search engines, like Google, to find your website-->

    <meta name="description" content="Insert website description">
    <!--This describes the website-->

    <meta http-equiv="content-language" content="en-ca">
    <!--don't ask why, but this is another way to set your website's language-->

    <meta name="designer" content="Rayvel A">
    <!--This is the website designer-->

    <meta name="format-detection" content="telephone=yes">
    <!--This changes the detection of phone numbers on the website. When set to 'no', it will not do this-->

    <!--open graph meta data. This metadata changes how your website will be referenced on social media; like the thumbnail and title-->
    <meta name="og:title" content="Conquest">
    <!--This would change the site's title-->

    <meta name="og:image" content="neverGonnaGiveYouUp.png">
    <!--This is the preview image or thumbnail.-->

    <meta name="og:image-height" content="500">
    <!--This changes the height of the preview image or thumbnail-->
    <meta name="og:image-width" content="500">
    <!--This changes the width of the preview image or thumbnail-->

    <meta name="og:url" content="https://conquest.rayvelarjoon.repl.co/">
    <!--This will be the link that appears on the screen. If it detects that the link will not take the user to that site, it will not show or take your there. It will take them to the default set link. This is for bibliography makers-->

    <meta name="og:type" content="game">
    <!--This changes the type of website. This is an example used from an HTML5 game I made. This can be changed to video or movie-->

    <meta name="og:region" content="CA">
    <!--This changes the site's set region. It is currently set to Canada. Check the link above to see all the possible country codes and language codes-->

    <meta name="og:country-name" content="CA">
    <!--This is the country name. The same as the one before-->
    <meta name="apple-mobile-web-app-capable" content="no">
    <!--This tells the browser if the website is good for mobile devices.-->

    <meta name="og:description" content="Insert website description here">
    <!--This is the website description and it will show on Facebook and other social media platforms when you share a link to your site-->

    <meta name="og:site_name" content="Conquest">
    <!--This is different from the title. This is the full site name, as this won't appear on the tab or the thumb. This is for the browser or software used.-->

    <!--twitter meta data | This changes how the website is referenced on Twitter specifically-->
    <meta name="twitter:title" content="Conquest">
    <meta name="twitter:description" content="Put a detailed description here">
    <meta name="twitter:image" content="poster_image.png">
    <meta name="twitter:card" content="summary_large_image">
    <!--This changes how your website will show when someone sends a link to your website. When changed to 'summary', it will just show the description put in the metadata. When changed to 'image' or 'large_image' it will show just the thumbnail or preview image. If you set it to the value above, it will show both.-->

    <meta name="twitter:image:alt" content="Conquest™">
    <!--This text will show if the image fails to load-->

    <meta itemprop="description" content="Put a detailed description here">

    <!--title meta data-->
    <title>This text will show on the tab when you open it.</title>
    <!--This will change the text on the tab. Make it short so the page viewer can see it easily without having to hover their mouse over it.-->

    <!--links to the website favicons-->
    <!--A favicon is what will show on the tab as an icon. This is normally your logo or your 'favourite' icon.
They can vary i different resolutions/sizes-->
    <link rel="fluid-icon" href="favicons/favicon-96x96.png"/>
    <link rel="icon" type="img/png" sizes="16x16" href="favicons/favicon-16x16.png"/>
    <link rel="icon" type="img/png" sizes="32x32" href="favicons/favicon-32x32.png"/>
    <link rel="icon" type="img/png" sizes="96x96" href="favicons/favicon-96x96.png"/>

    <!--The favicons below are for IOS-->
    <link rel="apple-touch-icon" type="img/png" sizes="60x60" href="favicons/apple-icon-60x60.png"/>
    <link rel="apple-touch-icon" type="img/png" sizes="72x72" href="favicons/apple-icon-72x72.png"/>
    <link rel="apple-touch-icon" type="img/png" sizes="76x76" href="favicons/apple-icon-76x76.png"/>
    <link rel="apple-touch-icon" type="img/png" sizes="57x57" href="favicons/favicon-57x57.png"/>
    <link rel="icon" type="img/png" sizes="70x70" href="favicons/favicon-70x70.png"/>
    <link rel="icon" type="img/png" sizes="256x256" href="favicons/favicon-256x256.png"/>

    <!--a manifest contains data on all of the favicons used and can alter how they look and the rest of their properties in JavaScript Object Notation (JSON)-->
    <link rel="manifest" href="favicons/manifest.json"/>

    <!--Wait, this is metadata? That's right! Although, some people put this in the `<body>` of their doc, this should be put in the `<head>` as a W3C standard-->
    <link href="style.css" rel="stylesheet" type="text/css"/>
rxphasource (2)