Consulenza SEO per MVC 3 per routing e viste parziali

Question

Hai bisogno di un consiglio. Ho poca esperienza SEO. Costruire un sito di brochureware per le mie mogli nuova attività utilizzando MVC 3. Ho un po 'di navigazione in alto utilizzando i collegamenti.

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

quale sto intercettare con un po 'jQuery.

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

Dove/Home/Contatto restituisce una vista parziale. La ragione per cui sto usando il caricamento Ajax è che non ottengo un postback della pagina intera su ogni clic che ricarica tutto il contenuto della pagina.

Quindi, eseguo un report SEO IIS sul mio sito e mostra violazioni ed errori SEO perché/Home/Contatto non ha una meta description o un titolo (perché è una vista parziale senza tag head se navigare direttamente a quell'URL). Lo stesso per tutti i miei altri collegamenti nav.

La mia domanda è, sarebbe meglio utilizzare solo i postback di pagine complete per ogni sezione in modo da ottenere un titolo e una descrizione su ogni pagina? O c'è un modo per usare ancora ajax per la navigazione senza rovinare il mio SEO. So che non c'è una risposta perfetta quindi grazie in anticipo per qualsiasi input.

Answer 1

MVC3 fa alcune cose speciali quando si ritorna dall'azione del controller. Quando si restituisce un risultato di vista parziale (return PartialView();) dal controller, è possibile fare riferimento a una "vista completa" e il motore del rasoio ignorerà i file di layout per quella vista e restituirà solo la parte del contenuto. Nel tuo caso, potresti mettere un assegno se la richiesta fosse una richiesta AJAX o meno. In base a ciò, restituire la vista completa della vista parziale dell'URL richiesto. Puoi provare/expirament con questo modello predefinito 'Sito Internet' per MVC3 cambiando solo due file.

In primo luogo, la tua casa/Indice Vista:

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

sto AJAXing il link alla Home/Chi azione. Nel modello predefinito, hai ancora un collegamento di richiesta completo nella sezione di navigazione del modello predefinita nell'angolo in alto per il test.

Avanti, il Controller casa

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

Ora, con solo queste due cose sono cambiate dal modello di progetto di default, cliccando sul proposito di link nella navigazione principale fa una richiesta completa e la visualizzazione della pagina Informazioni complete di titolo della pagina, tutte le informazioni testa , ecc. Tuttavia, facendo clic sul collegamento Ajax nella vista Home/Indice, verrà eseguita una richiesta AJAX per tali informazioni. Vedrai che il div di AjaxReponse è popolato solo con l'HTML della vista About, nessuna delle altre cose (layout, ecc.) Verrà trovata.

Non solo l'implementazione di qualcosa di simile aiuterà il tuo SEO, ma anche le persone che non usano JavaScript potranno ancora utilizzare il tuo sito, funzionando perfettamente.

EDIT

Non è possibile utilizzare la funzione .load (almeno nel mio test) con l'esempio di cui sopra. Motivo: il .load non imposta l'intestazione X-Requested-With per identificare che si trattava di una richiesta AJAX. Ci sono soluzioni alternative, ne sono sicuro, ma ho notato che era quello che stavi usando e ho pensato che potrebbe essere un rischio di viaggio se scegli di percorrere questa strada.