If you have a blog or a website of your own and you want to draw global traffic into it, one of the important things to take care of is to optimize it for search engines/web searches. There are many factors impact the SEO of your website. One of the factors includes Meta tags or webpage metadata. There are two important Meta Tags and they are the meta description and meta keyword tags. Today, you’ll be able to know what are Meta tags and its importance in SEO. I will also explore how to add relevant meta information to web pages for better SEO.
Meta tags (Webpage Metadata)
Meta tags or metadata is the additional information that you embed within your web page that helps you to describe the contents of your page. The metadata is used by search engines to show your content on the search results page, Generally, we insert meta tags or metadata in a web page using the <meta> tag within the <head> section. The Meta tag can have several attributes; some are predefined while others are custom.
Meta tags in SEO
Now you have little idea about What are meta tags, and now after using meta tags in your article will give you the result. Let’s go into detail, If a particular webpage of your website is indexed by any search engine, but (Google, Bing, Yahoo, etc.), then your web page becomes eligible to be listed in the search results. The meta tags helps to determine how the webpage is displayed in search results page. Using the right meta tags in the right places can help you to increase more visitors from search engines over time. Eventually, it will have a positive impact on SEO. Following are some of the important meta tags that impact your webpage is listed in the search results.
Meta title determines what title will be displayed on the search results page for a particular indexed webpage of your website. It also corresponds to the text that you see in the browser’s title bar when you open the webpage from the search results. The meta title should be able to convey the subject of your article and contain possible search keywords so that users will be able to find your page when they search for any topic related to your article.
<title>Up to 70 Characters of Keyword-relevant text here</title>
The title in the search results listing is followed by a text containing not more than 160 characters. The text can be used for giving a short description of your post. The meta-description tag is used to define it. It is one of the key elements of a search result listing that determines how many users will click through to read your post. You need to use your own creative skills to write a suitable description that matches users’ search query and also intuitive enough to let them select your page over others from the search engine results page. If your post is able to draw more visitors, it will eventually have a good impact on SEO.
<meta name=”description” content=”155 characters of message matching text with a call to action goes here”>
This is an optional meta tag containing a list of potential keywords. The keywords are not visible to users but it helps search robots to match them with the keywords entered in the search queries. In the early SEO days, web developers used to put a lot of keywords in order to gain positive SEO. Things have changed nowadays. Google doesn’t look for the keywords tag in a page any more; and other search engines give them little or no importance to them. So, you wouldn’t want to spend a lot of time looking for the right keywords and putting them in the keywords meta tag. Meta title and description are considered more important.
If you post news related articles on your blog, you can use the news meta tag to specify relevant keywords to search bots. This helps Google to classify your web pages and determines how your articles are listed in the search results for specific news related queries. The news meta tag is specific to Google.
This tag can also be used to convey further information about the subject of your articles more specifically. This helps Google to list your page for relevant search queries and avoid any disambiguation caused due to similar news events.
The robots meta tag is used to give instructions to the search engine robots on how to crawl a particular web page. This meta tag has a lot of attributes to define the search engine’s crawling behavior The attributes may be specified in a single meta tag separated with commas, or in separate robots tags. You can also use specific names to provide crawling instructions to specific search engines. For example, you can use <META NAME=”GOOGLEBOT”> to define instructions specific to Google search robots. The CONTENT value defines the various attributes. Some of the attributes of the “Robots”meta tag is as follows:
NOINDEX: The NOINDEX attribute instructs search bots not to index particular web pages. You can use this value to disable indexing for webpages that do not contain information useful for organic visitors.
NOFOLLOW: This attribute prevents search bots to follow through into any other link present in a particular webpage. Search robots won’t be able to crawl beyond such pages.
NOARCHIVE: A page having the NOARCHIVE attribute in the robots meta tag prevents a cached copy of the page from being available in the search results.
NOSNIPPET: This attribute hides the description of the particular page and also prevents caching.
NOODP: Prevents the Open Directory Project description from being shown in the description part of the search results.
NONE: Disables crawling for the web page; equivalent to NOINDEX, NOFOLLOW.
The amount of useful information available on your website also affects SEO. Your website should provide clear, information rich content that is helpful for the users.
If search queries return web pages with less useful information, it will have a negative impact on SEO. The robots meta tag with the no-index attribute instructs search engine crawlers not to index particular pages of your website. The tag can be added to web pages which provide less valuable information and prevent them to appear on the results page. But also take care that you don’t add this tag to a web page that contains important information and links, because crawlers won’t be able to navigate to any of the web pages present linked with these pages.
Social Meta Tags
Social Media is obviously a great place for content search, but often times the metadata created for Search is not sufficient to encourage people to click through So its better to use the meta tags for each social platform provides. These meta tags are not about keyword stuffing at all, but rather grabbing people’s attention and getting them to click. We all know that the users of Google+ are primarily tech people, users on Facebook are busy with entertainment and Twitter users are bombarded with timelines moving at the speed of thought. Let’s talk about the channel-specific metadata options.
Facebook’s OpenGraph allows you to specify metadata to optimize how your content appears in a user’s timeline. The added benefit of using this data is that by creating an “Edge” in Facebook you can obtain some fantastic data about the users checking out your content via Facebook Insights. If you don’t use Open Graph tags Facebook will default to standard metadata.
- og:title –This is the title of the piece of content. You should use this as a headline that will appeal to the Facebook audience. It is completely ok to use a different title than the one on the actual site as long as the message is ultimately the same. You have 95 characters to work with.Format:
<meta property=”og:title” content=”A Diary for Geeks”/>
- og:type – This is the type of object your piece of content is. For your purposes, it will usually be blogged, website or article, but if you want to get fancy Facebook provides a complete list.Format:
<meta property=”og:type” content=”article”/>
og:image –This is the image that Facebook will show in the screenshot of the content. Be sure to specify a square image to ensure the best visibility in a user’s timeline. If you don’t specify an image at all you are left to the mercy of the user to pick which image represents your content based on what Facebook can scrape. That is typically not the way to ensure the best first impression.Format:
<meta property=”og:image” content=”http://www.swiftbud.com/some-thumbnail.jpg”/>
og:url– This is simply the URL of the page (or edge). You should specify this, especially if you have duplicate content issues to make sure the value of the edge in Facebook is consolidated into one URL.Format:
<meta property=”og:url” content=”http://www.swiftbud.com”/>
og:description –This is the description Facebook will show in the screenshot of the piece of content. Just like the standard meta description it should be catchy and contain a call to action, but in this case you have nearly twice the number of characters to work with. Make sure this too speaks to the Facebook audience. You have to 297 characters to make it happen.Format:
<meta property=”og:description” content=”Stop hitting refresh on your ex-girlfriend’s Facebook page? You should check out the Swift Bud blog and learn something instead”/>
- fb:admins – This meta tag is critical for getting access to the wealth of data made available via Facebook Insights. You simply have to specify the Facebook User IDs in the metadata of those users you want to have access. For more information on Facebook Insights see the documentation.
<meta property=”fb:admins” content=”USER_ID”/>
Due to its overwhelming adoption, the other social networks will all defaults to Open Graph Meta tags if there are no other meta tags present. However, as I mentioned earlier in this discussion, to only prepare one set of metadata is to ignore the ability to speak to the different people in the different channels. Understanding that Google+ is mostly tech users, Facebook’s audience is far more varied and Twitter’s audience is often dealing with content flying by at the speed of thought – why not account for that with your metadata?
For more information, see the Open Graph Protocol documentation.
Twitter Cards are simply Twitter’s answer to the Open Graph Protocol and you might have noticed them in the wild, but here’s a screenshot from Twitter’s documentation.
The added benefit is making your content stand out in the otherwise chaotic Twitter timeline and ultimately bringing back more people. Also, it has long been thought that many users will retweet an article without actually reading it, using Twitter Cards as advertisements will help facilitate resharing of content as well. Most of these tags mirror what you’ve just read about Facebook Open Graph so I’ll be brief.
- twitter:card– This is the card type. Your options are summary, photo or player. Twitter will default to “summary” if it is not specified.Format:
<meta name=”twitter:card” content=”summary”>
- twitter:url– This is the URL of the content.Format:
<meta name=”twitter:url” content=”http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html”>
- twitter:title–This is the title of the content to be shared and should be limited to 70 characters after which Twitter will truncate. Again, go for headlines instead of keywords.Format:
<meta name=”twitter:title” content=”Parade of Fans for Houston’s Funeral”>
- twitter:description– This is the description of the content to be shared and should be limited to 200 characters after which Twitter will truncate. Again, go for engaging text, you have more opportunity here than the actual tweet does.Format:
<meta name=”twitter:description” content=”NEWARK – The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.”>
- twitter:image – This is the image that will be displayed on the Twitter Card and it should be a square image no smaller than 60×60 pixels.
<meta name=”twitter:image” content=”http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg”>
There are more optional twitter card meta tags such as site and creator which specify the twitter handles of the site and the author of responsible for the content, but they are not required for the content to make a good first impression so I have omitted them. For more information see the Twitter Card documentation.
Schema.Org (for Google+)
Until recently, I hadn’t realized that while Google+ will default to standard metadata or Facebook Open Graph tags, the platform also gives webmasters the ability to specify metadata specifically for Google+ using Schema.org. The beauty of it is since it’s Schema.org you can use it on nearly any HTML tag on content that is already on the page.
- Itemscope=”[pageType]“ – where [pageType]is Article, Blog, Book, Event, LocalBusiness, Organization, Person, Product or Review.
- itemprop=”name”– This acts as the title attribute of the rich snippet and should be limited to 140 characters.
- itemprop=”description”– This is the description of the rich snippet and should be limited to 185 characters
- itemprop=”image” This is the image of the rich snippet with an optimal size is 180 x 120. Google+ will shrink this image, but if it is too small it will not be displayed.
While all the other types of metadata go in the <head> section of the code, this code will potentially live in various places throughout the website. Here’s an example (from Google) of how it could be employed.
Google+ looks for metadata in the following order: Schema.org > Facebook OpenGraph > Standard Metadata > Best Guess from Scraping. See the Google+ Snippet Documentation for more information.
So, where’s the Meta Keywords?
I must admit that the discussion of meta keywords is a pet peeve of mine that I rank up there with people saying “SEO Optimization” or “ATM Machines,” but since it comes up so often with clients I figured that it’s worth mentioning here. The Meta Keywords is of no positive value to any major Search Engine especially not Google (check the link out, they said it officially in 2009). Bing uses them to determine if you are spamming or not, but beyond that the only reason a page should have meta keywords is if the internal search engine requires them. If that’s the case, however I would suggest you either consider a new Content Management System or lean on Google’s custom search, after all it’s free.
Sure rel-canonical is incredibly important, but is only needed when you have duplicate content issues or you’re looking to move the link equity from one page to another. Therefore, it’s not needed on every page on the web and if you’re a small part of the population that cares about Bing, they don’t really believe in it.
You may use Google’s Structured Data Testing Tool for checking your Schema.org data.
Adding Meta information in your WordPress site
Now you better know What are meta tags, and WordPress is a dynamic web platform, you can easily edit what metadata you might want to include for your website. You can add meta tags in individual posts or define meta tags for all the posts. This can be done in two ways.
By editing theme files
WordPress lets you add metadata information like title, description and keywords to your web pages by editing the header.php of your template. This ensures that the meta information is available across all the pages of your website. You can include variable fields like post-title in your meta tag attributes. You can edit your WordPress theme files by going to Dashboard >> Appearance >> Editor. Some WordPress themes have features to automatically generate meta tags. You can read more about adding metadata to your WordPress site here.
By adding Custom Fields
Some metadata may not be required across all the pages of your website. A good example of it is the robots meta tag. You can use this tag to disable indexing in specific webpages, and you may not need it to be there in all the pages. In such situations, you can add custom meta fields in specific webpages of your choice.
In the post editing page, scroll down until you find the Custom Fields section. If you don’t see it, go to Screen Options on the top of the screen and unhide it.
Adding Meta Tags via Custom Fields
* Enter the name of the meta tag (for example, “robots”) in the field called “Name”.
* Assign a value to the field (for example, “no-index”) by entering it in the “Value” field.
* Click on Add Custom Field button to save the information.
* The custom metadata is now added for the particular post.
Another way to insert meta tags in your webpages is to use plugins. Plugins let you to automatically generating meta title and description tags from the post title and an excerpt of your post content; or provide options to manually enter what meta tags to include. These plugins make use of the Custom Fields for inserting meta tags. It is better to manage meta tags manually via Custom Fields rather than using plugins for the same purpose. This is because plugins are considered bulky and may contain security issues.
Automatically generating meta information for your web pages may save your time, but for better optimization, you should manually edit meta title and description tags for each post. This ensures that your meta title and description can be tuned for making search results look more attractive and drive more organic traffic into your site. In the following articles in the series, we will explore more SEO concerns and how to tackle them. Stay tuned for more on Web Development.
Now you able to know what are meta tags. Consider using it in the right direction will help you to optimize your blog or website. So, tell me, what do you think about “what are the meta tags” that no page can live without meta tags?