ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design
dynamic > static

How To Dynamically Add Meta Data To Your ASP.NET Pages

Written by
Published on
Modified on
Filed under
How To Dynamically Add Meta Data To Your ASP.NET Pages

Meta descriptions and keywords help search engines figure out what your web pages are about. And while it is highly contended as to whether this does in fact help your website appear more often in search results, it's better to just have your data as parser friendly as possible. This is just one of the things that Google and other search engines use in order to create your web pages search result descriptions. The little small snippet that appears under your sites link. That one. And unless you want your site to appear like the following:

Then you need to give search engines all the help you can give. There's a number of ways to set up your metadata in your ASP.NET pages. You can set them manually yourself in the <head> tag. The easiest way is of course to just add your tags directly to the page.

Ol' Fashion Way


<head>
     <meta name="description" content="some words here" />
     <meta name="keywords" content="word1, word2, word3" />
</head>

A few things to note when creating meta tags. Many search engines recommend not using the same text that you use in your title and also keeping the length at around 155 characters. It's always best to follow the most used conventions. It's something to note if your meta data is dynamically created.

Normally, 100% of all web pages aren't static anymore, on average, and having the same meta keywords and descriptions on every page isn't going to help your site win any usability awards any time soon. More often than not these will be set on the server side somewhere. Either stored in your database or calculated on the fly based on your pages content.

You can add as many different meta tags as you'd like in this method, and the content data can come from any source, such as a DB or calculated on the fly. Be aware though that there is nothing to stop this from adding multiple description or keywords. If you call SetupMeta() several times, then you'll get several of the same tags in place.

Add It Literally

With the Literal control you can pretty much insert any text that you want into your webpage. You can declare the object on page_load and add it to the Header objects Controls collection.


protected void Page_Load(object sender, EventArgs e)
{
     Literal litMeta = new Literal();
     litMeta.Text = "<meta name="description" content="your meta description" />
     Headers.Controls.Add(litMeta);
}

You can also use the AddAt method to specify where on your Header you would prefer to add the control.

HtmlMeta Class

Even easier than the Literal control, you can also just make use of what .NET has to offer us and use the HtmlMeta class. The class gives you programmatic access to your pages meta tags.


protected void Page_Load(object sender, EventArgs e)
{
     HtmlMeta meta = new HtmlMeta();
     meta.name = "description";
     meta.content = "your content goes here";

     Header.Controls.Add(meta);
}

Adding the controls dynamically like above does lead to some issues though. If you happen to have any dynamic code blocks in your head section, say for example:


<head>
<script>
function func1()
{
       alert('<%=DateTime.Now%>');
}
</script>
</head>

Then we can't dynamically modify the Header's controls collection without getting the following run time error.


We also have to make sure that we don't lose our data on post back. Not sure if search engines penalize for that scenario, but better safe than sorry. Because we're adding the controls dynamically in the page load event of the full page life cycle, setting the controls only on IsPostback == false will not add the contents to viewstate, and as such we'll lose our content on post back.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.

Comments

No messages posted yet

Developer Poll

Q:

Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks