Summary

This article discusses adding <meta> tags programmatically into the <head> section of an HTML page via ASP.NET. Two classes in the .Net Framework – HtmlHead and HtmlMeta – are discussed.

HtmlHead and HtmlMeta

In order to add the meta tags from ASP.NET, you would need these two classes: HtmlHead and HtmlMeta. The HtmlHead represents the <head> element in an HTML page. And you can create new HTML meta element using the HtmlMeta class. Once a new object of HtmlMeta class is ready, it can be added to the <head> (as represented by HtmlHead) using Controls.Add method.

Figure 1. Relationship between HtmlHead and HtmlMeta

The Namespace

Both these classes (HtmlHead and HtmlMeta) are in the HtmlControls namespace. This is the namespace where all the basic HTML controls like HtmlAnchor, HtmlButton, etc. live.

Add the following namespace if it’s not already there:

using System.Web.UI.HtmlControls;

Obtaining the page header

The reference to <head> of the current page is readily available from Page.Header on the current page. That object is of type HtmlHead.

Adding Meta tag information in the declarative format

You might want to add declaratively some meta tags that won’t change from page to page. You can add these meta tags from the source window of the .aspx page. If you have one or more Master Pages (.master), these meta tags can be added to the master pages so that the pages derived from them can inherit these meta elements.

If your .aspx page is derived from a master page, it won’t have the <head> section. In that case, you would be able to add the meta tags that are specific to the derived page programmatically.

The most common meta tag that you would want in all the pages is the Content-Type. As shown in the code listing below, this is defined with the attributes http-equiv and content.

You might want to use constant Author information as well unless you have a different specific author for each of the pages. This meta tag is not as important as Content-Type or Description.

Code Listing 1. Adding meta tag to the ASP.NET source page (.aspx) in the declarative format

<head runat="server">
    <title>Title of the Page</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="yoursite or yourteam" />
</head>

Adding Meta tag information programmatically

The above section uses the actual <meta> tag in the <head> section of the .aspx or .master pages. This section shows how to dynamically add meta tags.

Creating a meta tag with name and content

For most of the dynamically generated meta tags, you would use the name and content attributes. For example, you would generate meta tags like the following:

The following code listing provides a quick way to achieve that.

Code Listing 2. Creating new meta tag and adding it to the <head>

/// <summary>
/// Adds a meta tag to the HTML head.
/// </summary>
/// <param name="head">The head HTML element of the current page</param>
/// <param name="name">Value for the name attribute of meta element</param>
/// <param name="content">Value for the content attribute of meta element</param>
public static void Add (HtmlHead head, string name, string content)
{
    // Prepare the meta tag
    HtmlMeta metaTag = new HtmlMeta();
    metaTag.Name = name;
    metaTag.Content = content;

    // Add the meta tag to the head
    head.Controls.Add(metaTag);
}

Code Discussion

public static void Add (HtmlHead head, string name, string content)

This method is in a separate .cs code file for a utility class – it is not in the code-behind file for the .aspx file. This makes it easy to call this method from multiple .aspx.cs files.

Here the reference to <head> of the current page is passed to this method via head parameter (of type HtmlHead). Again, since this method is not in the .aspx.cs file, this method would not have direct access to the <head> section of the .aspx file. If this method is placed in the code-behind file, this <head> can be obtained via Page.Header.

Two parameters name and content contain the values for the attributes name and content of the meta element that we are going to generate.

    // Prepare the meta tag
    HtmlMeta metaTag = new HtmlMeta();
    metaTag.Name = name;
    metaTag.Content = content;

First step is to make the meta tag with an object of type HtmlMeta. Values of Name and Content properties are set with the passed name and content. The HtmlMeta class also has other properties HttpEquiv and Scheme, if you require a meta tag with those attributes.

// Add the meta tag to the head
head.Controls.Add(metaTag);

And finally, add the HtmlMeta control you have just made to the passed HtmlHead object.

Making methods for adding description and keywords

It is more than likely that you would be consistently adding Description and Keywords meta tags to all the pages. The following methods make that even simpler.

The method below – AddDescription – takes the <head> of the current page and the content for the description and calls the above Add method.

Code Listing 3. Adding a description meta tag

/// <summary>
/// Adds Description Meta Tag.
/// </summary>
/// <param name="head">Value for the name attribute of meta element</param>
/// <param name="content">Value for the content attribute (name would be Description)</param>
public static void AddDescription(HtmlHead head, string content)
{
Add(head, "Description", content);
}

Similarly the AddKeywords method takes a string of keywords and the head of the page and generates a meta tag.

Code Listing 4. Adding Keyword meta tag

/// <summary>
/// Adds Keyword Meta Tag.
/// </summary>
/// <param name="head">Value for the name attribute of meta element</param>
/// <param name="content">Value for the content attribute (name would be Keywords)</param>
public static void AddKeywords(HtmlHead head, string content)
{
Add(head, "Keywords", content);
}

And finally, you can add the two lines shown below (with AddDescription and AddKeywords) to every page (.aspx.cs) and they would generate the meta tags for description and keywords.

In the code below, MetaTags is custom static class where the Add, AddDescription, and AddKeywords methods reside. These are made static so that the Add* methods can be called without creating an object of MetaTags class.

Code Listing 4. Calling the description and keywords methods

// Add Meta Tags
MetaTags.AddDescription(Page.Header, "This is the description.");
MetaTags.AddKeywords(Page.Header, "keyword1, keyword2");

Articles on Meta Tags

Using meta tags in HTML

Use of Meta tags on popular sites

Adding Meta tags programmatically