A few tiny words can totally change how many people are seeing your website. How? It’s all through the power of meta tags. And we’re spilling all the secrets about them right now! In this post, I’ll explain what meta tags are, how they help your site’s search engine and social media visibility, and how to implement them on your web pages.
Meta Tags are tags that are placed inside the <head> section of a webpage. They have always been important in search optimization — especially back in the days when we had to use 5+ search engines to get any good results. Are you old enough to remember Lycos, AltaVista and Excite? Even though Lycos’ days are over, meta tags remain a key tool for driving search engine traffic. Both search engines and social media sites use meta tags to tell them what to display in search results or when sharing a post, defining things like images, share language, and titles.
In this post, I’ll start by telling you what essential meta tags you will need for modern search engine optimization. Then, since it’s 2015 and social is now the #1 source of referral traffic to content on the web, I’ll explain how to use meta tags for social media.
Search Engine Meta Tags: The Basics
Search engines like Google and Bing rely on meta tags related to the description and the title of the page. The search engines use <title> and meta description tags to determine what to show a user in its search results.
A recent study by Raventools.com found that out of 200 million page crawls conducted from February 2013 to June 2015, 34% of pages were missing meta descriptions. Meta descriptions are short, helpful summaries of your page’s content that show up in search results under a result title. Just adding a meta description could significantly boost your site’s search ranking.
Here’s an example of what those tags could look like:
<title>Page Title. Maximum length 60-70 characters</title>
<meta name=”description” content=”Page description. Between 50-155 characters.” />
If your site uses multiple possible URLs for the same page, there’s a chance that could hurt your site’s page ranking, since links pointing to each of these separate URLs would divide up the value of inbound links. You can prevent this problem by using canonical links. A canonical link (<link rel=”canonical”>) is a meta tag that prevents duplicate content issues by specifying the “canonical” or “preferred” URL for a web page in the context of search engine optimization. Here’s an example:
<link rel=”canonical” href=”http://www.zsl.org/science/news/crisis-in-global-oceans-as-populations-of-marine-species-halve-since-1970″>
Using the canonical link helps to boost your page’s ranking by merging all the links going to different versions of the page and preventing those pages from dividing up the value of inbound links. If you have two links–www.shareprogress.org and shareprogress.org, for example–that point to the same page, they are considered by search engines to be two different pages. If you add a canonical link to the <head> section of the page it’ll tell the search engine that it is actually just one page. If you’d like to learn more, Moz has a great intro article to canonicalization.
There are a ton of other meta tags that different search engines and other sites use, but these three are the most essential for search optimization.
Social Media Sharing Meta Tags
If you’d like to optimize how your site looks when a user shares it on Facebook, you definitely want to make sure that you’ve got the following 6 meta tags in the <head> section of your site:
<meta property=”og:url” content=”http://www.zsl.org/science/news/crisis-in-global-oceans-as-populations-of-marine-species-halve-since-1970″>
<meta property=”og:type” content=”article”>
<meta property=”og:site_name” content=”Zoological Society of London (ZSL)”>
<meta property=”og:description” content=”Research by ZSL and WWF has revealed populations of fish critical to human food security are in potentially catastrophic decline.”>
<meta property=”og:title” content=”Crisis in global oceans as populations of marine species halve since 1970″>
<meta property=”og:image” content=”http://www.zsl.org/sites/default/files/media/2015-09/WWF-fish-and-corals.jpg”>
These 6 meta tags use a property that usually starts with “og” — which stands for the Original Gangst….. errr…. ‘Open Graph’. Open Graph is a standard/protocol for sharing web pages on sites like Facebook, Google+, and other networks.
Mind over meta-tags
The meanings of those meta tags:
- The obvious ones: og:title and og:description are the title and description for the page
og:image This is the image that will be used to illustrate your webpage or content. Be sure to upload and link to an image that is 1200 x 630 pixels for the best display on high resolution devices. - og:url is equivalent to the <link rel=”canonical”> tag and tells Facebook where to look for all the meta tags for the post, which may not be on the same page.
- og: type can be article, website, and many other types. You can find a full list in the Open Graph Reference Document. Most nonprofits and campaigns will only be using the article or website types.
- og: site_name is the name of your overall website (not the article/blog post title).
Here’s an example of how a site that contains all the tags looks when it’s shared on a Facebook timeline. Notice how large the image looks!
You can check how your Facebook share image and content will look with the Facebook Debugger Tool.
Twitter Card Meta Tags
On Twitter, when people post links to articles or websites they can also view a “summary card” of the content that’s on that page. This helps readers decide whether they want to click through to read the entire article.
Below is an example of what a card looks like on my own feed:
As you can see, my actual tweet share text is above the summary card with the large image. When someone sees my tweet in their Twitter feed, they’ll see the large image of fish swimming amongst coral reef with the title and description below the image.
The Twitter card makes the tweet more understandable by adding a summary of the content that is linked to. It also makes the content/article more enticing because of the large graphic and description of what I can learn. As a consumer of social media information, I can then decide to click on the card and read the full article.
Twitter cards are created through meta tags. If you’re lazy, you can rely on your Open Graph tags to generate the card. However, if you want to do some targeting based on platform, it’s good to add Twitter meta tags. You can vary how your Twitter card and your Facebook share appear, which can come in handy if you’re targeting different readers on Facebook than you are on Twitter.
Here are the 6 Twitter meta tags with Twitter name attributes that you’ll need to add to your site:
<meta name=”twitter:site” content=”@officialzsl”>
<meta name=”twitter:url” content=”http://www.zsl.org/”>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:image” content=”http://www.zsl.org/sites/default/files/media/2015-09/WWF-fish-and-corals.jpg”>
<meta name=”twitter:title” content=”Crisis in global oceans as populations of marine species halve since 1970″>
<meta name=”twitter:description” content=”Research by ZSL and WWF has revealed populations of fish critical to human food security are in potentially catastrophic decline.”>
Important Note: These meta tags only populate the summary card, not the actual text of a tweet.
You can check how your summary card looks by going to the Twitter Card Validator.
ShareProgress Meta Tags
If you use the ShareProgress platform, you should also know about ShareProgress’ specific meta tags!
Facebook share text is automatically set based on any Open Graph tags on the page, but for Twitter and email share text, you can improve the sharing experience with the following tags:
<meta name=”sp:twitter” content=”TWEET TEXT: {LINK}” />
<meta name=”sp:email_subject” content=”EMAIL SUBJECT LINE” />
<meta name=”sp:email_body” content=”Email body goes here {LINK}” />
Previously, we showed you what the Twitter summary card would look like and the Twitter-specific meta tags that create the card content. However, none of those meta tags will populate the share text field or the tweet itself. That’s where ShareProgress’ meta tag for twitter fits in. The meta tag with name “sp:twitter” will populate the tweet with the text you want shared as well as a link to the page if you add in ‘{LINK}’.
If you want to pre-populate the content for when your supporters email a webpage to friends, you can use the “sp:email_subject” and “sp:email_body” meta tags to populate the subject line and the body of the email.
Onward, Towards More Referral Traffic!
You are probably spending a lot of time producing good and interesting content, and it would be sad if only a trickle of people were reading it. Creating good meta tags can make the difference between a few friends checking it out and tons of visitors coming in from search results and social media sharing. Now that you are a master in meta tags, you’d better prepare your servers to handle the influx of traffic to your site!
Do you have any tips, tricks, or questions? Let us know in the comments.
Comments