Porady SEO dla MVC 3 dotyczące routingu i widoków częściowych

Question

Potrzebujesz porady. Mam małe doświadczenie w SEO. Tworzenie witryny z broszur dla mojej żony, nowa firma korzystająca z MVC 3. Mam nawigację na górze używając linków.

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

Który przechwytuję z jquery.

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

Gdzie/Home/Kontakt zwraca częściowy widok. Powodem, dla którego używam ładowania ajax, jest to, że nie otrzymuję odświeżenia całej strony przy każdym kliknięciu, które przeładowuje całą zawartość strony.

Prowadzę więc raport SEO IIS w mojej witrynie i pokazuje naruszenia i błędy SEO, ponieważ/Home/Contact nie ma meta opisu ani tytułu (ponieważ jest to widok częściowy bez tagu head, jeśli przejdź bezpośrednio do tego adresu URL). To samo dotyczy wszystkich moich innych linków nawigacyjnych.

Moje pytanie brzmi, czy najlepiej byłoby po prostu użyć pełnych odsłon stron dla każdej sekcji, aby uzyskać tytuł i opis na każdej stronie? Czy jest jakiś sposób, aby nadal używać ajax do nawigacji, nie psując mojego SEO. Wiem, że nie ma idealnej odpowiedzi, więc z góry dziękuję za wszelkie uwagi.

Answer 1

MVC3 wykonuje pewne specjalne czynności po powrocie ze sterownika. Po zwróceniu częściowego wyniku widoku (return PartialView();) z kontrolera można odwołać się do "pełnego widoku", a mechanizm maszynki do golenia zignoruje pliki układu dla tego widoku i zwróci tylko część zawartości. W twoim przypadku możesz sprawdzić, czy żądanie było żądaniem AJAX, czy nie. Na tej podstawie zwróć pełny widok częściowego widoku żądanego adresu URL. Możesz spróbować/wygasnąć z tym na domyślnym szablonie "Witryna internetowa" dla MVC3, zmieniając tylko dwa pliki.

Po pierwsze, Home/Index Widok:

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

ja AJAXing link do Home/O akcji. W domyślnym szablonie nadal masz pełne łącze żądania w domyślnej sekcji nawigacji szablonów w górnym rogu do testowania.

Następnie Twój Home Controller

użyciu 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(); 
     } 
    } 
} 

Teraz, wraz zmienić tylko te dwie rzeczy od domyślnego szablonu projektu, klikając na link Informacje w głównej nawigacji robi pełny wniosek i wyświetlanie O stronie wraz z tytułem strony, wszystkie informacje głowy itp. Jednak kliknięcie linku ajax w widoku Home/Index spowoduje wykonanie żądania AJAX dla tych informacji. Przekonasz się, że element div AjaxReponse jest wypełniony tylko kodem HTML widoku Informacje, nie znajdziesz w nim żadnych innych rzeczy (układu itp.).

Nie tylko wdrożenie czegoś takiego pomoże SEO, ale także osoby, które nie używają JavaScript nadal będą mogły korzystać z witryny, w pełni funkcjonować.

EDIT

Nie można użyć funkcji .load (przynajmniej w moich testów) z powyższego przykładu. Powód: program .load nie ustawił nagłówka X-Requested-With w celu zidentyfikowania żądania AJAX. Na pewno istnieją pewne obejścia, ale zauważyłem, że to było to, czego używałeś i uznałeś, że może to być zagrożenie potknięciem, jeśli zdecydujesz się na tę trasę.