Discoverable Content¶

The phrase discoverable content refers to the data about your data (the metadata) that can be included in HTML documents.

Search engines use metadata from your page to determine which content on your page should be displayed in search.

For example, search engines know to ignore text inside a <nav> tag (short for “Navigation”), as that should only contain buttons used to navigate around your website.

<html>, <head>, <body> and <nav> are all known as “Structural tags”. These tags can be used throughout a HTML document to create a easy to identify structure. Below is an example:

It is recommended to structure HTML pages properly with appropriate tags such as <nav>, <main>, <article>, <footer> and so on. These tags are functionally the same as <body>, they do not indicate anything about the page other than the structure.

<html>
 <head>
  <title>My Page</title>
 </head>
 <body>
  <nav>
   <a href="https://mysite.com">Home</a>
  </nav>
  <main>
   <article>
    <h1>My Article</h1>
    <p>The text for my article</p>
   </article>
  </main>
  <footer>
   <p>Helpful links</p>
   <a href="https://site.com">Site</a>
  </footer>
 </body>
</html>

While structuring your documents with these tags is helpful, if you want the most bang for your buck we need to start including <meta> tags.

When you share a site on Facebook messenger, or make a Twitter post, you may have noticed that the link creates a relevant image along with a title and description of the linked website. This does not happen automatically.

Website owners must include a set of tags so that these services know which information to include.

If they are not defined, Facebook/Twitter/etc will attempt to pick the most relevant picture, but this often doesn’t work very well.

Let’s set all the meta properties we need for Facebook. To start with, we can set the title using the following <meta> tag.

<meta property="og:title" content="My Site | Home" />

We can set the description to be shown like this:

<meta property="og:description" content="Welcome to My Site!" />

And we can set the image to be shown with this:

<meta property="og:image" content="https://mysite.com/image.jpg" />

Lastly, we should give the “base” url of the website, as well as set the type of link to be website. This base URL ensures that every link to your website uses this exact format, as often you will have multiple ways to access a website, such as www.mysite.com and mysite.com

Other computers don’t know which one to use, so we will provide them with our preference.

This “base” url is also known as the “Canonical” url - similar to how in the Marvel Universe, something that is “Canon” is considered true by the authors but not necessarily mentioned specifically in a movie.

<meta property="og:url" content="https://mysite.com" />
<meta property="og:type" content="website" />

If you are making a website that is destined to be shared on social media, correct usage of the tags is a must. If you need to test your website, Facebook and twitter both provide good tools to check that your website has properly formatted metadata.

Note: Facebook will complain unless you have a facebook application ID, but you don’t need one.

https://developers.facebook.com/tools/debug/

https://cards-dev.twitter.com/validator

In our next post we’ll talk about sharing images on the web, and the breakthrough of the SVG format.