By Jim Azar, 24 May 2007

Introduction

The Master Pages introduced in ASP.NET 2.0 are a great feature, however, they don't provide a good way to perform the most basic search engine optimization. If you want your web pages to be listed properly and ranked well in search engines, then you need to specify good titles and meta tag descriptions on each page. This article explains how to extend the @Page directive on your ASP.NET pages so that you can specify the meta tag description and meta tag keywords on each content page when using master pages.

Background

When optimizing your web pages for search engines, some of the most important elements on the page are the tag and the description meta tag. The <title> and meta tags are usually specified in the <head> section of the HTML on each page as seen in the example below from the <a href="http://www.rhinoback.com/" target="_blank">Rhinoback online backup site</a>: <div class="pre-action-link" id="premain0" style="display: block;" width="100%"> <img height="9" id="preimg0" preid="0" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="0">Copy Code</a></div> <div class="article-text"> <pre id="pre0" lang="html" style="margin-top: 0px;"><html xmlns="http://www.w3.org/1999/xhtml" > <head> <title> Rhinoback Professional Secure Online Backup Services for Small and Medium Business - SMB </title> <meta name="description" content="Professional Online Backup Services. Rhinoback provides robust backup functionality at affordable prices. Premium features, premium services, low prices. Get the most for your money with Rhinoback!" /> <meta name="keywords" content="backup, online backup, secure backup, cheap backup, free backup, offsite backup,internet backup, secure files, offsite data storage, privacy, security, features, low prices, premium service, remote backup" /> </head> <body>  </body> </html> </pre> </div> The text from the <title> tag is displayed at the top of most browsers. See the title of the Internet Explorer window in the example below: <a href="http://www.rhinoback.com/" target="_blank"><img alt="Sample of Rhinoback page with title tag" border="0" height="216" src="http://www.codeproject.com/KB/aspnet/PageTags/RhinobackPage.jpg" width="593" /> </a> The meta description text is displayed by the search engine when your page is listed. The example below is from a Google search. The text below the underlined title comes directly from the meta description tag. Without a meta description tag, your page may be listed with a description that was extracted from text found somewhere on the page. It is always better to specify the text for the description of each page rather than leave it up to a search engine robot. <a href="http://www.rhinoback.com/" target="_blank"><img border="0" height="91" lt="Sample of Rhinoback listing in Google" src="http://www.codeproject.com/KB/aspnet/PageTags/RhinobackGoogle.jpg" width="592" /> </a> Master Pages were introduced in ASP.NET 2.0 and have proven to be a valuable feature. This article does not attempt to explain the details of master pages or how to implement them, that is well covered in numerous other articles. When using master pages the <head> section is part of the master page and is automatically included on all of the content pages. Fortunately the developers at Microsoft included the Title attribute on the @Page directive that enables the developer to specify the title of the page on the content pages rather than on the master page. <div class="pre-action-link" id="premain1" style="display: block;" width="100%"> <img height="9" id="preimg1" preid="1" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="1">Copy Code</a></div> <div class="article-text"> <pre id="pre1" lang="html" style="margin-top: 0px;"><%@ Page Language="C#" MasterPageFile="~/PageTags.master" AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="home" Title="My home page title" %> </pre> </div> The @Page directive above is from a content page in an ASP.NET 2.0 website that uses a master page. As discussed above, you may need to specify some meta tags at the content page level rather than at the master page level. You may have discovered that the @Page directive does have a Description attribute, however, it does not create a meta description tag for your page. In fact, anything that you specify on the Description attribute is completely ignored and not used for anything. In my case, it was completely unacceptable to have the same description on all pages of my site. I also wanted to specify keywords for each page that may vary from page to page. My first cut at a solution to this problem involved using the code-behind to insert the desired meta tags onto each pages' <head> section as shown in the Page_Load method of a content page below: <h3 class="article-text"> C#</h3> <div class="pre-action-link" id="premain2" style="display: block;" width="100%"> <img height="9" id="preimg2" preid="2" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="2">Copy Code</a></div> <div class="article-text"> <pre id="pre2" lang="cs" style="margin-top: 0px;"> protected void Page_Load(object sender, EventArgs e) { HtmlMeta tag = new HtmlMeta(); tag.Name = "description"; tag.Content = "My description for this page"; Header.Controls.Add(tag); } </pre> </div> <h3 class="article-text"> VB</h3> <div class="pre-action-link" id="premain3" style="display: block;" width="100%"> <img height="9" id="preimg3" preid="3" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="3">Copy Code</a></div> <div class="article-text"> <pre id="pre3" lang="vb" style="margin-top: 0px;"> Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim tag As HtmlMeta = New HtmlMeta() tag.Name = "description" tag.Content = "My description for this page" Header.Controls.Add(tag) End Sub </pre> </div> The problem with this solution is that the title of the page, the meta description, and the content of a page are all related and I really want the title and description to be together and also in the same ASPX file as the content. The <code>Page_Load</code> method can easily be placed within <script> tags on the ASPX page, but I wanted to find a solution that was easier to maintain and would allow for quick and easy inspection of the tags on each page. The following solution meets my objectives by extending the @Page directive to include the meta tags that I want to specify for each page individually. <h2 class="article-text"> Solution</h2> I created a base page class that inherits from <code>System.Web.UI.Page</code> and then I modified my content pages to inherit from my <code>BasePage</code> class. The <code>BasePage</code> class contains the code that adds the meta tags to the header controls collection on the page. Since all of my content pages are inheriting from <code>BasePage</code>, this code only needs to exist in one place and not on every page. <h3 class="article-text"> C#</h3> <div class="pre-action-link" id="premain4" style="display: block;" width="100%"> <img height="9" id="preimg4" preid="4" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="4">Copy Code</a></div> <div class="article-text"> <pre id="pre4" lang="cs" style="margin-top: 0px;">/* ********************************************** * Page directive extender - base page class * * by Jim Azar - http://www.rhinoback.com * * **********************************************/ using System; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Text.RegularExpressions; /// <SUMMARY> /// Base class with properties for meta tags for content pages /// </SUMMARY> public class BasePage : Page { private string _keywords; private string _description; // Constructor // Add an event handler to Init event for the control // so we can execute code when a server control (page) // that inherits from this base class is initialized. public BasePage() { Init += new EventHandler(BasePage_Init); } // Whenever a page that uses this base class is initialized // add meta keywords and descriptions if available void BasePage_Init(object sender, EventArgs e) { if (!String.IsNullOrEmpty(Meta_Keywords)) { HtmlMeta tag = new HtmlMeta(); tag.Name = "keywords"; tag.Content = Meta_Keywords; Header.Controls.Add(tag); } if (!String.IsNullOrEmpty(Meta_Description)) { HtmlMeta tag = new HtmlMeta(); tag.Name = "description"; tag.Content = Meta_Description; Header.Controls.Add(tag); } } /// <SUMMARY> /// Gets or sets the Meta Keywords tag for the page /// </SUMMARY> public string Meta_Keywords { get { return _keywords; } set { // strip out any excessive white-space, newlines and linefeeds _keywords = Regex.Replace(value, "\\s+", " "); } } /// <SUMMARY> /// Gets or sets the Meta Description tag for the page /// </SUMMARY> public string Meta_Description { get { return _description; } set { // strip out any excessive white-space, newlines and linefeeds _description = Regex.Replace(value, "\\s+", " "); } } }</pre> </div> <h3 class="article-text"> VB</h3> <div class="pre-action-link" id="premain5" style="display: block;" width="100%"> <img height="9" id="preimg5" preid="5" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="5">Copy Code</a></div> <div class="article-text"> <pre id="pre5" lang="vb" style="margin-top: 0px;">'* ********************************************** '* Page directive extender - base page class * '* by Jim Azar - http://www.rhinoback.com * '* **********************************************/ Imports System Imports System.Web.UI Imports System.Web.UI.HtmlControls Imports System.Text.RegularExpressions ' Base class with properties for meta tags for content pages Public Class BasePage Inherits Page Dim _keywords As String Dim _description As String ' Constructor ' Add an event handler to Init event for the control ' so we can execute code when a server control (page) ' that inherits from this base class is initialized. Public Sub New() AddHandler Init, New EventHandler(AddressOf BasePage_Init) End Sub ' Whenever a page that uses this base class is initialized ' add meta keywords and descriptions if available Sub BasePage_Init(ByVal sender As Object, ByVal e As EventArgs) If Not String.IsNullOrEmpty(Meta_Keywords) Then Dim tag As HtmlMeta = New HtmlMeta() tag.Name = "keywords" tag.Content = Meta_Keywords Header.Controls.Add(tag) End If If Not String.IsNullOrEmpty(Meta_Description) Then Dim tag As HtmlMeta = New HtmlMeta() tag.Name = "description" tag.Content = Meta_Description Header.Controls.Add(tag) End If End Sub 'Gets or sets the Meta Keywords tag for the page Public Property Meta_Keywords() As String Get Return _keywords End Get set ' strip out any excessive white-space, newlines and linefeeds _keywords = Regex.Replace(value, "\\s+", " ") End Set End Property ' Gets or sets the Meta Description tag for the page Public Property Meta_Description() As String Get Return _description End Get Set(ByVal value As String) ' strip out any excessive white-space, newlines and linefeeds _description = Regex.Replace(value, "\\s+", " ") End Set End Property End Class</pre> </div> The <code>Meta_Keywords</code> and <code>Meta_Description</code> properties are public and can be set when the class (or derived class) is instantiated. When a page that inherits from this class is initialized, the <code>Base_Init</code> event handler is invoked and adds the meta tags to the page. On each content page, simply change the inheritance so that they inherit from <code>BasePage</code> instead of <code>page</code> or <code>System.Web.UI.Page</code>. See below: <h3 class="article-text"> C#</h3> <div class="pre-action-link" id="premain6" style="display: block;" width="100%"> <img height="9" id="preimg6" preid="6" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="6">Copy Code</a></div> <div class="article-text"> <pre id="pre6" lang="cs" style="margin-top: 0px;">public partial class home : BasePage { protected void Page_Load(object sender, EventArgs e) { } }</pre> </div> <h3 class="article-text"> VB</h3> <div class="pre-action-link" id="premain7" style="display: block;" width="100%"> <img height="9" id="preimg7" preid="7" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="7">Copy Code</a></div> <div class="article-text"> <pre id="pre7" lang="vb" style="margin-top: 0px;">Partial Class home Inherits BasePage Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) End Sub End Class</pre> </div> Now that each content page is inheriting from <code>BasePage</code>, they have the properties and the code to insert the meta tags. Now we can specify the <code>Meta_Keywords</code> and <code>Meta_Description</code> values on the @Page directive on the ASPX file. See the examples below: <div class="pre-action-link" id="premain8" style="display: block;" width="100%"> <img height="9" id="preimg8" preid="8" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="8">Copy Code</a></div> <div class="article-text"> <pre id="pre8" lang="html" style="margin-top: 0px;"><%@ Page Language="C#" MasterPageFile="~/PageTags.master" AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="home" CodeFileBaseClass="BasePage" Title="My home page title" Meta_Keywords="page directive, extension, dotnet, asp.net" Meta_Description="This is the meta description for my home page." %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h3>My home page content<h3> <p> This is the content on my home page. This page has an appropriate title tag and also has meta tags for keywords and description that are relative to this page. The title tag is essential to good search engine optimization and the meta description is the text that the search engine will display when your page is listed in search results. The title and meta description should be set specific to each page and should describe the content of the page. </p> </asp:Content> </pre> </div> Note the addition of the <code>CodeFileBaseClass</code> attribute. This is required so that page can reference the public properties specified in the <code>BasePage</code> class. <h2 class="article-text"> Points of Interest</h2> You may have noticed the regular expression in the <code>BasePage</code> class. This is here so that you can break the description and keyword tags up onto mulitple lines in your ASPX file, making them more readable and maintainable. Consider the following example from the <a href="http://www.ideascope.com/" target="_blank">IdeaScope Customer Feedback Management</a> website: <div class="pre-action-link" id="premain9" style="display: block;" width="100%"> <img height="9" id="preimg9" preid="9" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="9">Copy Code</a></div> <div class="article-text"> <pre id="pre9" lang="html" style="margin-top: 0px;"><%@ Page Language="C#" MasterPageFile="~/IdeaScope.master" AutoEventWireup="true" CodeFile="is.aspx.cs" Inherits="_is" CodeFileBaseClass="BasePage" Title="Effective Customer Feedback Management, Improve Customer Commmunication" Meta_Keywords="Customer Feedback, Customer Opinion, feedback, opinion, idea, ideas, idea management, customer feedback management, product management, product manager, product marketing, product marketing manager" Meta_Description="IdeaScope is an on-demand and embedded solution that allows you to capture, prioritize and centrally manage customer feedback. Make your customer feedback process more efficient. Save time and involve more stakeholders without significant cost." %> </pre> </div> Without the regular expression replacement, these tags would contain new lines and excess spaces at the beginning and ending of each line. I suspect that some search engine spiders might get upset about that, and the primary reason for including these tags is to make search engines happy. There is one last thing that you might want to do to tidy up this solution. The ASP.NET validation in Visual Studio 2005 is not going to recognize Meta_Keywords or Meta_Description. You will get warnings from the compiler saying that these are not valid attributes for the @Page directive. You will also see those red squiggley lines under those attributes in Visual Studio. Your code will compile and run fine. If you are like me and don't want to see any warnings or validation errors, then you will want to add the following lines to Visual Studio's schema for the @Page directive. <div class="pre-action-link" id="premain10" style="display: block;" width="100%"> <img height="9" id="preimg10" preid="10" src="http://www.codeproject.com/images/minus.gif" style="cursor: pointer;" width="9" /> Collapse | <a href="http://www.codeproject.com/Articles/17368/Using-Meta-Tags-with-Master-Pages-in-ASP-NET#" preid="10">Copy Code</a></div> <div class="article-text"> <pre id="pre10" lang="xml" style="margin-top: 0px;"> <xsd:attribute name="Meta_Keywords" vs:nonfilterable="true" /> <xsd:attribute name="Meta_Description" vs:nonfilterable="true" /> </pre> </div> These nodes should be inserted as child nodes of <code lang="xml"><xsd:complexType name="PageDef"></code> The schema file is located at the following location if you installed Visual Studio 2005 in the default location: <div class="article-text"> <code>C:\Program Files\Microsoft Visual Studio 8\Common7\Packages\schemas\html\page_directives.xsd </code></div> This article demonstrates how to extend the @Page directive to support meta keywords and meta descriptions. You can easily add other meta tags to the sample code. Complete source files and a sample project are included for C# and VB. Thanks to Scott Guthrie's blog post, <a href="http://weblogs.asp.net/scottgu/archive/2005/08/02/421405.aspx" target="_blank">Obsure but cool feature in ASP.NET 2.0</a> for the information that led up to this solution. Your comments and suggestions to improve this article are welcome. <h2> License</h2> <div id="LicenseTerms"> This article, along with any associated source code and files, is licensed under <a href="http://www.codeproject.com/info/cpol10.aspx" rel="license">The Code Project Open License (CPOL)</a> </div> </form>

MAVRA - Digital Technology

Thursday, January 3, 2013

Using Meta Tags with Master Pages in ASP.NET

By Jim Azar, 24 May 2007

Introduction

Background

No comments:

Post a Comment

Google Ads by Mavra

About Me