Meta Tags for Visibility and Sharing, ¿What are they and how to use them?
Meta Tags for Visibility and Sharing
Meta tags are snippets of text that describe a page's content; the meta tags don't appear on the page itself, but only in the page's source code. They are essentially little content descriptors that help tell search engines what a web page is about.
Here are the most critical meta tags for improving your page's visibility and how it appears when shared on social media.
1. Standard SEO Meta Tags
These tags are crucial for search engines like Google to understand and rank your content.
-
Title Tag (
<title>): While technically not a meta tag, it's often grouped with them. It defines the title of the document and is displayed in search engine results pages (SERPs) as the clickable headline.<title>Your Page Title | Brand Name</title> -
Meta Description (
<meta name="description">): A brief summary of the page content. Search engines often use this for the snippet displayed below the title in search results.<meta name="description" content="A concise summary of your page content (approx. 155-160 characters)."> -
Viewport (
<meta name="viewport">): Essential for mobile responsiveness. It controls how the page is displayed on mobile devices.<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
Charset (
<meta charset="UTF-8">): Specifies the character encoding for the HTML document, ensuring special characters render correctly.<meta charset="UTF-8">
2. Open Graph (OG) Tags
Developed by Facebook, the Open Graph protocol is now used by LinkedIn, Pinterest, and other platforms to display rich content when your links are shared.
-
og:title: The title of your object as it should appear within the graph.
<meta property="og:title" content="Your Engaging Headline"> -
og:description: A one to two sentence description of your object.
<meta property="og:description" content="A brief description that encourages clicks."> -
og:image: An image URL which should represent your object within the graph. This is crucial for visual appeal in feeds.
<meta property="og:image" content="https://example.com/image.jpg"> -
og:url: The canonical URL of your object that will be used as its permanent ID in the graph.
<meta property="og:url" content="https://example.com/page-url"> -
og:type: The type of your object, e.g., "website", "article", "video".
<meta property="og:type" content="website">
3. Twitter Cards
Twitter (X) uses its own set of tags, though it often falls back to Open Graph tags if Twitter-specific ones are missing.
-
twitter:card: The type of card to be created (e.g., "summary", "summary_large_image").
<meta name="twitter:card" content="summary_large_image"> -
twitter:title: Title of the content (fallback to og:title).
<meta name="twitter:title" content="Your Page Title"> -
twitter:description: Description of content (fallback to og:description).
<meta name="twitter:description" content="Description for Twitter users."> -
twitter:image: URL of image to use in the card.
<meta name="twitter:image" content="https://example.com/image.jpg">
4. Robots Meta Tag
This tag tells search engine crawlers what they are allowed to do on your page.
- Index/Noindex: Tells crawlers whether to index the page.
- Follow/Nofollow: Tells crawlers whether to follow links on the page.
<!-- Default behavior (index and follow) -->
<meta name="robots" content="index, follow">
<!-- Do not index this page -->
<meta name="robots" content="noindex, follow">
5. Other Useful Tags
-
Canonical Tag (
<link rel="canonical">): Helps prevent duplicate content issues by specifying the "preferred" version of a web page.<link rel="canonical" href="https://example.com/preferred-page"> -
Author: Credits the author of the content.
<meta name="author" content="Author Name">
Summary
Implementing these tags correctly ensures that your content looks professional when shared and is easily understood by search engines, directly impacting your traffic and user engagement.