JavaScript: Add Search Engine Keyword Highlight Support to your site with ease

When looking at the source code for the BlogEngine.NET project, I noticed that they are implementing some javascript to highlight search engine keywords. What happens is when a user searches (using Google, Yahoo, MSN, etc.) and then clicks through to your site, this javascript then highlights any words on the page that match the keywords they are search for. This isn’t critical functionality to add to a site, but it sure helps in making your site much more user friendly by allowing them to more easily find what they are searching for.

The script they implemented in BlogEngine.NET is called se-hilite. The current version has support for all the major search engines and browsers, and this script is pretty mature having been around since June 2004. It is also fairly easy to implement, all you have to do is add a CSS class named hilite to your CSS file, and then add a javascript include to the se-hilite.js file to your page.

My blog is implemented with ASP.NET 2.0, so to include the se-hilite.js file in my entire site I just added the following line to the load event of my master page:

ScriptManager.RegisterClientScriptInclude(
    this.Page, this.GetType(),
    "se_hilite",
    VirtualPathUtility.ToAbsolute("~/js/se_hilite.js")
);

I just implemented this on my blog, so I hope all you who come here from the search engines enjoy!