SEO Friendly URLs for Paging now supported by DevExpress MVC GridView

Learn how to enable search engine optimized (SEO) URLs for your DevExpress ASP.NET MVC GridView extension.

What is ‘SEO Friendly’?

SEO or search engine optimization means that you’ve optimized your website forsearch engines like Google, Bing, Yahoo, etc. Search engines prefer to link a direct URL with some content.

Callbacks Issue

The problem arises because of AJAX callbacks that only update part of the page. AJAX is great for user experience but not for a search engine that wants a static page and URL so that it can be cached in their system.

DevExpress Solution

Many DevExpress ASP.NET products provide AJAX callback functionality built into the ASP.NET products. So, to enable SEO friendly mode for DevExpress ASP.NET MVC GridView’s pager, you’ll need to set your view to look something like this:

@Html.DevExpress().GridView(
    settings = > {
        settings.Name = "grid";
        settings.CallbackRouteValues = new { Controller = "GridView", Action = "SEOFriendlyPagingPartial" };
        settings.Width = Unit.Percentage(100);

        settings.KeyFieldName = "CustomerID";
        settings.Columns.Add("ContactName").SortOrder = DevExpress.Data.ColumnSortOrder.Ascending;
        settings.Columns.Add("CompanyName");
        settings.Columns.Add("City");
        settings.Columns.Add("Region");
        settings.Columns.Add("Country");

        settings.Settings.ShowGroupPanel = true;
        settings.SettingsPager.PageSize = 10;
        settings.SettingsPager.SEOFriendly = SEOFriendlyMode.Enabled;
        settings.SettingsPager.PageSizeItemSettings.Visible = true;
    }
).Bind(Model).GetHtml()

Specifically, the SettingsPager.SEOFriendly property tells the DevExpress MVC GridView to render direct links for the pages. Therefore, when each page of the GridView has a direct link like this one below:

(Online demo for SEO Friendly feature)
http://demos.devexpress.com/MVC/GridView/SEOFriendlyPaging?seogrid=page4|size10|sort1|a0 

The seogrid variable in the above URL contains the information that is parsed by the DevExpress MVC GridView when it loads that page. Therefore, it’s possible for you navigate to a direct page with just the URL.

Web Crawlers Only

But what if you wanted to provide a good AJAX experience for your end-users with callbacks while still getting some google-juice for SEO purposes? DevExpress MVC GridView has an answer for you here as well.

Set the DevExpress MVC GridView’s Pager to SEOFriendlyMode.CrawlerOnly and the GridView renders hyperlinks in the pager when a web-crawler is detected. For other visitors, standard pager links are generated. So, search engines can index the entire contents of the grid and site visitors experience the same callback functionality.

Free DevExpress Products - Get Your Copy Today