Dica: ASP.NET MVC Display Mode e SEO (Google) – // Rodolfo Fadino
rodolfo in ASP.NET | September 11, 2013 Dica: ASP.NET MVC Display Mode e SEO (Google)
ASP.NET MVC Display Mode
A partir da versão do ASP.NET MVC 4 existe um excelente recurso chamado Display Mode que consiste na aplicação selecionar a view adequada dependendo da versão do navegador ou dispositivo que está sendo utilizado.
No exemplo abaixo, em uma requisição feita em um dispositivo mobile, a view que a aplicação selecionará será a Index.Mobile.cshtml, já nas demais requisições, a view que será utilizada na requisição será a Index.cshtml.
Além da convenção default, é possível criar nosso próprio Display Mode, tratando o user-agent da requisição, no exemplo abaixo, eu crio um Display Mode para iPhone.
DefaultDisplayMode("iPhone")
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
Esta feature é extremamente útil e poderosa, com ela, de acordo com o dispositivo que acessa nossa aplicação é possível utilizar a view especifica, contendo as customizações necessárias para a melhor experiência do usuário. Como por exemplo carregar imagens diferentes, ou apresentar diferentes conteúdos e recursos para os usuários.
Dynamic Content e SEO
Esta técnica de servir diferentes conteúdos com a mesma url, variando de acordo com dispositivo é chamada Dynamic Content. Esta otimização para mobile é uma pratica que pode inclusive servir como critério na priorização da busca do Google.
Para o robô do Google entender corretamente esta variação do conteúdo renderizado pelo site, eles recomendam que seja utilizado um Header na resposta do servidor indicando que o conteúdo varia de acordo com o user-agent.
https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving
Este header tem duas principais funções, a de avisar para estruturas e servidores de cache/cdn que o conteúdo daquela requisição pode variar de acordo com o User Agent, e também serve para ajudar o robô do Google a entender que seu site é otimizado para variar o conteúdo para dispositivos mobiles, e com isso fazer o correto escaneamento dos conteúdos.
(...resto do request...)
(...resto do response...)
IIS compression e o header Vary
É muito simples adicionar um header na resposta de nossa aplicação, entretanto, existe uma questão: no IIS, quando utilizamos o modulo de Compressão, e o de Cache (cenário muito comum), o IIS irá sobrescrever o header Vary. Segundo o post em um dos membros do time do IIS (post do blog) este comportamento será tratado em uma próxima versão, e até lá, é indicado utilizar um módulo que uma empresa chamada 51Degrees criou e está disponível no Codeplex.
Este modulo colocar o header e valor do Vary em um header temporário antes de passar pelo modulo de compressão, e retorna o header original após passar pelo modulo de compressão.
Existem diversas maneiras de configurar o header Vary: User-Agent na resposta de nossas aplicações, uma dela é criar um Global Filter para "interceptar" o retorno das nossas Actions e configurar o header na resposta.
Para isso, vamos criar uma classe chamada VaryHeaderFilter.cs que herde de ActionFilterAttribute e nela utilizar um override para adicionar o Header na resposta:
namespace MvcApplication1.Filters
public class VaryHeaderFilter:ActionFilterAttribute
filterContext.HttpContext.Response.Headers.Add("Vary", "User-Agent");
Após isso, será necessário adicionar este Filter, no meu caso (ASP.NET MVC5) existe um arquivo chamado FilterConfig, é nele que vamos adicionar este Filter dentro da coleção GlobalFilterCollection:
using MvcApplication1.Filters;
filters.Add(new VaryHeaderFilter());
Caso sua aplicação não seja ASP.NET MVC5, você poderá adicionar o Filter no Global.asax.
Testando Com esse Filter criado e adicionado na nossa aplicação, e com o IIS devidamente configurado com o modulo da 51Degrees (caso use compressão), teremos o seguinte resultado como exemplo:
Agora nossa aplicação está avisando para o robô do Google que ela pode variar de acordo com o User-Agent.
Espero que esta dica seja útil, estou a disposição para dúvidas, criticas e sugestões.
Write a Comment Douglas Salla
Em meus testes, só conseguí simular o funcionamento de .mobile.cshtml partindo com essa estrutura desde a _Layout.cshtml, ou seja, não bastou ter apenas uma determinada página com a extensão .mobile.cshtml, é isso mesmo ou fiz algo errado aí pelo caminho?
Tudo bom Douglas, o Display Mode do ASP.NET MVC é indepentende, ou seja você pode ter uma View Mobile ( Index.Mobile.cshtml) ou uma Layout mobile, de maneira independente entre elas. http://www.asp.net/whitepapers/mvc4-release-notes#_Toc303253810
Related Content by TagASP.NET MVCc#Display ModeHeaderSEO Independent Publisher empowered by WordPress