An introduction to meta tags, what are they, and why do you need them? Fear not! Let’s dive into the world of meta tags, Open Graph, and X Cards (formerly known as Twitter Cards) with simple explanations and examples to get you started.
Table of Contents
What Are Meta Tags?
Meta tags are little snippets of text in the code of your webpage that give information about your page to search engines and social platforms. They don’t appear on the page itself but sit quietly in the background, helping things like Google understand what your page is all about.
Here’s a basic HTML meta tag example:
<meta name="description" content="A beginner's guide to growing tomatoes. Learn everything from seed selection to watering techniques.">
This is a meta description tag. It gives search engines a short description of what the page is about. It also sometimes shows up in search results under the page title. The better your meta description, the more likely someone will click through to your site!
Common HTML Meta Tags:
Meta Description: As shown above, this tells search engines what your page is about.
<meta name="description" content="Learn to cook delicious pasta dishes with our easy recipes.">
Meta Keywords (not used much anymore): Once upon a time, you’d load this up with keywords, but search engines ignore it nowadays.
<meta name="keywords" content="pasta, recipes, Italian food, cooking tips">
Viewport Tag: This is super important for mobile optimisation. It ensures your page displays properly on phones and tablets.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta tags like these are key for SEO (Search Engine Optimisation), but they’re not the only players in the game. Enter Open Graph.
What Are Open Graph Tags?
Open Graph tags are a type of meta tag used by social media platforms to control how your content looks when it’s shared. Ever noticed how, when you share a link on Facebook or LinkedIn, an image, title, and description automatically appear? That’s Open Graph working its magic.
Here’s an example of basic Open Graph tags:
<meta property="og:title" content="How to Grow Tomatoes">
<meta property="og:description" content="A detailed guide on how to grow juicy tomatoes in your own garden.">
<meta property="og:image" content="https://example.com/images/tomatoes.jpg">
<meta property="og:url" content="https://example.com/grow-tomatoes">
In this example:
- og:title: This sets the title that will show up when the link is shared.
- og:description: This gives a brief summary of the page.
- og:image: This tag tells social media platforms which image to display.
- og:url: This ensures that the correct URL is used when shared.
Platforms That Use Open Graph
Open Graph is used by a variety of platforms to enhance link sharing, including:
- Slack (for link previews in chat)
By adding Open Graph tags, you ensure that your content looks polished and enticing when shared on these platforms. And it’s not just about looking good; Open Graph tags can improve your click-through rates by making your links more visually appealing.
What Are Twitter (X) Cards?
Next up: Twitter Cards, now called Cards for X. These are a bit like Open Graph but specifically for the social platform formerly known as Twitter—now X.
Twitter Cards allow you to control how your content appears when someone shares your link on X. There are a few types of Cards, but the most common one is the Summary Card.
Here’s an example of a Twitter Card (X Card):
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Grow Tomatoes">
<meta name="twitter:description" content="A step-by-step guide to growing your own tomatoes.">
<meta name="twitter:image" content="https://example.com/images/tomatoes-large.jpg">
<meta name="twitter:site" content="@yourusername">
- twitter:card: Specifies the card type. summary_large_image is the most common, displaying a large image with the title and description.
- twitter:title: The title that will show up in the card.
- twitter:description: A brief summary of your page.
- twitter:image: The image that will be displayed.
- twitter:site: Your X handle, so people know who shared the content.
Why Should You Care About Meta Tags, Open Graph, and X Cards?
As a website admin, these tags give you control over how your content is presented in search results and on social media. If you don’t use these tags, your website might not look its best when shared or when Google’s crawling it for ranking purposes.
By crafting clear meta descriptions, using Open Graph tags for social media previews, and setting up X Cards, you’re making your site more user-friendly and SEO-optimised.
In a nutshell:
- Meta Tags help search engines understand your content and show it in the best possible way.
- Open Graph Tags enhance how your content looks when shared on platforms like Facebook and LinkedIn.
- X Cards make your links stand out on X, boosting engagement.
Meta tags may be hidden in the code, but they have a big impact on how your site is seen and shared across the web!
Further Reading
X Developer Platform Information on Cards
