有关路由和部分视图的MVC 3的SEO建议

时间:2012-04-12 02:17:25

标签: jquery asp.net-mvc asp.net-mvc-3 seo

需要一些建议。我有很少的SEO经验。使用MVC 3为我的妻子新业务构建一个小册子网站。我在顶部使用链接进行了一些导航。

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

我正在拦截一些jquery。

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

其中/ Home / Contact返回部分视图。我使用ajax加载的原因是因为我没有在每次重新加载所有页面内容的点击上获得整页回发。

所以,我在我的网站上运行了一个IIS搜索引擎优化报告,它显示了SEO违规和错误,因为/ Home / Contact没有元描述或标题(因为如果你导航它是一个没有头标记的局部视图直接到那个网址)。我的所有其他导航链接也是如此。

我的问题是,最好只为每个部分使用整页回发,以便在每个页面上获得标题和说明吗?或者是否有一些方法仍然使用ajax导航而不搞砸我的SEO。我知道没有完美的答案,所以提前感谢任何输入。

1 个答案:

答案 0 :(得分:5)

当您从控制器操作返回时,MVC3会执行一些特殊操作。当您从控制器返回部分视图结果(return PartialView();)时,您可以引用“完整视图”,并且剃刀引擎将忽略该视图的布局文件,并仅返回内容部分。在您的情况下,您可以检查请求是否是AJAX请求。基于此,返回所请求URL的部分视图的完整视图。您可以在MVC3的默认“Internet站点”模板上尝试/ expirament,仅更改两个文件。

首先,您的主页/索引视图:

@{
    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>

我是AJAXing指向Home / About操作的链接。在默认模板中,您仍然在顶角的默认模板导航部分中有完整的请求链接以进行测试。

接下来,您的家庭控制器

使用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();
        }
    }
}

现在,只需更改默认项目模板中的这两项内容,单击主导航中的“关于”链接即可完整请求并显示“关于”页面,页面标题,所有头部信息等。 ,单击Home / Index视图中的ajax链接将对该信息执行AJAX请求。您将看到AjaxReponse div仅填充了About视图的HTML,其他任何东西(布局等)都不会出现。

实施此类内容不仅有助于您的SEO,而且不使用JavaScript的人仍然可以使用您的网站,完全正常运作。

修改

在上面的示例中,您不能使用.load函数(至少在我的测试中)。原因:.load没有设置X-Requested-With标头来标识它是一个AJAX请求。我确信有一些解决方法,但是注意到你正在使用它,并认为如果你选择走这条路线可能会造成旅行危险。