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> Use target="_blank" and rel="noopener" on your share link tags to open them in a new tab securely.
Top comments (0)