DEV Community


Posted on • Updated on • Originally published at

Check your head 🤔

Check your head
There are many steps to follow when designing and building a webpage, choosing a color scheme, determining which technologies to use, which hosting site, domain name, etc. That is why it is important to plan before you start writing any line of code. But sometimes we're in a hurry, we want to build a quick webpage and get it uploaded fast. This is where mistakes are made. Like the saying goes:

errare humanum est

To err is human, we as humans will make mistakes, it is better to plan ahead and prevent them in the first place. Sometimes we focus so much on the design and functionality of a website that we forget to check if our <head> contain the basic recommended <meta> elements.

So what's the problem? No problem at all... This just goes to say that it's ok to make mistakes, we all do, Trainees. Juniors, Seniors and even those LVL +9000. You're not the only one. Take a deep breath, relax, do some Google researching about the error, read some documentation or ask a fellow developer for help.

Let's get back to the main topic of this post, checking your so that it has all the right metadata.

What are meta tags?

Meta tags are fragments of text content that provide an outline or summary of the webpage. The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

Why are meta tags important?

The information provided in the meta tags will appear in search results and when someone shares a link to your site on social media or in chats.

What metadata should you include?


<meta charset="utf-8" />
Enter fullscreen mode Exit fullscreen mode

This element specifies the document's character encoding.


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

The viewport is the user's visible area of a web page. Set the viewport to make your website look good on all devices.


<title>Ezequiel Castellanos | Front-end Developer</title>
Enter fullscreen mode Exit fullscreen mode

The title element represents the title of the HTML document (not the content).

Author & Description

<meta name="author" content="Ezequiel Castellanos" />
<meta name="description" content="Personal website and Blog" />
Enter fullscreen mode Exit fullscreen mode

These two elements specify the author and provide a brief description of the page.

Open Graph Protocol (og)

Facebook invented the Open Graph protocol to provide more metadata for our websites to display when we share a link in social media. The link will now appear along with an image and description, much more captivating than a simple word link.

  content="Ezequiel Castellanos | Front-end Developer"
<meta property="og:type" content="website" />
<meta property="og:url" content="" />

<meta property="og:site_name" content="Ezequiel Castellanos" />
<meta property="og:description" content="Personal Website and Blog" />
Enter fullscreen mode Exit fullscreen mode

Preview of how a link to a blog post would look like if posted on FacebookPreview of how a link to a blog post would look like if posted on Facebook

Twitter Cards

Similar to Open Graph Data, Twitter Cards allows you to attach images and description to Tweets.

Whenever a user Tweets a link to your content, the tweet will include a “Card” that will be visible to their followers.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Ezequiel_Caste" />
<meta name="twitter:creator" content="@Ezequiel_Caste" />
<meta name="twitter:title" content="Ezequiel Castellanos" />
<meta name="twitter:description" content="Personal Website and Blog" />
<meta name="twitter:url" content="" />
Enter fullscreen mode Exit fullscreen mode

Preview of a Twitter Card for a blog postPreview of a Twitter Card for a blog post

Once your twitter card tags are up and running you can use this validator to check-out how it would look. The validator checks for the correct tags and gives you this message if everything went ok:

INFO:  Page fetched successfully
INFO:  24 metatags were found
INFO:  twitter:card = summary tag found
INFO:  Card loaded successfully
Enter fullscreen mode Exit fullscreen mode


This is the icon that will appear in the user's Bookmark or Favorites in their browser.

Adding your favicon to the

of your site:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Enter fullscreen mode Exit fullscreen mode

I highly recommend using you only have to upload the image you want to use as favicon and the site automatically generates the meta tags and provides a zip file with all the necessary icon files of different sizes.

Don't have a favicon yet? You can make your own icon with It's really easy, mine only took 10 minutes to design.

Original design made with CanvaOriginal design made with Canva

Favicon appears to the left of your webpage title.Favicon appears to the left of your webpage title.

Check your <head>

Once you have your meta tags, open graph, twitter card and favicon included in your webpage, you can verify how the links to your site will appear in search engines and social media posts. Check your URL with this site:

Meta Tags - Preview, Edit and Generate

This site will also generate all the required meta tags in case you missed any.

Good luck! 🥳

Credits & References

Meta Tag


Twitter Cards

Top comments (0)