jquery - MVC 3 关于路由和部分 View 的 SEO 建议

Question

需要一些建议。我几乎没有 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 返回局部 View 。我使用 ajax 加载的原因是，每次点击重新加载所有页面内容时，我都不会得到完整的页面回发。

所以，我在我的网站上运行了一个 IIS SEO 报告，它显示了 SEO 违规和错误，因为/Home/Contact 没有元描述或标题(因为如果您导航，它是一个没有头标签的部分 View 直接到该网址)。我的所有其他导航链接也一样。

我的问题是，是否最好只对每个部分使用整页回发，以便在每个页面上获得标题和描述？或者有什么方法可以在不搞砸我的 SEO 的情况下仍然使用 ajax 进行导航。我知道没有完美的答案，所以提前感谢您的任何意见。

Answer 1

当您从 Controller 操作返回时，MVC3 会做一些特殊的事情。当您从 Controller 返回部分 View 结果 (return PartialView();) 时，您可以引用“完整 View ”，razor 引擎将忽略该 View 的布局文件并仅返回内容部分。在您的情况下，您可以检查请求是否为 AJAX 请求。基于此，返回请求 URL 的部分 View 的完整 View 。您可以在 MVC3 的默认“Internet 站点”模板上尝试/实验，仅更改两个文件。

首先，您的主页/索引 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>

我正在使用 AJAX 链接到 Home/About 操作。在默认模板中，您仍然在顶角的默认模板导航部分中有一个完整的请求链接用于测试。

接下来，你的家庭 Controller

使用 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 View 中的 ajax 链接将对该信息执行 AJAX 请求。您会看到 AjaxReponse div 仅填充了 About View 的 HTML，不会出现其他内容(布局等)。

实现这样的事情不仅有助于您的 SEO，而且不使用 JavaScript 的人仍然可以使用您的网站，并且功能齐全。

编辑

您不能在上面的示例中使用 .load 函数(至少在我的测试中)。原因:.load 没有设置 X-Requested-With header 来识别它是一个 AJAX 请求。有变通办法，我敢肯定，但注意到那是你正在使用的东西，并且认为如果你选择走这条路，它可能会有绊倒的危险。