# Documentação SEO - Gimba ## Sumário 1. [Introdução](#Introdução) 2. [O que é SEO](#O-que-é-SEO) 2.1 [Funcionamento das ferramentas de busca](#Interação-de-buscadores) 2.2 [Técnicas de SEO](#Quais-são-essas-técnicas) 3. [Ecossistema Gimba](#Ecossistema-Gimba) 3.1 [Merchant Center](#Google-Merchant-Center) 3.2 [Analytics](#Google-Analytics) 3.3 [Search Console](#Search-Console) 3.4 [AdWords](#Google-AdWords) 3.5 [Tag Manager](#Google-Tag-Manager) 3.6 [Visão geral](#Fluxograma-geral) 4. [Código](#Código) 4.1 [Site](#Site) 4.2 [Admin](#Admin) 5. [O Admin](#Admin1) 5.1 [Gerenciador de Conteúdo](#Gerenciador-de-Conteúdo) 6. [Conclusão](#Conclusão) ## Introdução Bem vindo ao time de desenvolvimento SEO! Esse documento tem o propósito de integrar de forma eficiente e simples, qualquer novo recurso selecionado para aplicar técnicas e padrões de SEO no ecommerce do Gimba. O intuito é que aqui existam informações úteis tanto para quem caiu de paraquedas no mundo SEO, quanto para quem já possui um knowhow, mas deseja saber a fundo como tudo está emparelhado e funcionando no caso especifico desse ecommerce. Bons estudos! ## O que é SEO O termo SEO (_Search Engine Optimization_) é atribuído a **um conjunto de técnicas que busca otimizar a interação de buscadores (Google, Bing, etc) com o seu site e seu conteúdo a fim de indexar melhor todo o conteúdo, ampliando seu alcance.** ### Interação de buscadores? Os buscadores (Google, Alexa, Bing, etc...), basicamente, funcionam usando um "robô" (chamado de _crawler_) que fica navegando de links em links na internet, coletando informações sobre todos os sites alcançáveis, a fim de **indexá-los** na página e exibí-los quando um usuário faz uma busca. Nesse processo de navegação, eventualmente o robô vai encontrar nosso ecommerce e navegar por ele, "conhecendo" as páginas de produtos, as vitrines, as categorias, a home, entendendo onde fica cada informação para exibir uma resposta coerente baseado na pesquisa que algum usuário faça. É assim que os buscadores interagem com nosso site. O nosso objetivo é facilitar essa interação, usando técnicas de SEO, para que o robô do Google e demais buscadores, **posicionem melhor nosso conteúdo** no site deles. Assim, temos maiores chances de sermos recomendados mais vezes a um usuário quando ele pesquisa por algum produto que também exista em outros ecommerces concorrentes, mas que tenham um SEO "pior" que o nosso. ### Quais são essas técnicas? São diversas, existem atualmente certificações voltadas a ensinar e desenvolver técnicas que melhorem a indexação de sites em ferramentas de busca. No nosso site, por exemplo, temos algumas já aplicadas: - **URLs amigáveis**: o Google e demais buscadores, valorizam URLs cujo próprio texto reflita conteúdo que ela apresenta, além de um texto normalizado (sem caracteres especiais, ou acentuação). Por exemplo, exisitiu uma época em que uma URL de produto era assim: gimba.com.br/Repelente+Family+Loção+100ml+1+UN+Off/?PID=64226 Note que a URL possuía acentuação e caracteres maiúsulos. Atualmente a mesma URL é formada da seguinte maneira: gimba.com.br/repelente/repelente-family-locao-100ml-1-un-off/?PID=64226 Repare que, além de remover os caracteres especiais, também foi aplicado o espaço convencional para URLs, de traço (-), e a categoria do produto também é informada. - **Reconstrução de URLs**: podem existir situações em que uma URL incorreta é inserida e ela, ainda assim, direciona para a página correta, pegando o exemplo anterior, se um usuário acessasse: gimba.com.br/blábláblá/?PID=64226 ele ainda iria atingir a página do produto, devido ao código do produto ser válido (PID) e o robô do google poderia inclusive indexar errôneamente esse link. Existem ataques maliciosos que focam em criar indexações incorretas, acessando links errados dessa forma e prejudicando a indexação de sites concorrentes. O comportamento ideal para prevenir essa situação é fazer um redirecionamento permanente para a URL correta, reconstruindo e aplicandoo texto do link, para que caso uma URL incorreta seja inserida, com um código do produto válido, o usuário seja redirecionado para a URL correta daquele produto: ![](https://i.imgur.com/r62RMbk.png) - **Sitemap automatizado**: os robôs dos buscadores tem a opção de percorrer seu site de link em link, mas existe uma ferramenta para apoiar e validar esse processo, ela se chama "sitemap", que nada mais é que um arquivo XML com todas as URLs do site. Esse arquivo fica disponível para consulta a todos robôs de buscadores a fim de facilitar a indexação das páginas. Em um ecommerce, que novos produtos são inseridos a todo momento, é recomendável que o arquivo XML do sitemap seja gerado novamente todo dia, para possuir todos os novos produtos que possam ter sido criados. - **Dados estruturados**: como já mencionado, os robôs de buscadores "lêem" as páginas em busca de informações relevantes para indexar, como o preço, descrição e fabricante de um produto. Essas informações estão inseridas no HTML das páginas, porém o robô, além de buscar por essas informações "na raça", percorrendo toda a página, também busca por um objeto javascript padronizado, chamado de "[Dados estruturados de vitrine](https://support.google.com/merchants/answer/7353427?hl=pt-BR)", e tem o seguinte formato: ![](https://i.imgur.com/vSd3uPy.png) A lista de técnicas já aplicadas no site, segue com mais alguns itens (como Crawl Budget, rastreamento HTML, meta tags de divulgação, heading tags, etc) e a ideia é, **continuamente, encontrar pontos que possam ser melhorados e implementar novas técnicas que possam ser aplicadas a fim de alcançar melhor indexação e, consequentemente, mais destaque e mais acessos.** ## Ecossistema Gimba Sabendo o que é SEO, precisamos agora entender quais as diferentes ferramentas envolvidas no monitoramento, gerenciamento e indexação do nosso site, especificamente, para podermos entender a qual recurso recorrer em determinada situação, ou demanda. ### Google Merchant Center O [Google Merchant Center](https://www.google.com.br/intl/pt_br/retail/solutions/merchant-center/) é, basicamente, uma ferramenta, onde um administrador de negócio, pode enviar uma base de informações (no nosso caso um [arquivo XML](https://support.google.com/merchants/answer/7052112?hl=pt-BR) estruturado, com todos os produtos) para o Google usar essa base para direcionar seu conteúdo a possíveis consumidores. Na prática, o principal uso do Merchant Center, é usar sua base de dados de produtos para publicar no Google Shopping Campaign através do **Google AdWords**: ![](https://i.imgur.com/pd2Lr6w.png) ### Google Analytics O [Google Analytics](https://marketingplatform.google.com/about/analytics/) é um sistema do Google responsável por mensurar dados gerais relacionados a anúncios, acessos e até faturamento. Através dessa ferramenta podemos monitorar inclusive anormalidades de indexação, pois, caso URLs incorretas estejam indexadas no Google e alguém acessá-las, o G.A. (Google Analytics) vai registrar esse acesso. ### Search Console O [Search Console](https://search.google.com/search-console/about) é um painel administrativo que oferece relatórios e dados sobre indexação e erros em páginas, ou em arquivos acessados pelo robô do google, como o robots.txt, um arquivo responsável por limitar ou direcionar o acesso do robô. Ótimo para obter informações sobre erros em geral que precisam ser corrigidos para indexação plena das páginas. ![](https://i.imgur.com/49dfGtk.png) ### Google AdWords O [Google AdWords](https://ads.google.com/intl/pt-BR_br/home/) é a ferramenta responsável pela publicação efetiva de anúncios. Dispõe de recursos como "Rede display", que direciona anúncios a possíveis consumidores, ou "AdWords Shopping", que consome sua base de informações cadastrada no **Merchant Center** a fim de exibir seus produtos na lista de shopping do Google, e outros serviços. ### Google Tag Manager [Google Tag Manager](https://marketingplatform.google.com/about/tag-manager/) é um gerenciador de tags de rastreamento. Muitos serviços oferecem tags, que são um código javascript, responsável por gerar dados em cima do fluxo do site que inserir esse código em suas páginas. O problema disso é que ficar inserindo novas tags pode ser trabalhoso e repetitivo. O google tag manager é uma solução para inserir, gerenciar e acompanhar resultados de tags, sem ter que editar o código, tudo através do painel administrativo. ### Fluxograma geral ![](https://i.imgur.com/dOCnruf.png) ## Código São duas as bases de códigos principais que temos acesso, o **site** e o **admin**. O site é o ecommerce propriamente dito, o admin é um sistema administrativo para inserir e gerenciar conteúdo no site. ### Site O código do site, atualmente, roda sobre o framework ASP.NET 4.5, uma versão de 2012 (sim, bem antigo). O projeto do site é agrupado pelo arquivo _Gimba.Ecommerce.Admin.Complete.sln_ e contém diversos módulos. #### Startup Project O ponto de entrada do código é um middleware, no módulo _Gimba.UserInterface.WebMvc.Ecommerce.Customers_ (é este módulo que deve ser definido como _Startup Project_ no Visual Studio, para rodar o site localmente) chamado **SiteHandler**. Esse arquivo possui algumas regras de análise de parâmetros da URL, redirecionamento, busca de páginas, retorno de 404, etc. #### Controllers O módulo _Gimba.UserInterface.Web.Controllers.Ecommerce.Customers_ é responsável por construir o conteúdo mutável da página, por exemplo, em **ProdutosController** é montada a página de exibição de produto, e vários outros conteúdos relacionados, como as meta tags de divulgação do produto para twitter, os dados estruturados do produto, etc. #### Common Nos módulos _Gimba.Business.Ecommerce.Common_ e _Gimba.Entities.Ecommerce.Common_ encontra-se todo conteúdo "comum" (compartilhado) entre diversas partes do sistema. Nele existem regras de negócio e interação com o banco de dados. Sempre que algum arquivo do Common é modificado, é preciso re-buildar o módulo, para que seu produto compilado possa ser consumido por outros módulos e serviços. Existem variações do Common, como o _Gimba.Business.Ecommerce.Common.Sitemap.Service_ que é um módulo separado para o serviço de geração automatizada do sitemap, no servidor, o DLL gerado pela compilação desse módulo, é registrado como um serviço paralelo que roda em segundo plano, chamando o endpoint de geração do sitemap periodicamente. #### Resumo Site ![](https://i.imgur.com/pyZXoIE.png) ### Admin O código do admin utiliza a mesma versão do ASP.NET framework (4.5) e também consome os módulos common, juntamente com o site. #### Startup Project A camada de apresentação se encontra no módulo _Gimba.UserInterface.WebMvc.Ecommerce.Admin_. Dificilmente o código do admin será modificado, mas caso a necessite debugar algum comportamento, esse é o projeto que deve ser definido como "Startup Project" e aqui encontram-se todas as telas. #### Controllers O módulo _Gimba.UserInterface.Web.Controllers.Ecommerce.Admin_ possui os controllers que formam as páginas e consomem conteúdo do common, como busca de informações e salvamento. O admin será mais útil como um gerenciador de informações do site e é importante conhecer algumas responsabilidades principais do admin. O próximo capitulo vai apresentá-las e explicar sua interação com o site. ## Admin O [Admin](http://admin.gimba.com.br/) (como o próprio nome sugere) é um sistema administrativo, que se responsabiliza por várias funções, como: gerenciar conteúdo exibido no site, monitorar pedidos, cadastrar dados, criar promoções, anúncios, gerar relatórios, etc. Nossa principal preocupação no SEO vai ser o gerenciamento de conteúdo. ### Gerenciador de Conteúdo O [Gerenciador de Conteúdo](http://admin.gimba.com.br/gerenciadorconteudo/lista) do Admin tem uma funcionalidade interessante. Possívelmente vão existir situações em que você, estranhamente, não vai encontrar nos arquivos do projeto algumas porções de código que aparecem no HTML do site, quando inspecionado. Isso é porque esse código é gerenciado pelo Admin, no menu Gerenciador de Conteúdo. Por exemplo observe o título da categoria como é exibido no site: ![](https://i.imgur.com/D1qyIp8.png) Se você tentar procurar por toda base de código, por essa classe "tit_categoria", nenhum resultado vai aparecer (além de páginas de teste). Isso se deve ao fato de que essa porção do código é manipulada pelo Gerenciador de Conteúdo do Admin: ![](https://i.imgur.com/brHZALX.png) O Admin realiza o gerenciamento de conteúdo das seguintes porções do site: - [Categorias](http://admin.gimba.com.br/gerenciadorconteudo/lista) - [Header](http://admin.gimba.com.br/gerenciadorconteudocontroles/lista) - [Footer](http://admin.gimba.com.br/gerenciadorconteudocontroles/lista) - [Busca de cartuchos](http://admin.gimba.com.br/gerenciadorconteudocontroles/lista) - [Landing pages](http://admin.gimba.com.br/gerenciadorconteudo/lista) - [Conteúdo comemorativo](http://admin.gimba.com.br/gerenciadorconteudo/lista) (natal, páscoa, etc) ## Conclusão Com esse conteúdo foi possível visitar, desde conceitos básicos de SEO, até questões específicas de ecossistema e código do Gimba. Claro que existem muitas nuances e particularidades no exercício de desenvolvimento e aplicação de SEO que só vão ser notadas no decorrer da sua jornada, mas espero que essa documentação tenha lhe fornecido informações importantes, que possam ser consultadas sempre que necessário. No entanto essa conclusão não precisa significar o fim desse documento, qualquer nova informação que encontrar e julgar relevante, acione os responsáveis do marketing para colaborar com essa documentação e incrementá-la, tanto para consulta própria, quanto para integração futura de novos colegas de SEO! Muito obrigado!