Website Meta Tags A Comprehensive Field Guide

59 min read

Meta tags are crucial elements in your HTML that provide structured metadata about your webpage. While invisible to the average visitor, they play a significant role in how your site is interpreted by search engines and social media platforms. Let's break down each type of meta tag and explain their fields in detail.

1. Open Graph (OG) Tags

Open Graph protocol, initiated by Facebook, is now widely used across various social media platforms. Here's a breakdown of each field:

<meta property="og:url" content="https://www.pintree.io">
<meta property="og:type" content="website">
<meta property="og:title" content="Pintree">
<meta property="og:description" content="Managing and Exporting your Bookmarks into a Website">
<meta property="og:image" content="https://app.pintree.io/assets/og.png">
  • og:url: The canonical URL of your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters.
  • og:type: The type of your object, e.g., "website" for a website, "article" for a blog post, "product" for an e-commerce product page.
  • og:title: The title of your page. This should be concise and engaging, as it will be the first line people see when your content is shared.
  • og:description: A brief description of the content. This is your chance to entice users to click through to your site.
  • og:image: The URL of an image that represents your content. This image will be displayed when your content is shared on social media.

2. Twitter Card Tags

Twitter has its own set of meta tags, known as Twitter Cards:

<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="Pintree.io">
<meta property="twitter:url" content="https://www.pintree.io">
<meta name="twitter:title" content="Pintree">
<meta name="twitter:description" content="Managing and Exporting your Bookmarks into a Website">
<meta name="twitter:image" content="https://app.pintree.io/assets/og.png">
  • twitter:card: Specifies the type of card to be created. "summary_large_image" is used for a large image summary card.
  • twitter:domain: The domain of your website. This helps establish the origin of the shared content.
  • twitter:url: The URL of the page being shared. This should match your og:url for consistency.
  • twitter:title: The title of your content as it should appear in the card.
  • twitter:description: A concise description of your content, limited to 200 characters.
  • twitter:image: The URL of the image to be displayed in the card. For best results, this image should be at least 300x157 pixels.

3. Favicon Tags

Favicons are small icons that represent your website in various contexts:

<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="mask-icon" href="assets/favicon/favicon-32x32.png" color="#0b0b0f">
  • apple-touch-icon: Specifies the icon used when a user adds your website to their iOS device's home screen.
  • icon: Defines the favicon for different sizes and devices. Multiple sizes ensure crisp display across various contexts.
  • mask-icon: Used by Safari on macOS for pinned tabs. The color attribute defines the color of the icon.

4. Structured Data (JSON-LD)

Structured data helps search engines understand the content of your page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://www.pintree.io",
  "name": "Pintree",
  "description": "Managing and Exporting your Bookmarks into a Website",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.pintree.io/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>
  • @context: Specifies the schema vocabulary being used, typically "https://schema.org".
  • @type: Defines the type of item being described, in this case, a "WebSite".
  • url: The URL of your website.
  • name: The name of your website.
  • description: A brief description of your website.
  • potentialAction: Describes a potential action on the item, in this case, a search action.
    • @type: The type of action, here it's "SearchAction".
    • target: The URL template for performing the search.
    • query-input: Specifies the required input for the search action.

By implementing these meta tags correctly, you provide clear signals to search engines and social media platforms about your content, enhancing your website's visibility and appeal across the digital landscape.