How to Handle Metadata on a Website

I recently spent hours trying to get my metadata together, so I decided to make a post explaining how to take care of it easier

What is MetaData?

Literally, metadata means "data about data," but for a website, it essentially means basic information about the page that you provide to programs like Google to help it understand what your page is. For example, have you ever seen on Twitter, Facebook, or even messaging apps like Discord, when a link is posted a preview of that site appears seemingly magically. This happens because the server saw the link, visited the site, and read the metadata. The information it got from that was used to create the preview.

You can probably see how useful this concept is, and it is also essential for search engine optimization (if you have ever looked into making websites you have probably heard of SEO). However, it is often difficult to find out how to get it working. This is largely due to the fact that many different versions of presenting this data exist, and to work effectively, your site needs to support them all.

It is possible to just use a metadata generator, but I had a hard time finding one that covered every version, and basically had to redo it myself anyway. This guide aims to show you how to handle this metadata yourself, and also provides a link to a generator I created that creates a website skeleton for you. In fact, I used my version of that script to create the template for this page!

How to MetaData

Surprisingly, metadata requires very little information. For most purposes, a title, description, keywords, and image link are all that is necessary. The rest is mostly a template.

To insert metadata, we just need to use the meta tag. It is self-closing (meaning it doesn't have two parts, like <p></p>. Instead, it is one piece: <meta />), and has two basic parts: name="" and content="". Name is what data is being represented (like a description) and content is the, well, content.

First lets start with what is arguably the most common (and most necessary) meta tag on the web: viewport. This single tag ensures that your website renders normally even on very small devices (like phones).

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Next lets add some of the other boilerplate tags. These ensure the text is rendered correctly (UTF-8 encoding format) and that Google knows to track your page (robots). You would want to change this if you had links that Google shouldn't follow (they do not relate to how your page links to other pages) or you don't want it to index the page (it is not an official part of the site). See Google's guidelines for these, as I mostly just use index, follow everywhere.

<!-- General Meta --> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta name="robots" content="index, follow" />

Now we can start getting into the details. Next there is some data that is normal for most websites and really does not do anything special. The description is a short explanation of the page, and keywords are special words that help categorize it. All of this code comes directly from this page. Meta, isn't it?

(sorry, I had to)

<meta name="description" content="I recently spent hours trying to get my metadata together, so I decided to make a post explaining how to take care of it easier" /> 
<meta name="keywords" content="metadata, opengraph, twitter, facebook, google, website, html" />
<meta name="author" content="Griffith" />

Finally, we repeat this information for each type of social network/web crawler. Google and Twitter just need you to add an image (the picture that shows in the site preview), and OpenGraph (for Facebook and others) also wants the page url. Each one also has its own format, but they are essentially the same.

Google:

<!-- Google metadata -->
<meta itemprop="name" content="How to Handle Metadata on a Website">
<meta itemprop="description" content="I recently spent hours trying to get my metadata together, so I decided to make a post explaining how to take care of it easier">
<meta itemprop="image" content="https://llumen.neocities.org/tutorials/tutorial-images/meta.jpeg">

Twitter:

The twitter:card value is the style of "card" you want Twitter to use for your page. You can change this if you want, but summary_large_image works for most applications.

<!-- Twitter metadata -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Handle Metadata on a Website" />
<meta name="twitter:description" content="I recently spent hours trying to get my metadata together, so I decided to make a post explaining how to take care of it easier" />
<meta name="twitter:image" content="https://llumen.neocities.org/tutorials/tutorial-images/meta.jpeg" />

OpenGraph:

The type property of OpenGraph refers to the type of content on the page. If this page hosted a movie, you light use movie or video. See the OpenGraph specification for more information.

<!-- OpenGraph metadata -->
<meta property="og:title" content="How to Handle Metadata on a Website" />
<meta property="og:description" content="I recently spent hours trying to get my metadata together, so I decided to make a post explaining how to take care of it easier" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://llumen.neocities.org/tutorials/managing-meta.html" />
<meta property="og:image" content="https://llumen.neocities.org/tutorials/tutorial-images/meta.jpeg" />

Finally, we can put the page title, and a "canonical" link. This shows which site is the 'official' version in case you have multiple versions of the same page.

<link rel="canonical" href="https://llumen.neocities.org/tutorials/managing-meta.html">

<title>How to Handle Metadata on a Website</title>

The Easy Way

So, now that you have seen how to do it manually, here is the way around it. Because this is such a repetitive task, I created a simple c script to automate it. It essentially asks for the basic elements (title, description, keywords, image link, site link) and then creates an html template in that folder. To use it, just copy the file into the folder where you have your website (or another folder, but make sure the place you tell it to write exists) and run it. It will output an html template with the name you entered, in the correct folder (if it is in your site).

Example usage:

Website Metadata Generator
To use, enter the requested information.
Note: the output will be a file created in 
  the directory you specify in the website address.
  It is best to have this in the root folder of your site,
  But otherwise can be used if you ensure the folder it is 
  meant to write to exists.

Enter the title: Test
Enter the description: A test page
Enter keywords (separated by ","): test, page
Enter the image link: https://yoursite.com/test.png
Enter the website address: https://yoursite.com/test.html
Done

Example output:

<!-- Website design by your name --> 

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
    <!-- General Meta --> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="robots" content="index, follow" /> 
    <meta name="description" content="A test page" /> 
    <meta name="keywords" content="test, page" />
    <meta name="author" content="your name" />

    <!-- Twitter metadata -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Test" />
    <meta name="twitter:description" content="A test page" />
    <meta name="twitter:image" content="https://yoursite.com/test.png" />

    <!-- OpenGraph metadata -->
    <meta property="og:title" content="Test" />
    <meta property="og:description" content="A test page" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://yoursite.com/test.html" />
    <meta property="og:image" content="https://yoursite.com/test.png" />

    <!-- Google metadata -->
    <meta itemprop="name" content="Test">
    <meta itemprop="description" content="A test page">
    <meta itemprop="image" content="https://yoursite.com/test.png">

    <link rel="canonical" href="https://yoursite.com/test.html">
    
    <title>Test</title>
    
    <!-- replace these with your links -->
<!--<link href="/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="shortcut icon" type="image/png" href="../images/favicon.png"/>-->
    
    <!-- replace these with your scripts -->
<!--<script src="/js/script.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script><!--Jquery-->-->
    
    <!-- html5 support for old browsers -->
    <style>
      header, section, footer, aside, nav, main, article, figure {
        display: block;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" defer="defer"></script>
    <![endif]-->
</head>

<!-- ********************************************************************** -->

<body>

<!-- Put your page here! -->

</body>

</html>

You can find the source code here.