SEO advice for MVC 3 regarding routing and partial views

Question

Need some advice. I have little SEO experience. Building a brochureware site for my wifes new business using MVC 3. I have some navigation at the top using links.

<a class="main" href="/Home/Contact">Contact Us</a>

Which I'm intercepting with some jquery.

ns.BindNavigation = function () {
    $(".nav-bar a").click(function (e) {
        $("#Content").load(this.href);
        return false;
    });
};

Where /Home/Contact returns a partial view. The reason I am using the ajax load is so I don't get a full page postback on every click which reloads all page content.

So, I run an IIS SEO report on my site and it is showing SEO violations and errors because /Home/Contact does not have a meta description or a title (because it is a partial view with no head tag if you navigate directly to that url). Same for all my other nav links.

My question is, would it be best to just use the full page postbacks for each section so I get a title and description on each page? Or is there some way to still use ajax for navigation without screwing up my SEO. I know there is no perfect answer so thanks in advance for any input.

Answer 1

MVC3 does some special things when you return from your controller action. When you return a partial view result (return PartialView();) from your controller, you can reference a 'full view' and the razor engine will ignore the layout files for that view and only return the content portion. In your case, you could put a check if the request was an AJAX request or not. Based on that, return the full view of the partial view of the requested URL. You can try/expirament with this on the default 'Internet Site' template for MVC3 only changing two files.

First, your Home/Index View:

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    @Html.ActionLink("This is AJAXy", "About", "Home", null, new{@class="ajax"})
</p>

<div id="AjaxContent"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $(".ajax").click(function (e) {
            e.preventDefault();
            alert("clicked");
            $.ajax({
                url: this.href,
                dataType: 'html',
                success: function (data) {
                    $('#AjaxContent').html(data);
                    alert('Load was performed.');
                }
            });
        });
    });
</script>

I am AJAXing the link to the Home/About action. In the default template, you still have a full request link in the default template navigation section in the top corner for testing.

Next, your Home Controller

using System.Web.Mvc;

namespace MvcApplication6.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            if(Request.IsAjaxRequest())
            {
                return this.PartialView();
            }
            return View();
        }
    }
}

Now, with only these two things changed from the default project template, clicking on the About link in the main navigation does a full request and display of the About page complete with page title, all of your head information, etc. However, clicking on the ajax link in the Home/Index view will perform an AJAX request for that information. You will see that the AjaxReponse div is only populated with the HTML of the About view, none of the other stuff (layout,etc) will come across.

Not only will implementing something like this help your SEO, but also people that do not use JavaScript will still be able to use your site, fully functioning.

EDIT

You cannot use the .load function (at least in my testing) with the above example. Reason: the .load does not set the X-Requested-With header to identify that it was an AJAX request. There are workarounds, I am sure, but noticed that was what you were using and figured it could be a trip hazard if you choose to go this route.