ASP.NET 4.0 meta tags and Search engine optimisation
I am thinking to create a new series of posts regarding ASP.NET and SEO (Search Engine Optimisation).
I am going to start with this post , talking about some new features that make our asp.net apps more SEO friendly.
At the end of the day, there is no point having a great application and somehow "scare" the search engines away. This is going to be a short post so let's quickly have a look at meta keywords and ASP.NET 4.0.
Meta keywords and description are important elements of a page and make it search engine friendly. ASP.Net 4.0 added 2 new properties on the Page object to let us define the Meta Keywords and Description.
Create a simple asp.net application using Visual Studio 2010. In the Default.aspx.cs code behind file type:
Page.MetaKeywords = "asp.net,vb,c#,css,html,";
Page.MetaDescription = "This is my blog that focuses on ASP.NET.";
Alternatively we can add those two meta tags in the Page directive
<%@ Page Language="C#" MetaKeywords="asp.net,vb,c#,css,html" MetaDescription="This is my blog that focuses on ASP.NET." AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Run your application. Go to View->Source and see the meta tags
</title><meta name="description" content="This is my blog that focuses on ASP.NET." /><meta name="keywords" content="asp.net,vb,c#,css,html" /></head>
Now we can demonstrate the use of meta keywords in another example.
We will have a simple asp.net application where someone selects the categories from the dropdown list, and the relevant products appear in the Gridview control.
We will try to see how to make those dynamically created pages more SEO friendly.
I assume that you have access to a version of SQL Server and Northwind database.
If you do not, you can download and install the free SQL Server Express edition from here. If you need the installation scripts for the sample Northwind database, click here
1) Fire the VS 2010
2) Create a new website and use C# as the development language
3) Drag and drop a Gridview control from the Toolbox in the default.aspx page. Leave the default name.
4) Drag and drop a Dropdown control from the Toolbox in the default.aspx page. Leave the default name.
5) Drag and drop a SqlDataSource control from the Toolbox in the default.aspx page. Leave the the default name (SqlDataSource1).
6) Drag and drop a SqlDataSource control from the Toolbox in the default.aspx page. Leave the the default name (SqlDataSource2).
7) Configure the SqlDataSource2 control to use a connection string and open a connection string to the Northwind database.
The SQL statement should be "SELECT DISTINCT [CategoryName], [CategoryID] FROM [Categories]"
8) For the Dropdownlist1 control, set the datasource to the SqlDataSource2 and enable the AutoPostBack
9) Configure the SqlDataSource1 control to use a connection string and open a connection string to the Northwind database.
The SQL Statement should be something like this "SELECT CategoryID, ProductName FROM Products WHERE (CategoryID = @categoryid)"
Naturally we have a parameter, the categoryid is passed to the above query from the dropdownlist control.
10) For the GridView1 control, set the datasource to the SqlDataSource1.
11) In the Page_Load event method type the following
protected void Page_Load(object sender, EventArgs e)
{
string myvalue = Convert.ToString(DropDownList1.SelectedItem);
switch (myvalue)
{
case "Beverages":
Page.MetaDescription = "display products that belong to beverages";
Page.MetaKeywords = "beverages,refreshements";
break;
case "Condiments":
Page.MetaDescription = "display products that belong to condiments";
Page.MetaKeywords = "condiments";
break;
case "Confections":
Page.MetaDescription = "display products that belong to confections";
Page.MetaKeywords = "confections";
break;
case "Dairy Products":
Page.MetaDescription = "display products that belong to dairy products";
Page.MetaKeywords = "dairy products";
break;
case "Grains/Cereals":
Page.MetaDescription = "display products that belong to grains/cereals";
Page.MetaKeywords = "grains";
break;
case "Meat/Poultry":
Page.MetaDescription = "display products that belong to meat/poultry";
Page.MetaKeywords = "meat/poultry";
break;
case "Produce":
Page.MetaDescription = "display products that belong to produce";
Page.MetaKeywords = "produce";
break;
case "Seafood":
Page.MetaDescription = "display products that belong to seafood";
Page.MetaKeywords = "seafood";
break;
default:
Page.MetaDescription = "Welcome to our products sites";
Page.MetaKeywords = "beverages,condiments,seafood";
break;
}
You can see what I am doing here. I just find the selected value that the user selected and display the relevant meta keywords that I want.
12) Run your application and make sure everything works ok. Then go to your browser window and select View->Source and see the meta keywords for all the various selections of categories you make.
Leave a comment with your email of you need the source code.
Hope it helps!!!