Author: James Clark
Search engines, social media platforms, and browsers don’t see web pages the same way human visitors do. They need additional context to help them fully understand what the content means, what they should do with it, and how they should display it to users. You can provide that context by adding meta tags to your web pages.
In this article, you’ll learn what meta tags are, how they can maximize your SEO and social media impact, and how to manage them on your website.
Table of contents:
What are meta tags?
Meta tags are small snippets of HTML code that you can add to your web pages. They are entirely optional, invisible to human visitors, and usually don’t affect how a site looks or behaves.
So, why are they so important for SEO and social media?
These tags provide search engines, social media platforms, browsers, and other systems with information about web pages so they can better understand them. This information could be a description of a web page (for search engines and users), whether the page contains adult content, which image to use when someone shares the page on LinkedIn, and so on (I’ll cover them in detail in the following sections).
Although search engines and social media platforms aren’t obliged to act on meta tags, they often do so because it helps them deliver a better experience to their own users.
To that end, providing meta tags can strongly influence how these platforms present your website content.
This impacts your organic social and search traffic levels, in turn affecting the number of website conversions you generate. In short, meta tags could even determine whether your site achieves its business goals.
Not too bad for something your visitors won’t even see!
How meta tags are structured
Usually, meta tags consist of:
the <meta> HTML element
an attribute specifying the name of the tag
an attribute specifying the content of the tag
For example, the meta description (which search engines often use in search result listings) for classifieds website Craigslist looks like this:
<meta name="description" content="craigslist provides local classifieds and forums for jobs, housing, for sale, services, local community, and events">
Although the name attribute usually comes before the content attribute, the order of the attributes doesn’t actually matter.
Sometimes, though, you’ll see a meta tag with a property attribute rather than a name attribute. That’s the case with Open Graph tags—tags that help social media platforms, such as Facebook, understand and display your content. Take a look at the Open Graph description tag for Craigslist; you can see how similar it is to the meta description (which is its equivalent tag for search engines):
<meta property="og:description" content="craigslist provides local classifieds and forums for jobs, housing, for sale, services, local community, and events">Where to add your meta tags
You should place your meta tags in the head of the page (rather than body)—in other words, between the opening <head> and closing </head> tags.
While the current HTML spec says that meta tags can go in the body in certain circumstances (and some search engines and browsers may be able to cope with that), the head of the page is still the safest place to put them.
How to check your meta tags
The most reliable way to check your meta tags is in the page source—the code that makes up the web page. You don’t need to be able to read code to find your tags, either. Here’s how to do it:
In Chrome, right-click and select View page source (or hit Ctrl+U). The page source will open in a new browser tab.
Hit Ctrl+F to bring up the search menu.
Enter “<meta” to highlight all the meta tags. That opening bracket stops the browser from including any other instances of the word “meta” in the page source.
Since meta tags go in the <head> of the page, they should all appear towards the top of the page source.
If you aren’t confident navigating your page source, you can use a free SEO tool, such as SEOmator’s Meta Tag Checker, instead. When you enter your page URL, the tool returns a table of meta tags along with their content values:
The downside of using a third-party tool is that you can’t be certain it is showing you every tag. For example, the Seomator tool doesn’t list Open Graph tags, perhaps because they are structured slightly differently.
Are all meta tags <meta> tags?
Meta tags use the <meta> HTML element. But, as with every good rule, there’s an exception: the title tag. This uses the <title> element instead of <meta>, but is considered an honorary meta tag. You’ll often see it referred to as the ‘meta title tag,’ or just ‘meta title.’
Your web page might contain lots of other pieces of metadata that aren’t generally considered as meta tags. From an SEO perspective, these include:
The canonical tag (or "rel canonical") — When you have duplicate content, this tells search engines which version is the original.
Schema markup — These tags provides additional information about specific types of content. For example, a recipe page could have ingredients, instructions, cooking time, and lots of other relevant properties. Because this information follows a standardized format, it's called ‘structured data.’
Now let’s dive in and look at the most important meta tags in all the key areas: SEO, social media, verification, and web design.
Meta tags for SEO
In this section I’ll cover tags that influence how search engines either understand your site or present it in their search results.
For your reference, Google has published a full list of the meta tags and attributes it supports.
‘Meta title’ (title tag)
We’ve already seen that the so-called meta title is an exception because it uses the <title> tag rather than <meta>. Here’s another point of difference: it’s one of the few meta tags your site visitors may actually see. It appears in their browser tab (though they may have to hover over the tab to see the full text).
More importantly perhaps, the meta title can affect how a page appears in search results. Search engines will often choose to use the meta title as the title link (the clickable blue link) of the individual search listing:
I say that search engines often choose the meta title for the title link because Google has a history of rewriting search result titles—basing them on the <H1> (main heading), for example, rather than the meta title. And that’s actually the case with the Porsche example above: the meta title is “Used Petrol Porsche 911 Coupe 992 Carrera 4 GTS Cars For Sale | AutoTrader UK,” but Google has chosen to use the shorter H1 instead.
Nevertheless, the meta title remains an important part of optimizing your page for search and can greatly affect click-through rates from search results pages.
Meta description
The meta description is a short summary of your page. Like the meta title, Google and other search engines may choose to display it in search results:
“We may also use descriptive information in the meta description element when it describes the page better than other parts of the content.”— Google
That’s why it’s important to write strong meta descriptions. Much of the time, however, Google will choose to rewrite the description.
Meta robots
Before search engines can include a page in their search results, they must first discover and crawl it (i.e., read the content). To do this, they use programs referred to as ‘bots,’ ‘spiders,’ or ‘crawlers.’ These bots also follow links on pages to discover and perhaps add new pages to their search index.
The meta robots tag is your way to tell these bots how you want them to behave.
Let’s say you want to tell all bots that they are welcome to index your page and follow the links on it. You would use:
<meta name="robots" content="index, follow">You can also give instructions to a specific bot (if you know its name value). Here’s how you’d tell the Google News bot not to index your page or follow the links:
<meta name="googlebot-news" content="noindex, nofollow">The meta robots tag is what’s known as a ‘directive,’ so it carries more weight than a mere suggestion.
The meta robots tag isn’t the only way to give instructions to bots—there’s also a dedicated text file called robots.txt. While the meta tag only applies to the page it is on, the robots.txt file can include rules that affect groups of pages, or even the site as a whole, making it invaluable for managing SEO on larger sites.
Meta rating
The meta rating tag is another tag Google supports. It usually looks like this:
<meta name="rating" content="adult">And sometimes like this:
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA">
As Google says, the tag “labels a page as containing sexually-explicit adult content, to signal that it be filtered by SafeSearch results.”
This is only one of the signals that Google uses to identify adult content. Even if you don’t use the tag, your page might be filtered out by SafeSearch for other reasons.
Meta tags for social
Meta tags don’t just influence how your site appears in search results; they also influence how it appears on social media. They have a key role to play in social sharing: if someone shares a link to one of your pages on a social network, that network will display a preview (often called a ‘social preview’). Your meta tags determine which image and text get displayed as part of this preview.
In other words, they can give your content much more visual impact and increase the amount of traffic and conversions you get from social platforms.
Open Graph tags
Facebook created the Open Graph protocol, which introduced a set of social media-focused meta tags called Open Graph tags, back in 2010.
Facebook’s parent company has since rebranded to Meta, but these aren’t exclusively Meta’s meta tags. Many other social platforms, including LinkedIn and X (formerly Twitter), now recognize them as well.
Open Graph has become the standard when it comes to meta tags for social.
With Open Graph tags, the ‘property’ attribute always has the prefix ‘og:’ (for Open Graph). For example, here’s the Open Graph title from my own website’s homepage:
<meta property="og:title" content="Technically Product | Digital marketing and web analytics" />An Open Graph title—don’t I already have a meta title? Yes, it’s common for sites to have both (and often with the same values). Remember: the tags we looked at earlier are for the benefit of search engines, whereas Open Graph tags are for the benefit of social media platforms. Here’s the page source of a Railway Gazette article showing both:
Most social previews consist of a title, image, and a snippet of descriptive text. These are pulled from the following three Open Graph tags:
og:title
og:image
og:description
The next most important Open Graph tag is og:url (LinkedIn says it “must exist” in your Open Graph implementation). This tag specifies the URL of the content, so it’s the Open Graph equivalent of the canonical tag.
X Cards
The social network X has its own meta tag called ‘card,’ which lets you specify the format of your social preview (not just the content). For example, you might want to use X’s ‘summary’ format, which looks like this:
Or perhaps your content is more suited to the ‘summary with large image’ format, which looks like this:
There are also card formats for app downloads and media players.
You can set your X card format using the content attribute of the card meta tag:
<meta name="twitter:card" content="summary_large_image"></meta>If you don’t have the card meta tag but do have Open Graph meta tags, X will default to the summary format.
How to validate your social meta tags
Most of the main social networks offer tools to let you check how your social preview will look. For example, Facebook has its Sharing Debugger and LinkedIn has its Post Inspector.
If you update your meta tags on a piece of content you’ve already published, you may need to prompt the social networks to refresh the data they hold—these tools provide a way to do this.
X takes a different approach. Although its Card Validator will tell you which card has been set for a particular page, it doesn’t offer a social preview. Instead, use the post composer to see how the content will be displayed (i.e., start writing a post that includes a link to your content and the preview will automatically appear).
Meta tags for verification
Some services use meta tags for verification: they give you a tag to add to the <head> of your homepage to prove you’re the site owner or manager. These tags don’t do anything, but removing them may break the verification and stop you from using the service.
Google site verification
Google Search Console, the search engine’s free SEO tool, provides plenty of ways to verify your site, one of which is the ‘Google site verification’ meta tag. It follows this format:
<meta name="google-site-verification" content="-6kT6VfEJjPOZTXou7R7L8fUZdmaIj1LHlFZwarfobI" />It appears when you choose the ‘HTML tag’ verification method for a ‘URL prefix’ (i.e., a single domain and protocol such as https://www.example.com):
The ‘content’ value is case-sensitive, so be sure to add the tag exactly as provided. It only needs to go in the head of your site homepage (not on every page).
Bing Webmaster Tools (Bing’s equivalent of Google Search Console) also lets you verify your site with a meta tag. In Bing’s case, the tag looks like this:
<meta name="msvalidate.01" content="BFE6BE570AAD3DC21047739584928B5B" />Meta tags for web design
Meta tags aren’t visible on your website, but they can still affect how your site displays to users. Here are two tags that play an important role in web design by providing browsers with data on how to present your site.
It’s unlikely you’ll ever add or edit these tags, but it’s still useful to understand what they do. At the very least, you’ll know not to remove them!
Meta viewport
Your website visitors may use all sorts of devices, from desktop PCs with ultrawide monitors to tablets and mobile phones. Mobile devices have smaller ‘viewports’—that is, the size of their browser window is smaller.
But, what if the device’s viewport is narrower than your website? Here, the viewport meta tag comes to the rescue, setting the width of the page to match the device’s screen width. In other words, it helps make your website properly responsive and readable on smaller devices. The viewport meta tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Meta charset
Charset is short for ‘character set,’ as it tells the browser which character set to use for the website.
Early character sets omitted many special characters and letters from non-English alphabets. Nowadays, 98% of web pages use a character set called UTF-8, which covers more than 100,000 different characters. The meta tag looks like this:
<meta charset="UTF-8">Yes, charset is an attribute rather than the name of a meta tag! Without this meta tag, browsers will do their best to figure out which character set to use—but it’s best not to risk it. The wrong character set can result in special characters displaying incorrectly, such as the ‘é’ in Beyoncé here:
How to add meta tags to your website
We’ve seen what meta tags are and what they do. But how do you add them to your site? That will depend on which platform or CMS you use.
Add meta tags directly to the page <head>
If you’re able to edit your page HTML, you can add meta tags directly to the <head> section. This is most relevant for small, hand-coded sites.
With Wix
If your site is built with Wix, there’s no need to grapple with a screen full of HTML source code. Instead, the platform gives you plenty of tools to manage your meta tags.
First, Wix sets up defaults for all the main meta tags, which you can then customize. Here’s how to find them:
In the Wix dashboard, go to Site & Mobile App > Website & SEO > SEO.
Click SEO Settings.
Select the page type you want to update meta tags for (if you only have one page type, click Edit Pages).
Click Basics & social share.
Let’s look at an example. The default title tag contains the page name, then a pipe character, then the site name, like this:
Having a default is great, because it means you don’t have to write a title tag every time you create a new page. From a branding perspective, it also helps you stay consistent across your site. But, if you don’t like the default, just change it. Swap the pipe out for a dash if you want. Remove the site name entirely—it’s up to you.
In addition to your meta title and description, you can also control your Open Graph and X card defaults here, then see a preview of your social preview (a pre-preview, if you like).
Defaults are a useful time-saver, but what if you want to do something different with a particular page? In that case, you can open up the page in the editor and manage your tags directly from there. Full instructions are available for websites built on Wix and Wix Studio.
With the Wix or Wix Studio Editors, your meta tags are divided into:
SEO basics — Your page’s title tag and meta description
Social sharing — Open Graph and X tags that determine your social preview
Advanced SEO — Your robots meta tag, more Open Graph tags, and any custom meta tags you want to add
Here’s another scenario: What if you need to manage your meta tags at scale (e.g., update multiple pages at once or get an overview of all your tags)? Wix has you covered here, too. Go back to Edit Pages (where you edited your meta tag defaults), then click on the Edit By Page tab.
This will show you a table of your pages along with key metadata, including title tag and meta description. This is particularly useful for identifying pages that are missing meta tags or tags that are identical to other pages. Each page with unique content should have its own unique tags to reflect that content.
If you need help coming up with unique titles and descriptions, you can use Wix’s AI meta tag creator to generate SEO-friendly suggestions based on your content.
Meta tags to avoid
You’ve seen that meta tags play a vital role in your site’s search and social presence. But there are some meta tags that you should avoid using, either because they have no benefit or could be harmful. Here are a couple not to waste your time on:
Meta keywords
The meta keywords tag looks like this:
<meta name="keywords" content="my keyword, another keyword">It was used as a ranking factor by early search engines, but was prone to abuse: people would stuff the meta keywords tag with terms that were completely unrelated to the site content.
Because of that, Google and other search engines stopped considering meta keywords for search ranking. This meta tag hasn’t been relevant since at least 2009, so don’t give it any thought.
Meta refresh
The meta refresh tag, as its name suggests, instructs the browser to refresh the page. It can also tell the browser to go to a different page when it refreshes—this is a so-called ‘meta fresh redirect.’ For example, I could add the following meta tag to the head of https://example.com/old-url:
<meta http-equiv="refresh" content="0; url=https://example.com/new-url">This would redirect the user to the new URL immediately (the “0” value in the content attribute means a wait of zero seconds).
Getting the browser to handle the redirect like this is called a ‘client-side redirect,’ as opposed to the more common ‘server-side redirect’ (where the redirecting page is never even loaded in the browser).
There are lots of downsides to using a meta refresh redirect. W3C, which develops standards for the web, has highlighted accessibility issues such as the browser’s ‘back’ button not working as expected after a redirect—especially in older browsers. Plus, it means you can’t delete the original page without also deleting the redirect.
From an SEO point of view, Google says “meta refresh redirects may be a viable alternative … if server-side redirects aren't possible to implement on your platform.” Fortunately, most modern platforms allow you to add server-side redirects. For example, Wix has a dedicated URL Redirect Manager tool to achieve this. So, the meta refresh tag is another one to avoid.
Audit and implement meta tags for a stronger digital presence
Since meta tags are so important, you should have a plan for managing them. Sometimes, adding a tag is a one-off job: the Google site verification tag is a good example of that. Make sure you know how to add a tag to the head of your site homepage.
But more often, meta tags are directly related to the content creation process. Every new page or post will benefit from having its own hand-crafted meta title, meta description, and Open Graph tags. It makes sense for whoever is creating the content to also take ownership over the meta tags for that content.
A quick meta tag audit is a great place to start. Check your homepage and at least one page of each content type, then ask yourself the following questions:
What tags do I currently have on my site?
What do each of them do?
Are any of them no longer necessary?
Could I benefit from any other tags?
Does the meta tag content accurately reflect the page content?
How do my social previews look?
The answers to these questions will help you develop a simple and effective meta tag strategy, enabling you to make the most of meta tags for SEO, social media, and beyond.
James Clark is a web analyst from London, with a background in the publishing sector. When he isn't helping businesses with their analytics, he's usually writing how-to guides over on his website Technically Product.Twitter | Linkedin
Comments