Today we're going to look at a technique for dynamically inserting meta tags into your master pages. By taking control of the head tag and inserting your own HtmlMeta you can easily customise these tags.
You might have noticed that when you create a new master page in visual studio your <head> tag gets decorated with a runat="server" attribute.
Asp.net doesn't add this kind of decoration to any other html tags (although you are free to add it if you want). So what makes the head tag special?
By adding the runat="server" you're giving actually converting the control into a HtmlHead control. That doesn't particularly matter for this tutorial other than to note that given a reference to the head control you get all the extras that come with asp.net controls such as access to its controls collection.
Why would you bother?
Neither the page meta description or meta keywords tags will do much for your sites ranking so why would you take the time to do this?
Well Google has gone on record to say that the keywords tag is not taken into account when ranking your score. Honestly I don't think its worth the effort to add the keywords into sites any more. I have seen some people give the opinion that it future proofs your site and that if Google ever does implement it into the algorithm then you will be ready. That seems like a fairly weak premise to base your decision on.
The description tag on the hand can be valuable. Perhaps not for ranking well in the search engines directly but more for the social engineering aspect. When you have get your result to appear in the search engine the text displayed from your meta description could make the difference between somebody clicking your site or your competitors.
Introducing the HtmlMeta control
The HtmlMeta control lets us wrap up <meta> tags via asp.net code. To add a meta description we need to create an instance, set the name property, the content property, and then add it to the head:
HtmlMeta meta = new HtmlMeta(); meta.Name = "description"; meta.Content = "this is a meta description tag"; head.Controls.Add(meta);
Its the exact same code for the keywords tag - you just change the name.
Public Properties
Instead of copying this code in every time you want to add meta tags to your page you can wrap these two concepts up in public properties which are easy to set.
The code would go in the code-behind file for your master page and would look something like this:
public string MetaDescription
{
set
{
HtmlMeta meta = new HtmlMeta();
meta.Name = "description";
meta.Content = value;
head.Controls.Add(meta);
}
}
public string MetaKeywords
{
set
{
HtmlMeta meta = new HtmlMeta();
meta.Name = "keywords";
meta.Content = value;
head.Controls.Add(meta);
}
}
If you get red squigglies under the HtmlMeta in visual studio then you have probably just forgotten to include the System.Web.UI.HtmlControls namespace that it lives in:
using System.Web.UI.HtmlControls;
Further reading
7 comments :
A good Article
Thanks for the post. Developers will find this useful. Two points I would like to add:
1. The 'head' should be the id given to your head tag in the master page to add controls to it, since you will see runat="server" but no id attribute by default.
2. In case you would like to add meta tags/keyword in each of the web pages [whether using master page or not], you can simply do the same with a bit difference:
Header.Controls.Add(meta);
where Header is the HtmlHead control of the page, you won't need to change this.
Thank you.
Nice article. I've done it this way in the past, but found that it end up being more useful in your basepage. This way you don't have to copy and paste into the different master pages, or worry about pages without a master.
great !!!!, thanks
Good article.
I do the same thing with a different method, which I felt easy.
I add the ContentPlaceHolder in head tag. And I can add the title, keywords and description in each page individual page.
What is weak is basing your use of HTML on Google functionality. AOL was not the Internet, and neither is Google. Google doesn't use your client-script; Have you eradicated that from your code, too?
"I have seen some people give the opinion that it future proofs your site and that if Google ever does implement it into the algorithm then you will be ready. That seems like a fairly weak premise to base your decision on."
Anonymous; I am talking about Google because it is the leading search engine by a large factor. If your site doesn't pander to Googles requirements you wont get very far in SEO.
The techniques I have described are using server side code - there is no client side scripting listed in this article.
Post a Comment