Essential <meta> Tags for SEO and Social Sharing

Published on: June 18, 2024 by Dr. Talib

The <head> of an HTML document contains hidden data that is critical for search engines and social media platforms. By including the right <meta> tags, you can control how your website appears in Google search results and how it's previewed when shared on sites like Facebook, Twitter, or LinkedIn.

The "Big Three" for SEO

The Foundation: While there are many meta tags, three are absolutely essential for search engine optimization (SEO). Every single page on your site should have a unique version of these.

<title>: While not a meta tag, the title is the most important tag for SEO. It becomes the clickable headline in search results and the text in the browser tab. Keep it under 60 characters.
<meta name="description">: The short paragraph that appears under your title in Google search results. It should be a compelling summary of the page content, around 155-160 characters.
<meta name="viewport">: This tag tells the browser how to control the page's dimensions and scaling on mobile devices. It is essential for a responsive, mobile-friendly design.

A Basic SEO-Friendly Head:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A Great Page Title | Your Brand</title>
  <meta name="description" content="A concise and engaging summary of this page's content, written to attract clicks from search results.">
</head>

Try it Yourself: You can't see these tags render in the HTML Viewer's preview pane, but you can see them in action by searching for any major brand on Google. The blue link is their <title>, and the text below is their meta description.

Making Your Site Look Great on Social Media: The Open Graph Protocol

The Problem: When you share a link on Facebook, Twitter, or WhatsApp, how does it know what image, title, and description to show? The answer is the Open Graph (OG) protocol.

The Solution: By adding OG meta tags to your <head>, you provide a template for social media platforms to build a rich, attractive preview card.

The Most Important Open Graph Tags:

og:title: The title of your content.
og:description: The description you want to show.
og:image: The absolute URL to the preview image you want to display (this is the most important one!).
og:url: The canonical URL of your page.
og:type: The type of content, usually "website" or "article".

Example Head with SEO and Open Graph Tags:

<head>
  <!-- Basic SEO Tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A Great Page Title | Your Brand</title>
  <meta name="description" content="A concise and engaging summary of this page's content.">

  <!-- Open Graph / Social Media Tags -->
  <meta property="og:title" content="A Great Page Title">
  <meta property="og:description" content="A concise and engaging summary of this page's content.">
  <meta property="og:image" content="https://www.yoursite.com/images/awesome-preview-image.jpg">
  <meta property="og:url" content="https://www.yoursite.com/your-page.html">
  <meta property="og:type" content="article">
</head>

Pro Tip: Notice the property attribute is used for Open Graph tags instead of name. This is the correct syntax.

Control Your Digital First Impression

Meta tags are your chance to control the snippet of information that represents your webpage across the internet. Taking a few minutes to write a good title, description, and OG tags can dramatically increase your click-through rates from both search and social media, driving more traffic to your site.