Todos nós sabemos a importância que SEO possui quando o assunto é ganhar maior visibilidade para o seu site em mecanismos de buscas. Hoje irei mostrar como adicionar algumas das tags mais importantes dinamicamente com .NET Core.
As tags SEO são aquelas que nos ajudam a melhorar nossa classificação na web nos mecanismos de busca. A maioria dos motores de busca geralmente rasteja através de sites com alguma frequência (dependendo de vários fatores) e encontrar meta tags que contêm a palavra-chave, descrição, informações do autor e outras informações em tags de cabeçalho de páginas. Em seguida, prossegue para outras tags HTML no corpo das páginas da web.
Em sites dinâmicos como o ASP.NET Core, é um pouco difícil gerenciar essas tags em páginas de conteúdo, pois geralmente há uma página mestre/layout e todas as páginas de conteúdo compartilham esse conteúdo da página. Uma das maneiras é definir um ViewBag ou um ViewData na página _Layout e atualizá-lo em cada página para gerenciar o título da página, mas outras tags ainda são um problema, então, como precisamos lidar com elas? A resposta é simples, podemos injetá-los dinamicamente!
Com seu projeto Asp.NET Core (web) criado, crie uma pasta “Helpers” e dentro da pasta Helpers adicione uma classe como “SEOPageMetaHelper”. Esta classe é usada como um provedor de dados, você pode usar o banco de dados ou XML ou qualquer outra fonte de dados, mas eu usei essa classe para fins de demonstração para simplificar.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace DynamicMetaTags.Helpers
{
public static class SEOPageMetaHelper
{
public static IEnumerable<Tuple<string, string, string, string>> Collections
{
get
{
return new List<Tuple<string, string, string, string>>
{
new Tuple<string, string, string, string>("Home/Index", "Dynamic Index", "Index Description","keyword1,keyword2"),
new Tuple<string, string, string, string>("Home/About", "Dynamic About", "About Description","keyword3,keyword4"),
new Tuple<string, string, string, string>("Home/Contact", "Dynamic Contact", "Contact Description","keyword5,keyword6")
};
}
}
}
}
Na próxima etapa, você precisa criar um serviço que irá injetar nossa página _layout principal e usá-la para a integração de metatags. Então, crie um serviço na pasta Helpers “HelperService”
public class HelperService
{
private StringBuilder sb = new StringBuilder();
public string InjectMetaInfo(string urlSegment)
{
var metaInfo = SEOPageMetaHelper.Collections.Where(s => s.Item1.Equals(urlSegment,StringComparison.InvariantCultureIgnoreCase)).SingleOrDefault();
//If no match found
if (metaInfo == null)
return string.Empty;
sb.Append("<title>" + metaInfo.Item2 + "</title>");
sb.Append(Environment.NewLine);
sb.Append($"<meta name='description' content='{metaInfo.Item3}'/>");
sb.Append(Environment.NewLine);
sb.Append($"<meta name='keywords' content ='{metaInfo.Item4}'/>");
string metaTag = sb.ToString();
sb = null;
return metaTag;
}
}
O código é bem simples, eu peguei as informações da tag Meta da página específica e criei uma tag Meta, isso pode ser simplificado ainda mais ou customizado de acordo com quaisquer meta tags que você queira preencher.
Agora, precisamos registrar esse serviço como uma dependência, porque precisamos dele para injetar na página _Layout. Abra o arquivo startup.cs e faça o registro do serviço:
public void ConfigureServices(IServiceCollection services)
{
services.AddScoped<HelperService>();
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
Agora, precisamos atualizar a página _Layout.cs que está na pasta Views / Shared e precisamos injetar o serviço e podemos usar o helperService nas outras páginas porque nós o injetamos no modo de exibição para Razor, então o próximo código que injeta metatags é:
//layout.cs
@using DynamicMetaTags.Helpers
@inject HelperService helperService
<!DOCTYPE html>
<html>
//utilização genérica
@{
string segements = $"{this.ViewContext.RouteData.Values["controller"]}/{this.ViewContext.RouteData.Values["action"]}";
@(Html.Raw(helperService.InjectMetaInfo(segements)));
segements = null;
}
Esse código obtém os segmentos atuais de controlador / ação, os constrói e os envia para HelperService como um parâmetro, o método HelperService retorna a meta tag que é renderizada na seção head da página.
Agora o cabeçalho da página se parece com:
@using DynamicMetaTags.Helpers
@inject HelperService helperService
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - DynamicMetaTags</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
@{
string segements = $"{this.ViewContext.RouteData.Values["controller"]}/{this.ViewContext.RouteData.Values["action"]}";
@(Html.Raw(helperService.InjectMetaInfo(segements)));
segements = null;
}
</head>
<body>
Por padrão, o núcleo do ASP.NET incluiu o <title> na página _Layout, então vou remover essa tag porque nós a injetamos dinamicamente
Abra o arquivo _Layout.cshtml e remova o <title> @ViewData [“Title”] </ title> e agora temos apenas uma tag de título na página que nós injetamos.
Conclusão
Podemos melhorar nossa classificação do site introduzindo algumas meta tags que expõem a descrição e as palavras-chave da pesquisa no mecanismo de busca e podemos obter uma classificação aprimorada e, em layouts dinâmicos / páginas mestras, podemos injetar dinamicamente as informações das Meta tags como fizemos nosso projeto ASP.NET Core.
