Implementing ASP.NET 4.0 Page.MetaDescription Property

ASP.NET 4.0 offers the meta description property. It can help you tell searchers what they’ll find on your web pages, and possibly increase your traffic. This article shows you three ways to implement this property.

Before ASP.NET 4.0, you had to manually code your meta description tags. The meta description tag, though no longer used by major search engines in their ranking algorithm, is still an important factor for increasing website traffic. Bear in mind that searchers coming from search engines (such as Google) will only click on the results provided if the meta description is relevant to the query.

If you want to increase your organic traffic (traffic coming from search engines) then one thing that you can easily improve are the meta descriptions. In ASP.NET 4.0, this can be easily implemented using Page.MetaDescription property.

There are actually three basic ways to implement the meta description property in ASP.NET 4.0. The first and easiest way is to directly add your meta description to any dynamic page (.aspx), such as web forms, using the page directive method. The second way is to use the code behind to output the meta description. And the last way is to grab database content and use it for your meta descriptions.

Creating A Sample Website Project

To illustrate this new property in ASP.NET 4.0, let’s use a sample website project. Refer to the steps below:

1. Download this test website project: http://www.dotnetdevelopment.net/tutorials/metadescriptionproperty.zip

2. Extract the folder named “metadescriptionproperty.” Inside the folder are the ASP.NET files and sample database.

3. Copy the metadescriptionproperty folder to any of your ASP.NET project folder paths.

4. Launch Visual Web Developer Express 2010. (Version 2010 is required for ASP.NET 4.0).

5. Go to File –> Open Web Site.

6. Under the “Open Web Site” dialog, look for the metadescriptionproperty folder. Select and then open it.

7. In the Solution Explorer, double click “Default.aspx.”

8. Go to File –> View in Browser. You will see a table that lists the aircraft name and the link to its detailed pages. As an example, click the “Read Details” of the “A-10 Thunderbolt II” aircraft. The screen shot below shows how it looks in your browser. There should be no errors, and the images, content and the page title tag should be visible.

Adding Meta Descriptions Using the Page Directive

View the home page in the browser.  The home page is the Default.aspx. The URL should look like this: http://localhost:53113/metadescriptionproperty/Default.aspx

Right click on the page and view the page source. You will not yet see the meta description tag in the form of:

<meta name="description" content="Description of my page" />

Let’s try adding a meta description to this page using the page directive. Follow the steps below.

1. Go to Default.aspx source code in VWD Express 2010.

2. At the topmost part of the code is the page directive. It should look something like this:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

3. To add the meta description of the home page, use the “MetaDescription” property:

<%@ Page Language="VB" AutoEventWireup="false" MetaDescription="This is the complete list of military aircraft" CodeFile="Default.aspx.vb" Inherits="_Default" %>

4. Now save the changes and reload the Default.aspx home page. If you view the source of the page, you should now see the meta description tag in the head section. Here is an example:

<meta name="description" content="This is the complete list of military aircraft" />

5. Now try viewing any details for the aircraft by clicking its “Read Details” link. If you view the page source for the detailed aircraft page, you’ll see that it does not contain the meta description tag.

This implies that the page directive of implementing meta description is only applicable to a specific ASP.NET page (for example, Default.aspx, as shown above).

{mospagebreak title=Adding Meta Description Using Code Behind}

Alternatively, you can also use the code behind (in VB.NET or C#) to output the meta description.

1. First, remove the meta description property in the page directive:

MetaDescription="This is the complete list of military aircraft"

2. Go to the Design view in VWD Express 2010 for Default.aspx. You should see the SqlDataSource as well as the Gridview controls. See screen shot:

3. Double click the empty white region below the Gridview control to access the page’s page load event  in the code behind.

4. Add the meta description property definition in the page load event handler:

Page.MetaDescription = "This is the complete list of powerful military aircraft."

This is the final Default.aspx.vb code:

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

Page.MetaDescription = "This is the complete list of powerful military aircraft."

End Sub
End Class

5. Go to File –> Save all. Now go back to Default.aspx and go to File –> View in Browser. View the page source, and you should see the meta description tag output, such as:

<meta name="description" content="This is the complete list of powerful military aircraft." />

Grabbing Database Content as Meta Description

Let’s go back to the Details.aspx example. These are the detailed pages for each aircraft presented in the browser using a query string id, but using only one ASP.NET page template (Details.aspx). If you use the methods presented in the earlier sections to provide the meta description output for each aircraft’s details, you arrive at the same meta description for all aircraft pages. This is not appropriate. 

In this case, you should grab relevant database content and use it as the meta description for each aircraft page. As a result, each aircraft page will have its own unique and relevant meta description. To do this, view the database tables by going to Solution Explorer — > expanding App_data — > right click militaryaircraft.mdf to open it — > Expand “Tables” –> Right click on “aircrafttable” and click “Show Table Data.” This is how it looks:

So how are you going to formulate the meta descriptions for each aircraft page? One way is to retrieve all of the database content and concatenate them to form the meta description. For example, for the A-10 Thunderbolt II:

A-10 Thunderbolt II = Attack Aircraft used by United States Airforce.

Another example is for B-2 Spirit:

B-2 Spirit = Bombers used by United States Airforce.

To do this, refer to the steps below:

1. In Solution Explorer, expand Details.aspx and double click Details.aspx.vb.

2. There is already VB.NET code used to retrieve the name of the aircraft and use it in the title tag. Let’s modify this code to grab the other field names from the MS SQL server database.

3. Below is the final, revised code:

Imports System.Data.SqlClient
Partial Class Details
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim queryid As Integer
queryid = Request.QueryString("id")
Dim myCommand As SqlCommand = New SqlCommand()
myCommand.Connection = New SqlConnection("Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|militaryaircraft.mdf;Integrated Security=True;User Instance=True")

myCommand.Connection.Open()

‘Add to retrieve type and primary user aside from the name in the SQL query.

myCommand.CommandText = "SELECT name,type,primaryuser FROM aircrafttable WHERE aircraftid=" & queryid

Dim retrievevalue As SqlDataReader = myCommand.ExecuteReader()
While retrievevalue.Read()
Dim nameofaircraft As String = CStr(retrievevalue("name"))

‘Retrieve aircraft type from the database

Dim aircrafttype As String = CStr(retrievevalue("type"))

‘Retrieve the primary user of the aircraft

Dim aircraftuser As String = CStr(retrievevalue("primaryuser"))

‘Output title tag to the browser html code
titletag_output_from_VB.Text = nameofaircraft

 ‘Concatenate relevant database information to form the meta description text
 Dim metadescriptiontext = nameofaircraft + " = " + aircrafttype + " used by " + aircraftuser + "."

 ‘Finally output the meta description tag to the browser HTML
 Page.MetaDescription = metadescriptiontext
 
End While
retrievevalue.Close()
myCommand.Connection.Close()
End Sub
End Class

4. Save all changes, go back to Default.aspx, and then view the page in the browser. Click any details page — for example, for Mikoyan MiG-35. You will then see the meta description tag shown in the page source, such as the one shown below:

You can download the source code for the complete project here:

http://www.dotnetdevelopment.net/tutorials/metadescriptionproperty_implemented.zip

[gp-comments width="770" linklove="off" ]