HTML Meta Tags to Improve Sharing of your Webpages (and SEO)

#frontend #html #tutorial

If the (example) metadata about your website was:

{
  "title": "The Ultimate Guide to Making Sourdough Bread",
  "description": "Learn the step-by-step process of creating a beautiful, crusty loaf of sourdough bread from scratch. We cover starters, folding, and baking.",
  "pageUrl": "https://your-site.com/blog/sourdough-guide",
  "imageUrl": "https://your-site.com/images/sourdough-guide-1200x630.jpg",
  "imageWidth": "1200",
  "imageHeight": "630",
  "imageAlt": "A golden-brown, freshly baked loaf of sourdough bread on a cutting board.",
  "type": "article",
  "siteName": "The Bread Kitchen",
  "twitterCardType": "summary_large_image",
  "twitterHandleSite": "@BreadKitchen",
  "twitterHandleAuthor": "@ChefJane"
}

The template you could use to generate the optimal HTML would be:

<head>
  <title><%= data.title %></title>

  <meta name="description" content="<%= data.description %>" />

  <meta property="og:title" content="<%= data.title %>" />
  <meta property="og:description" content="<%= data.description %>" />
  <meta property="og:type" content="<%= data.type %>" />
  <meta property="og:url" content="<%= data.pageUrl %>" />
  <meta property="og:site_name" content="<%= data.siteName %>" />
  <meta property="og:image" content="<%= data.imageUrl %>" />
  <meta property="og:image:width" content="<%= data.imageWidth %>" />
  <meta property="og:image:height" content="<%= data.imageHeight %>" />
  <meta property="og:image:alt" content="<%= data.imageAlt %>" />

  <meta name="twitter:card" content="<%= data.twitterCardType %>" />
  <meta name="twitter:site" content="<%= data.twitterHandleSite %>" />
  <meta name="twitter:creator" content="<%= data.twitterHandleAuthor %>" />
  <meta name="twitter:title" content="<%= data.title %>" />
  <meta name="twitter:description" content="<%= data.description %>" />
  <meta name="twitter:image" content="<%= data.imageUrl %>" />
  <meta name="twitter:image:alt" content="<%= data.imageAlt %>" />
<!-- other HEAD content here... -->
</head>

Let's break that down.

Standard SEO Tags

Tag	Purpose & How It's Used
`<title>`	Sets the title in the browser tab. It's also the main headline used by Google in search results listings.
`<meta name="description">`	This is the snippet of text shown below the title in Google search results. It doesn't affect social cards, but it's crucial for SEO.

Open Graph (OG) Tags (Used by Facebook, LinkedIn, Pinterest)

Tag	Purpose & How It's Used
`og:title`	The headline of your share card. This is what users see first. If missing, platforms might grab your page's `<title>`.
`og:description`	The summary text shown below the headline in the card. It's your "sales pitch" for the click.
`og:type`	The type of content you're sharing (e.g., `article`, `website`, `video.movie`). This tells the platform how to categorize it in their system.
`og:url`	The canonical (one-and-only official) URL for the page. All shares and "likes" for this page will be grouped under this single URL.
`og:image`	This is the URL for the image that will appear in the card.
`og:image:width`, `og:image:height`	Tells the platform the exact dimensions of your image. This helps them render the card faster and prevents the image from being cropped weirdly. (1200x630 is the standard).
`og:image:alt`	Provides an accessible text description of the image for users with screen readers.
`og:site_name`	Specifies the name of your overall website (e.g., "The Bread Kitchen"). It often appears as a small "via..." line on the card.

Twitter Card Tags (Used by X/Twitter)

Tag	Purpose & How It's Used
`twitter:card`	Defines the card type. `summary_large_image` is the most popular, featuring a big image. `summary` provides a small thumbnail.
`twitter:site`	The `@username` of your website's main Twitter account (e.g., `@BreadKitchen`). This gets linked in the card.
`twitter:creator`	The `@username` of the content author (e.g., `@ChefJane`). Great for giving credit to individual writers.
`twitter:title`	The headline for the Twitter card. Overrides `og:title` if present.
`twitter:description`	The summary text for the Twitter card. Overrides `og:description` and should be kept under about 200 characters.
`twitter:image`	The image for the Twitter card. Overrides `og:image`.
`twitter:image:alt`	An accessible text description of the image specifically for Twitter.

Creating Share Links

An example template is shown below. Replace the placeholders with URL-encoded values for your web page.

<div id="shareLinks">
  <a 
    href="https://twitter.com/intent/tweet?url=[ENCODED_URL]&text=[ENCODED_TITLE]&via=[ENCODED_VIA]"
    target="_blank" rel="noopener">
    Share on Twitter
  </a>

  <a 
    href="https://www.facebook.com/sharer/sharer.php?u=[ENCODED_URL]"
    target="_blank" rel="noopener">
    Share on Facebook
  </a>

  <a 
    href="https://www.linkedin.com/shareArticle?mini=true&url=[ENCODED_URL]&title=[ENCODED_TITLE]"
    target="_blank" rel="noopener">
    Share on LinkedIn
  </a>

  <a 
    href="mailto:?subject=[ENCODED_TITLE]&body=Check%20out%20this%20article:%20[ENCODED_URL]">
    Share via Email
  </a>
</div>