When building ASP.NET Master Pages there are some simple approaches that will improve your search engine rankings, result displays, and integration with Google form-based tools such as Custom Search and AdSense.
Search Engine Optimization (SEO) is the practice of constructing the content and meta tags on an html page to improve your page rankings so that your site shows up in search engine results with a descriptive title and summary that will improve your chances of a click-through. To learn more about SEO, read the Google Search Engine Optimization Starter Guide.
In programming terms, the basics of SEO are simple to understand although not easily implemented unless planned for early in the site’s lifecycle. The first item of importance is to have useful content on each page and to use words in your copy that will resonate with web users looking for the product or information you have to offer. Just as important is to specify a unique title on each page as readers of search engine result pages typically just scan titles looking for the match closest to their search terms. The description and keywords are also important in determining a page's relevance and search engine ranking.
When defining an ASPX page that uses a Master Page, you can define the title in the Page tag that goes at the top of each ASPX file. The Master Page will then display the title dynamically - provided you have the runat="server" tag on the head section opening tag in the Master Page.
Visual Studio 2008 provides an improvement over previous versions in how you can set head section tagged content specific to each page. When a Master Page is created in 2008, it automatically adds an appropriately-placed ContentPlaceHolder called head which you can override in your content page to set meta tags such as the description and keywords.
For example, consider this Master Page snippet created by Visual Studio 2008:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head>
You can then override the title, description, and keywords in the content page as shown below:
<%@ Page Title="Page Title" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <meta name="keywords" content="page keyword listing" /> <meta name="description" content="page description" /> </asp:Content>
Here's the view-source of how it renders to the browser:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title> Page Title </title> <meta name="keywords" content="page keyword listing" /> <meta name="description" content="page description" /> </head>
Lately I've been working on integrating Google AdSense and Custom Search Engine into ASP.NET pages that use a common Master Page. Like many web widgets you can run within a web page that display content from another site, the code provided by Google for AdSense and Custom Search Engine each contain a form tag. This can be problematic since by default when you create a new Master Page in Visual Studio it places the form tag in the Master Page around the main ContentPlaceHolder intended for the page content. An HTML page can contain N forms, but there can be no nested forms, which means you cannot add your Google form tags to the page content as they would be scoped within the main master page form tag.
Sometimes you can place the widget in the Master Page in which case you just copy-paste the widget code into the Master Page outside the scope of the ASP.NET form tag. However - what if you want to place the widget code in the content page? Since the form is defined in the Master Page, it looks upon first inspection like this might not be possible.
Fortunately there is a simple solution - you don't have to define the Form tag in the Master Page! Just because it's placed there by default doesn't mean that is your only option. It's perfectly valid to define the form tag in each content page instead. This is what I do so that I can place Google AdSense and Custom Search at specific points inside my ASPX pages and still take advantage of ASP.NET forms.
For example, in the code below the Master Page defines the main place holder, but with no surrounding form tag:
<div id="main"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server" /> </div>
The content page then defines the form tag for Google Custom Search followed by the ASP.NET form tag:
<form action="CustomSearchResults.aspx" id="cse-search-box"> <div> <input type="hidden" name="cx" value="GUID" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> <form runat="server"> ASP.NET form goes here </form>