Bonsai UX
Bonsai UX

UI, Design e User Experience de um ponto de vista zen

Share


Our Newsletter


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tags


avrt

Twitter


Bonsai UX

SEO: Guia Prático

Poe BellentaniPoe Bellentani

Para ser utilizado como referência para frontend e como guia para implementação de sistemas.

Nos últimos anos sempre aparecem os mesmos problemas com relação ao SEO básico de sites. O que a gente, como Desenvolvedor Frontend, pode fazer é lembrar sempre de colocar em nossos códigos uma lista de elementos básicos - e que estão sempre em constante mudança.

Este documento centraliza informações sobre estrutura de metatags e requisitos essenciais de SEO que devem fazer parte de todas as páginas HTML criadas.

É um levantamento dos itens obrigatórios para projetos pensando em um bom desempenho em sistemas de busca, bem como aumento de engajamento dos conteúdos através de redes sociais como o Facebook e Twitter.

Existem diversos links referência por todo o documento que levam para as fontes das informações aqui contidas, permitindo aprofundamento nos assuntos tratados.

Lembrando que existe uma ecologia toda para melhorar o SEO do seu site, um bom código HTML é apenas uma parte dele, mas é a primeira etapa do processo técnico.

Formatação ideal

Abaixo segue um exemplo de preenchimento com todos os elementos mencionados nesse documento. Ele pode ser utilizado como modelo sempre que uma página for gerada.

Vale lembrar que em alguns casos muitas dessas tags não são aplicáveis ou sofrem modificações de acordo com o contexto. Se é seu primeiro contato com esse assunto, é importantíssimo que o leia todos os posts para entender cada uma das particularidades envolvidas na composição desse cabeçalho <head>.

Código de Exemplo

<!doctype html>

<html itemscope itemtype="http://schema.org/Organization" lang="pt-br">

<head>

<meta charset="utf-8" />
<link rel="canonical" href='http://www.vm2.com.br/noticias' />
<meta itemprop="name" content="Poe Bellentani">
<meta itemprop="description" content="Descrição entra aqui e é a mesma que estará na metatag DESCRIPTION.">
<meta itemprop="image" content="http://bonsaiux.com.br/content/images/bonsaiux.jpg">

<!-- Metatags gerais --> 
<META name="description" content="A descrição entra aqui.">
<title>Entra o título do site</title>
<META name="keywords" content="a, list, of, keywords">

<!-- Metatags opcionais --> 
<META name="copyright" content="copyright statement">
<META name="revisit-after" content="7 days">
<META name="author" content="Nome do Autor">

<!-- Twitter Card --> 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ocoelhobranc" />
<meta name="twitter:title" content="Bonsai UX" />
<meta name="twitter:description" content="UI Design e User Experience de um ponto de vista zen" />
<meta name="twitter:image" content="http://bonsaiux.com.br/content/images/2015/03/startup-593328.jpg" />
<meta name="twitter:url" content="http://bonsaiux.com.br/" />

<!-- Facebook Open Graph --> 
<meta property="og:title" content="Aprenda a usar SEO para o Facebook, até 65 caracteres é o ideal" />
<meta property="og:site_name" content="Bonsai UX" />
<meta property="og:url" content="http://bonsaiux.com.br/blog" />
<meta property="og:description" content="Uma descrição detalhada do conteúdo, o ideal é que seja 2 ou 4 sentenças, com uma limitação de caracteres até 160." />
<meta property="og:image" content="http://bonsaiux.com.br/content/images/2015/03/startup-593328.jpg" />

<!-- se aplicável -->
<meta property="app_id" content="298758683566729" />

<!-- tags opcionais -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="pt_BR" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="article:author" content="https://www.facebook.com/fareedzakaria" />
<meta property="article:publisher" content="https://www.facebook.com/cnn" />

<!-- fav icon / touch icon -->
<link rel="shortcut icon"  href="/img/favicon.ico" />
<link rel="apple-touch-icon" href="/img/apple-touch-icon-precomposed.png">

</head>

Uma síntese

Podemos dizer que as metatags se dividem em 4 grandes grupos, ordenados por ondem de importância dentro de sua estratégia de SEO:

Existe uma infinidade de outras tags, mas nesse documento vamos cobrir as realmente relevantes. O resto delas já está ultrapassada ou não influenciam o ranking de SEO, para melhorar a sua situação nos sistemas de busca vale a pena estudar sobre microdata, semântica HTML e estratégias de redação web.


Demais posts dessa série:

Comments