in ASP.NET

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.

image

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.

DisplayModeProvider.Instance.Modes.Insert(0, new
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

Vary HTTP header

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.

GET /Home HTTP/1.1
Host: www.site.com
(...resto do request...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(...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.

Global Action Filters

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:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Filters
{
    public class VaryHeaderFilter:ActionFilterAttribute
    {
        public override void OnActionExecuted(ActionExecutedContext filterContext)
        {
            base.OnActionExecuted(filterContext);
            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;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1
{
    public class FilterConfig
    {
        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
            filters.Add(new VaryHeaderFilter());
        }
    }
}

Caso sua aplicação não seja ASP.NET MVC5, você poderá adicionar o Filter no Global.asax.

Testando Alegre

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:

image

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.

Abs

Rodolfo

  • Douglas Salla

    Olá Rodolfo,

    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?

    Abraço.

  • http://www.rodolfofadino.com.br/ Rodolfo Fadino

    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

  • Carlos

    Muito bom artigo, segue também a minha contribuição

    Ferramenta gratuita também segue a dica http://www.conceberdigital.com.br/cadastro-em-250-buscadores-gratis/

    Um abraço