Tableless » SEO

Bem vindo a Xangri-lá – Parte 2

Alysson Franklin — Mon, 06 Dec 2010 18:10:03 +0000

Uma vez familiares com a premissa do Progressive Enhancement, vamos entender como aplicar a abordagem para criar suas páginas do zero, garantindo que elas funcionem na maior aplitude de navegadores e dispositivos. Antes de começar, é importante lembrar que para tudo funcionar bem, você precisa conhecer as funcionalidades e limitações da especificacao HTML, seus elementos, tags, e atributos aprovados, isso esta disponivel no site do w3c. É importante tambem se manter no bleeding edge, para que novas linguagens (como o HTML5) não fiquem de fora de suas análises e ponderações. Um plus é você conhecer (ou pelo menos ter em mãos para referência) as especificacoes de CSS 2.1 e 3 disponiveis no w3c. Vale lembrar que CSS3 e HTML5 são assuntos novos e ainda não se tornaram especificação (ainda está no status de working draft), o que não nos impede de usar todo o poder já disponível para se criar aplicações online.

Analisando a aplicação: Um raio-x

As expectativas e considerações do cliente geram o design e a funcionalidade de sua aplicação. Mas como esse design deve funcionar nos mais diversos cenários é responsabilidade nossa. A primeira etapa é fazer um scan detalhado do que vai ser construido naquela etapa do processo. Se você recebeu wireframes que mostram como sua página deve ser visualizada em um monitores 4:3, 16:9 e mobile em telas paisagem e retrato você deve pegar estes 3 designs e sua estrutura básica de HTML para entender quais serão as partes em comum para a partir daí escrever o HTML.

Diferentes Wireframes para o mesmo design

O que está presente em todas as páginas? Como deve ser a semântica e a linearidade do HTML ponderando os wireframes desktop X mobile? Se a navegação (em amarelo escuro nos designs) fizer uso de um acordion, como o HTML mais básico deverá ser escrito, de modo que o design acima seja garantido para todos os dispositivos que vão acessar a página, independente de sua configuração? (isso seria válido para qualquer plugin na página)

Com um raio-x nos designs acima, veremos que o cabeçalho(em laranja), pesquisa(azul topo), navegacao (amarelo escuro com boxes), conteúdo (centro) e rodapé (azul fundo) são as partes presentes em todos os designs. Dá até pra assumir que o exemplo acima é o de um portal – se o usuário acessa de uma tela desktop wide, anúncios (amarelo claro) são mostrados. Se o cara acessa de um desktop, uma animação no cabecalho é mostrada.

As condições deste exemplo são simples – na vida real é sempre mais complexo – mas é assim que você deve montar a sua análise. Eu poderia por exemplo colocar os anúncios do wireframe 16:9 em um elemento

aside

sabendo de suas funcionalidades. A navegação poderia ser embarcada no elemento

nav

Você pode se perguntar: Mas o elemento

nav

aside

, nativos do HTML5 são novos e precisaremos de um

1	document.createElement()

para que ele renderize em navegadores sem suporte a linguagem. Não estamos misturando Graceful Degradation aqui, uma vez que estamos usando uma solução e depois corringindo “deficiências” da solução com um patch?

Sim, estamos usando princípios de Graceful Degradation para corrigir essa limitação do HTML5, mas como estamos no planejamento da aplicação, e ela ainda não está nem perto de ser codificada, a orientação geral continua sendo o Progressive Enhancement.

Os wireframes são intuitivos, e as regras muito claras. Para as páginas de conteúdo a única funcionalidade avançada existente está na navegação(um accordion) e no topo (um slideshow). Passando um plugin de um accordion em um raio-x, vemos que o HTML dele é semântico:

Sabemos que a manipulação que o jQuery faz não será disponível para dispositivos com javascript desabilitado. Como resolver então os níveis que devem ser ocultos em situações como essa? CSS

1	display:none/block;

A estrutura usual de slideshows é muito parecida com o accordion, e a solução provavelmente seria a mesma. E esta estrutura garante a mesma experiencia de navegação ao usuario, com javascript ou não.

Aplicando o Progressive Enhancement

Como você pode ver, os maiores segredos dessa abordagem é separar bem HTML, CSS e javascript de acordo com funcionalidades que podem ser renderizadas nos dispositivos que acessam sua página.

Tenha um documento HTML semântico e bem estruturado;
Mantenha sempre o layout separado do conteúdo (e mantenha as linhas que dividem essas áreas sempre muito bem visíveis)
Mantenha suas iterações avancadas em uma camada específica, tanto estilo como script, sempre atento as limitações de Usabilidade e Acessibilidade.

Evolução do código HTML e CSS em uma aplicação que usa PE para diferentes versões: Básica, Mobile, Desktop e Enhanced

As abordagens de Progressive Enhancement pedem um documento HTML muito bem estruturado e escalável, e a evolução de seu desenvolvimento é mostrado na primeira linha da visualização acima. Com um markup mais básico, podemos garantir a visualização em dispositivos primitivos, fazendo com que o propósito da aplicação seja garantido. Esse markup evolui para englobar as outras versões, e com o desenvolvimento CSS não é diferente. Linearizar o desenvolvimento desta maneira traz vários benefícios: pode garantir a entrega de releases a medida que o desenvolvimento caminha, mostrando a evolução do projeto para o cliente, mantem o time de testes (se existente) com uma carga de trabalho para detecção de erros, fazendo com que o período de homoogação seja menos doloroso na entrega do projeto, a lista cresce. Normalmente para a criação de um site ou aplicação, eu uso este diagrama de fluxo para garantir que o meu desenvolvimento vai ser o mais alinhado aos métodos de Progressive Enhancement possível. Cada uma das caixas em cinza tem várias sub-divisões que vou adicionando de acordo com a necessidade do projeto. Com ele consigo garantir um grande número de dispositivos com um pouco menos de trabalho la na frente adequando páginas aos mais diferentes tipos de dispositivo.

Eu coloco o desenvolvimento da versão mobile em primeiro, e este é um ponto de discordância com alguns amigos nos papos de bar – e de IM também. Considero mobile uma versão incipiente das informações que o usuário costuma encontrar em uma versão desktop. Posso confessar que esta é uma metodologia que foi desenvolvida adequada a uma certa realidade. Ela pode variar se seu workflow de desenvolvimento é direfente. Repito o que disse no post anterior – desenvolva, adote ou customize uma metodologia. A minha metodologia partiu do livro do Filament Group Designing with Progressive Enhancement, de artigos na web (alguns deles eu usei para montar a minha série de posts) e de análises da minha carga e tipo de trabalho.

Um exemplo? Se o seu design está sendo feito para interfaces mobile apenas, sabemos que as preocupações para engine de renderização e desktop somem, mas ainda sim teríamos uma versão básica, para aqueles navegadores dos celulares mais antigos, uma versão mobile, uma versão enhanced, e uma versão para print.

Separar a versão mobile de enhanced é apenas uma preocupação com a escalabilidade do código. Ainda não enfrentamos tantos problemas de interface em navegadores mobile, mas possivelmente iremos enfrentar. Não temos muitas aplicações que dependam de serviços de impressão, como o que temos no Dropbox. Mas ainda vamos ter. Uma aplicação mobile que gerencie os pedidos de qualquer negócio e precise gerar a impressão de uma nota de compra ainda não aparece com frequência no mercado para se desenvolver. Mas vai.

Percebem as águas que vamos navegar em breve? Os problemas que iremos ter que lidar, a complexidade que o desenvolvimento web vai requerer? Esse fluxograma é o que eu uso hoje no meu trabalho. Mas agora no final do ano ele vai ganhar um upgrade porque o iPad não está na jogada ainda quer entrar no bolo, afinal um design feito com uma palheta de cores mais viva pode ganhar com tom mais intenso, tirando maior proveito da tecnologia Retina do visor dos iPads (e dos iPhones também).

No próximo post irei continuar o assunto que abordei no meu primeiro artigo, discutir um Plano de Usabilidade e suas fases; vamos aplicá-las em uma empresa fictícia e após termos um “Plano de Governo”, voltaremos a Xangri-lá, para a última parte desta série de posts, fazendo um grande lab mostrando a implantação de um projeto web usando os conceitos de Progressive Enhancement. Namastê.

Referência

Posts Relacionados

Sections: elemento aside – Parte 3

Diego Eis — Wed, 13 Oct 2010 13:00:57 +0000

Engana-se se o você acha que o

aside

serve apenas para fazer “sidebars”. Lembre-se de outros blocos para utilizamos para expor algum tipo de informação referente ao assunto principal. Isso acontece muito em livros: dependendo do livro que você estiver lendo, como um livro técnico, ele pode ter caixas de informação durante todo o fluxo de texto do livro. Essas caixas normalmente servem para chamar sua atenção para alguma informação importante ou outras informações que agregarão mais ao conteúdo principal. O elemento

aside

fará esse papel quando se tratar de websites. Logo, tenha em mente: o elemento

aside

agrega mais informação ao conteúdo principal.

Algumas utilidades do

aside

: citações ou sidebars, agrupamento de publicidade, grupos e blocos de navegação e para qualquer outro conteúdo que é separado do conteúdo principal.

Dentro do

aside

você pode agregar por exemplo grupos de elementos nav, headers, sections e etc. Isso te permite fazer um menu lateral separando os grupos de informações:



Esportes

Fórmula 1
Futebol
Baskete
Voley



Política

Eleições 2010
Urna eletrônica
Candidatos

Note que não utilizamos nenhum

div

, pelo contrário, utilizamos apenas tags que trazem algum tipo de significado semântico. Neste exemplo, indicamos para o navegador, aplicação, sistema de busca – qualquer outra coisa que acessará nosso código – que aquele é bloco lateral, e que cada grupo de

nav

é referente um assunto.

O elemento

aside

pode ir também dentro de um elemento

article

como uma caixa de notação ou algo do genêro. Nesse caso, quando o usuário imprimir, você pode dar ênfase a esta caixa como se fosse um box de informação, como nos livros.

Posts Relacionados

Sections: seções do HTML5 – Parte 1

Diego Eis — Thu, 23 Sep 2010 12:37:41 +0000

A estrutura de um site é dividida em diversas seções. Cada seção representa uma fatia do layout e também representa um grupo de conteúdo. Cada um destes grupos tem seu assunto específico. Nas minhas aulas eu costumava apresentar estas seções como seções mestres ou seções principais. Normalmente para descrever em HTML estas seções, usávamos a tag

div

. O elemento

div

é um elemento genérico que serve para criar DIVISÕES. Estas divisões não tinham significado semântico nenhum, não levavam nenhum tipo de informação “extra”, mas a nível de formatação resolvia nosso problema. Nós agrupávamos o conteúdo das seções e conseguíamos distinguir cada seção nomeando os divs com CLASSES e IDs e assim formatávamos o código com CSS.

A nível de semântica ou seja, para entregar informação útil para o usuário, sistemas ou aplicações, estas seções não eram eficazes. Não havia como distinguir um cabeçalho de um rodaé. Não era possível diferenciá-los pelo nome porque cada desenvolvedor dava seu próprio nome para o elemento: alguns chamavam de header, outro cabeçalhos, outros testeira (acredite se quiser) e assim por diante. Por estes motivos que no HTML5 as seções ganharam mais significado.

Cada coisa em seu lugar

As novas seções também fazem divisões, mas além disso elas servem significado para o código. Neste novo cenário o

div

perdeu um pouco o foco e será utilizado em detalhes. Ele ficou bem mais genérico que antes. Essa é uma das razões que o

div

é coisa do passado. Abaixo veja uma breve descrição dos novos elementos de seção do HTML5:

HEADER: Define um grupo de títulos ou o cabeçalho de uma determinada seção.
FOOTER: Define o rodapé das seções ou da página.
NAV: Define um grupo ou bloco de links de navegação.
ASIDE: Define um elemento lateral que pode conter blocos de navegação (NAVs), citações e outras informações que costumamos colocar em uma sidebar.
ARTICLE: Define a área onde há um artigo, texto, redação, conteúdo e etc…
SECTION: Define um bloco ou um grupo de um assunto específico. É importante entender que a section agrupa diversos elementos que tenham relação entre si. Por exemplo, se há uma área no site que há links, conteúdo, imagens e etc de um assunto em comum, você agrupará esses elementos com uma section. Nesse caso, ele entrou no lugar daquele div que fazíamos para dividir grandes blocos de assuntos em comum.

E o div? Exemplo.

E onde entra o

div

? O Div servirá para agruparmos elementos dentro destes sections ou fazer outros detalhes que não precisam de significado semântico, apenas visual.
Imagine que exista uma section chamada NOTÍCIAS:

...

Dentro dessa

section

há 3 colunas de assuntos diversos ou randomizados que dividem as chamadas.



      ...
   

      ...
   

      ...

Suponha que cada uma colunas seja de um assunto diferente, por exemplo: Esporte, Política e Educação. Aí nesse caso não usaríamos

div

mas sim outras

sections



      ...
   

      ...
   

      ...

Você poderia utilizar DIVs com os IDs? Sim, claro. Mas lembre-se que o DIV é genérico, para os sistemas de busca, leitores de tela, aplicações e etc, os DIVs não indicam seções de conteúdo, mas o elemento

section

sim.

Há uma polêmica ainda com algumas ordens nas estruturas. No exemplo acima colocamos

sections

em vez de

divs

. Poderíamos ter colocado

article

dentro da

section

principal. Não vou entrar no que é mais certo ou no que é mais semântico porque neste contexto, ainda é subjetivo. Há alguns conceitos que iremos amadurecer durante um tempo. Contudo, temos que começar por algum lugar e claro, devemos estudar as melhores formas tanto para o projeto quanto para a semântica do código.

Você já deve ter lido isso aqui, mas lembre-se: semântica é o nome do jogo.

Posts Relacionados

SEO para iniciantes – O básico

Diego Eis — Mon, 15 Sep 2008 08:15:09 +0000

Se você não sabe por onde começar o trabalho de SEO, há alguns passos por onde você pode se aventurar até entender melhor todo o sistema. Os pontos à seguir são muito superficiais e nenhum garante que seu site ficará na primeira página. Mas a combinação de todos eles te garante uma base sólida para os pontos mais profundos do tratamento SEO.

Organizando as URLs

Coloque ordem na casa. Tenha um mapa do site com as URLs utilizadas em cada uma das páginas. Encontre as URLs antigas que mudaram e as que dão erro 404 (não encontrado). Mapeie todos esses endereços e utilize o .htaccess para colocar tudo em ordem novamente.
O Google tem o WebMaster Tools que pode te ajudar a descobrir quais URLs estão quebradas (404), quais o Robô do Google indexou e etc.

Pelo arquivo .htaccess, redirecione os endereços antigos e possíveis endereços que usuários costumam digitar errado para o endereço correto.
Prefira sempre URLs amigáveis. São fáceis de lembrar e o Google dá pontos para URLs com termos relevantes.

Essas são algumas ferramentas que podem lhe ajudar:

Estudo de palavras-chaves e termos importantes

Faça um estudo de palavras-chaves e termos importantes para o site. Para esse primeiro momento, você não precisa de um editor profissional para tratar do texto. Pergunte para usuários como eles chegaram até o site. Se chegaram por algum sistema de busca, pergunte pelo termo que ele utilizou. Selecione pessoas que não tem nada a ver com desenvolvimento e peça a elas para que façam uma busca no Google sobre o assunto que o site é relacionado. Essa é uma das melhores maneiras de saber quais as palavras mais importantes e que devem compor os textos do site.

Depois deste trabalho, você poderá espalhar as palavras-chaves títulos, parágrafos, em metatags, titles e alts das imagens.
O Google tem um sistema chamado AdWord Keyword Tool. Ele foi feito para pessoas que tem campanhas no sistema de AdWords do Google possam encontrar palavras chaves mais relevantes e possam compor sua cartilha de anúncios. Mas o AdWord Keyword Tool pode ser usado para a escolha de palavras e termos relevantes para a composição dos textos do site. Neste sistema ele mostra a quantidade de buscas pela palavra e a popularidade da palavra entre os concorrentes.

Titles e Metatags

É importante que cada uma das páginas do site tenha um Title e Metatags Descriptions diferentes. Isso traz mais relevância às páginas e aumenta o alcance dos termos e palavras chaves. Tente fazer uma descrição e títulos relativos ao assunto abordado na página.

Se você não utiliza um CMS (muito aconselhável), tente fazer um gerenciamento de metatags com seu programador. É extremamente importante que você consiga facilmente modificar as metatags do seu site.

Textos e Títulos

O designer que criou o layout pode prever lugares para Títulos, sub-títulos e parágrafos. Essa forma é uma boa maneira para dar mais relevância aos termos mais importantes do site. Lembre-se de cuidar do código dos títulos e parágrafos com carinho. Não substitua a tag P por spans ou qualquer outra tag. A tag P indica para os sistemas que aquelo bloco é um texto, e faz parte de uma redação. Colocando qualquer outra tag para marcar parágrafos ou títulos, você não estará dando a importância necessárias para os sistemas de busca e faltará com acessibilidade, o que pode ser muito pior para o seu público.

Nunca repita demasiadamente níveis de títulos. Se você rechear seu código apenas com um tipo de título, por exemplo, H2. Você não estará dizendo ao buscador qual informação é mais importante. Ele entenderá que você está tentando dizer que todos os títulos tem a mesma importância, o que, obviamente, é mentira. Ele não conseguirá distinguir qual conteúdo é mais relevante e não pontuará bem seu site. Por isso, mescle os títulos. E classifique-os com as tags de acordo com a sua importância em relação ao texto.

Estas são apenas alguns passos simples que você mesmo pode controlar e monitorar. Como disse no começo, deixar tudo isso em ordem não quer dizer que você irá ficar em primeiro, seu concorrente pode ter feito isso antes de você e pode ter feito melhor. Por isso, há todo um trabalho que você precisa fazer para que os resultados sejam sempre mais efetivos e duradouros.

Posts Relacionados

Anotações sobre SEO

Diego Eis — Mon, 08 Sep 2008 08:00:42 +0000

SEO é um assunto bastante interessante porque gira em torno de boatos, mitos e suposições. Na verdade, sabemos pouca coisa sobre o que ajuda ou não na boa colocação dos sites nos sistemas de busca. O engraçado é que esse mistério todo é levantado pelos próprios buscadores. Isso é necessário, sem dúvida. Imagine se qualquer pessoa pudessem fazer dinheiro. A situação é a mesma. Por isso, os buscadores, principalmente o Google, tem seus segredos e divulga apenas o necessário para que possamos fazer um bom trabalho.

O trabalho de SEO hoje é um pouco mais complexo do que 5 anos atrás, quando os Padrões Web começaram a ganhar força aqui no Brasil. Teve uma época em que era fácil fazer um site ficar em primeiro na busca orgânica do Google, bastava apenas retirar as tabelas da estrutura do site e utilizar as tags da maneira correta. Tive experiências de ter apenas convertido o código do site para Tableless (XHTML e CSS), e sem muito trabalho o site apareceu em primeiro lugar.
Hoje não é tão fácil assim. O diferencial naquele tempo era o código limpo, semântico e legível. Atualmente qualquer site tem o código feito com CSS e um XHTML relativamente legível. Isso fez com que profissionais encontrassem outras maneiras de colocar os sites em lugares privilegiados nas buscas.
Agora, é necessário que façamos muito além do que apenas uma mudança no código fonte. Há trabalho de textos, escolha, pesquisa e monitoramento de palavras chaves, relevância do texto, semântica dos elementos, cuidados com conteúdo duplicado, entre outros pontos importantes. Esses pontos devem ser combinados para que o resultado seja mais interessante.

O trabalho de SEO é um trabalho feito por partes. Para que ele seja efetivo e tenha resultados duradouros, há uma série de passos que devem ser seguidos, que vão desde a estruturação do código até a criação de campanhas para levantar links relevantes apontando para o site. É um trabalho que leva tempo para que os resultados se tornem interessantes e que estimulem o cliente. Por isso é interessante informar ao cliente na hora da contratação do serviço, que resultados satisfatórios podem demorar para chegar. Dependendo do mercado que o cliente atua, pode levar semanas ou meses. Mesmo assim, relatórios semanais ou mensais são importantes para o cliente esteja ciente da evolução do seu investimento e possa decidir se quer ou não continuar com o trabalho. Dar um prazo de no mínimo três meses é algo que pode ser seguro para o profissional. Assim, há bastante tempo para que as alterações possam ser feitas e os robôs possam absorver toda a informação modificada e atualizar o ranking do site.

Há alguns pontos que podemos controlar e que são básicos para o início do trabalho de SEO:

Otimização de código fonte
Estudo e estrutura de palavras-chaves e termos importantes
Links externos para o site
Idade da página
Criação do Sitemaps.xml
.HTACCESS atualizado

Normalmente a otimização do código fonte e o estudo e edição de palavras e termos podem ser feitos por terceiros ou pelos próprios integrantes da equipe de desenvolvimento. Mesmo assim, para o trabalho com texto, é aconselhável contratar um editor.

Os links externos podem ser conseguidos a partir de campanhas online. Há trabalhos e parcerias que podem ser feitos com sites de terceiros, em comunidades e até mesmo blogueiros. A idéia é que seu site tenha conteúdo relevante e seja linkado em outro sites com relevância interessante e que o raking seja significativo. Isso também leva tempo e pode ser difícil dependendo do mercado que o cliente atua.

A idade da página é outro ponto importante. Não se deve modificar URLs regularmente. O endereço de cada página é único e nada pode ser perdido. Se a URL deve ser modificada, o endereço antigo deve ser redirecionado para o endereço mais atual. Muitos CMS como o WordPress já vem munidos de permalinks e URLs amigáveis. Divulgar sempre um mesmo endereço é algo importante e não deve passar despercebido.

A criação de um Sitemap.xml é importante para manter os buscadores atualizados sobre a relevância das páginas do seu site e regularidade de atualização. O WordPress tem plugins que fazem o Sitemap.xml específico para seu site e o mantem atualizado.

O .htaccess vai servir para o controle de endereços antigos e redirecionamento para os endereços mais atuais. Atenção: cuidado para que o .htaccess tenha redirecionamentos demais. Isso pode prejudicar o trabalho dos buscadores e algumas de suas páginas podem não ser redirecionadas corretamente.

Posts Relacionados

White, Gray e Black Hats

Diego Eis — Mon, 14 Jul 2008 09:00:03 +0000

Existem várias técnicas para colocar seu site em primeiro nos buscadores. As técnicas de SEO se encaixam em três grandes árvores: White Hat (chapéu branco) que são as legais e recomendadas pelos buscadores. Gray Hat, que se utilizadas de forma abusiva são consideradas anti-éticas, embora os buscadores não tenham controle sobre sua prática. Há outras técnicas totalmente ilegais, utilizadas para ter alguma vantagem rápida ou burlar os resultados das buscas. Essas técnicas ilegais são chamadas de Black Hat.

White Hat

São técnicas recomendadas pelos buscadores e podem ser utilizadas sem problemas. Os buscadores conseguem controlá-las e saber se você está quebrando as regras ou está tudo nos conformes.
Duas técnicas de White Hat são: Links internos e criação de conteúdo.

Links internos são links do seu site que apontam para páginas internas do seu próprio site. Um exemplo é o seu menu. Muito sites utilizam javascript ou flash para criar menus e isso pode prejudicar a posição no ranking, os buscadores utilizam seus links internos para navegar e indexar o seu conteúdo.

A criação de conteúdo é uma boa tática para gerar visitação e links em outros sites. Quando recomendamos a criação de conteúdo, não queremos dizer a criação de posts ou páginas em seu site com conteúdo redundante ou sobre qualquer assunto, pelo contrário, é a criação de conteúdo com qualidade, que gere discussão, comentários, seja útil para seu visitante e possa agregar algum valor.

A otimização do site para os buscadores também é uma técnica White Hat. A manipulação de conteúdo, colocação de links estratégicos e estudo de palavras chaves são táticas bem vindas que ajudam o visitante a encontrar a informação. Há uma série de detalhes, como metatags de descrição e keywords, que podem ajudar a ter um bom ranking, basta atentar aos detalhes.

Gray Hat

São técnicas que os buscadores não aprovam, mas não são proibidas, entretanto são consideradas anti-éticas. Mesmo assim, os buscadores não tem como detectá-las. Dois bons exemplos: comprar links e conteúdo duplicado.

Comprar links é algo normal. Você pode comprar um lugarzinho em vários sites, colocar seu banner ou apenas o seu link, isso vai aumentar sua visitação e com esse grande número de links apontando para seu site, conseqüentemente seu pagerank pode aumentar também.

Conteúdo publicado: com a popularidade dos programas de afiliados, o conteúdo duplicado cresceu bastante. Imagine vários sites colocando informações similares ou iguais sobre um determinado produto, com links para um mesmo site. O que poderia ser feito pelos buscadores seria punir sites com o conteúdo similar e simplesmente excluir as páginas com conteúdo idêntico. Essa pode ser uma decisão ruim e é uma tarefa difícil. O usuário de boa fé, que fez apenas para ganhar seu dinheiro pode ser punido simplesmente porque pegou o texto padrão de explicação do produto no site e colou em seu blog, como normalmente acontece.

Podemos dizer que essas técnicas são furos na lei. Você pode fazer, não há como os buscadores, sozinhos, descobrirem e punirem. Mesmo assim, seu concorrente pode denunciá-lo ao buscador, que vai investigar antes de punir seu site. Isso pode ser ruim para você, mas é bom para os buscadores e para os usuários que tem apenas resultados reais.

Black Hat

São técnicas ilegais, utilizadas para tentar burlar o algoritmo dos buscadores para que seu site possa aparecer em primeiro lugar. São totalmente repudiadas pelos buscadores e seu site pode ser excluído dos resultados por conta delas. Não as recomendamos, e se você por um acaso estiver praticando alguma, sugerimos que pare e revise seu site. Algumas são: Excesso de Keywords e texto escondido.

Excesso de Keywords é provavelmente a tática mais comum. Normalmente o desenvolvedor escolhe as palavras chaves e coloca-as na página com uma letra muito pequena no rodapé, na esperança de o buscador indexar essas palavras e encontrar alguma relevância para elevar o ranking do site.

Os textos escondidos normalmente tem a mesma cor do background. Os buscadores conseguem detectar facilmente texto com a mesma cor do background, portanto é uma tática altamente arriscada, sem contar que os concorrentes podem denunciar seu site, ato mais do que correto.

Tente ficar entre as técnicas de White e Gray Hat. Gray Hat ainda podem ser dispensáveis, e há muita gente que utiliza para sacanear o concorrente. Isso dificulta também os resultados de busca, trazendo resultados que podem não ajudar o visitante. É ruim para todos.

Posts Relacionados

SEO – Sitemaps

Diego Eis — Wed, 02 Jul 2008 15:47:23 +0000

O Sitemaps é um formato simples de XML que serve para informar aos sistemas de buscas sobre seus endereços disponíveis para indexação. Esse XML relaciona as URLs existentes do seu site, com algumas informações como data da última atualização, prioridade da página em relação às outras páginas e freqüencia de atualização.

O sitemap.xml é um arquivo que pode ser gerado automaticamente por um plugin ou até mesmo escrito à mão pelo desenvolvedor.

O código básico do Sitemap:

1
2
3
4
5
6
7
8
9

version="1.0" encoding="UTF-8"?>
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
>
>http://www.example.com/>
> >2005-01-01>>
> >monthly>
>0.8>>
>
>

As tags que podem ser inseridas no sitemap.xml são essas:

Executa o encapsulamento do arquivo e faz referência ao padrão de protocolo atual.

Tag pai de cada entrada de URL. O restante das tags são as tags filhas dessa tag.

URL da página. Esse URL deve começar com um protocolo (como http) e terminar com
uma barra final, caso seja exigido pelo seu servidor. Esse valor deve conter menos
de 2.048 caracteres.

A data da última modificação do arquivo. Essa data deve estar no formato de
data e hora do W3C. Esse formato permite omitir o horário, se desejar, e
usar AAAA-MM-DD.

Lembre-se de que esta tag é separada do cabeçalho If-Modified-Since (304) que o servidor pode retornar, e os mecanismos de pesquisa podem usar as informações de ambas as fontes de forma diferente.

A freqüência com que a página é alterada. Esse valor fornece informações gerais para os mecanismos de pesquisa e pode ser que ele não corresponda exatamente à freqüência de indexação da página. Os valores válidos são:

always
hourly
daily
weekly
monthly
anual
never

O valor “always” deve ser usado para descrever os documentos que sempre são alterados quando acessados. O valor “never” deve ser usado para descrever os URLs arquivados. Observe que o valor dessa tag é considerado uma dica e não um comando. Mesmo que os indexadores de mecanismo de pesquisa possam considerar essas informações ao tomar decisões, pode ser que indexem as páginas marcadas como “horárias” com menos freqüência do que isso e talvez façam a indexação de páginas marcadas como “anualmente” com mais freqüência do que isso. Os indexadores podem indexar páginas marcadas como “nunca” periodicamente, para que possam lidar com alterações inesperadas
nessas páginas.

A prioridade desse URL em relação a outros URLs do mesmo site. Os valores válidos vão de 0.0 a 1.0. Esse valor não afeta o modo como as páginas são comparadas às páginas em outros sites — apenas permite que os mecanismos de pesquisa saibam quais páginas você considera mais importantes para os indexadores.

A prioridade padrão de uma página é 0,5.
Observe que não é provável que a prioridade atribuída a uma página influencie a posição dos URLs nas páginas de resultados de um mecanismo de pesquisa. Os mecanismos de pesquisa podem usar essas informações quando selecionam entre URLs no mesmo site. Use essa tag para aumentar a probabilidade de a maioria das páginas importantes estarem presentes em um índice de pesquisa.

Além disso, observe que a atribuição de uma prioridade alta a todos os URLs no site provavelmente não o ajudará. Como a prioridade é relativa, ela só é usada para priorizar os URLs do seu site.

Tabela retirada do sitemaps.org

Local dos arquivos sitemaps.xml

É importante saber que o local que o sitemap.xml é colocado determina o quais urls podem ser colocadas no arquivo. Exemplo: fiz um sitemap.xml para o site de treinamentos da Visie cuja URL é visie.com.br/treinamento. No meu sitemap.xml apenas poderá haver URLs que comecem com visie.com.br/treinamento e não apenas visie.com.br.

Todas as URLs que estão no Sitemap precisam utilizar o mesmo protocolo – no exemplo da Visie estou utilizando o HTTP – e precisam estar no mesmo host que o Sitemap. Por exmeplo, se o Sitemap estiver localizado em: visie.com.br/treinamento/sitemap.xml, ele não pode incluir URLs de um subdominio.visie.com.br.

Informando os buscadores que seu sitemap.xml existe

Há duas maneiras fáceis para avisar aos sistemas de busca que seu sitemap.xml está disponível:

Enviando o seu Sitemap por meio da interface de envio do mecanismo de pesquisa
Especificando a localização do Sitemap no seu arquivo robots.txt

Enviando o seu Sitemap por meio da interface de envio do mecanismo de pesquisa. O Google tem um local muito interessante onde além de informar o endereço do seu sitemap.xml você pode ter uma série de outras informações importantes para seu site, é o Google Webmaster Tools.

Especificando a localização do Sitemap no seu arquivo robots.txt. Para indicar o sitemap.xml pelo robots.txt basta acrescentar essa linha: Sitemap:

Se você quiser, você pode colocar vários endereços de Sitemaps, bastando inserir várias linhas como as de cima indicando os endereços dos respectivos sitemaps.

Ter um sitemap.xml não garante que você uma URL seja ou não mais indexada que as outras. Mesmo assim, é um adendo para que os buscadores fiquem mais informados com os endereços do seu site. Se você não utiliza nenhum plugin para que o sitemap.xml seja gerado automaticamente, fique atento às atualizações das URLs. Você pode estar informando aos buscadores URLs antigas e isso pode afetar nos resultados organicos com o do Google. Se você quiser testar alguns plugins ou programas para gerar seu sitemap.xml automaticamente, visite este link.

Posts Relacionados

Descontos no DreamHost – para serviços anuais e mensais

Diego Eis — Wed, 04 Jan 2006 23:39:29 +0000

Atenção: Se tiver problemas com o pagamento por ser necessário o Google Checkout, leia as instruções aqui:
Pagando o Dreamhost com Google Checkout mesmo sendo brasileiro e outras informações aqui.

Eu uso Dreamhost a muito tempo. Quase nunca tenho problemas (você já viu este site fora do ar?). Ele tem ferramentas úteis como WordPress ou PHPBB que são facilmente instaláveis com apenas 1 clique. Fazer atualização destes sistemas também é tão fácil quanto instalá-los.

Algumas vantagens:

No Dreamhost você também pode criar domínios e subdomínios ilimitados. Isso é bom para quem quiser hospedar sites de clientes, amigos e etc;
Painel de controle simple e bonito;
Você pode criar uma conta FTP individual para cada domínio hospedado;
Além do FTP, você tem acesso o servidor via SSH;
O plano mais básico do Dreamhost te dá 200 Gigas de espaço e 2 Teras de transferência mensal.
Você pode ter mais de 3000 contas de email para cada domínio hospedado… e isso no plano básico!
Fora painel de controle, instalações com um clique, Ruby on Rails, PHP nas versões 4 e 5 e MySQL, Streamming Quicktime, Aliases de e-mails ilimitados e muito mais.
Você ganha um domínio .com/.net/.org graça
E depois que virar cliente, você ainda pode ganhar uns trocados com o programa de afiliados que eles tem. É só indicar assim como fazemos aqui. Se quiser, pode copiar as informações descritas nesta página.

No Wiki do Dreamhost tem mais detalhes e repostas de alguma dúvida que você possa ter.

Com o Tableless você ganha 3 tipos de descontos no Dreamhost, abaixo veja as descrições e passos para o cadastro:

Com o cupom de desconto TABLELESS você consegue:
25% de desconto no L1 Anual: de $119.40 você paga $89.65
15% no L2 Anual: de $239.40 você paga $203.49

Se você preferir uma conta mensal no Dreamhost, também damos desconto, use o cupom TABLEBLESSMENSAL e ganhe $39,90 de desconto em todos os planos mensais do Dreamhost.
Mensal L1 de $59,90 você paga $20,00.
Mensal L2 de $69,90 você paga $30,00.
Mensal L3 de $89,90 você paga $50,00.

E tem também o cupom TABLELESS6007, onde você ganha 60% de desconto nos planos:
Mensal L1 de $59,90 você paga $24,96.
Anual L1 de $119,40 você paga $47,76 por um ano!
Mensal L2 de $69,90 você paga só $27,96.
Mensal L3 de $89,90 você paga $35,96.

E tem também o TABLELESS2 onde você ganha $40,00 de desconto em qualquer plano do Dreamhost. Só colocar TABLELESS2 na hora de comprar qualquer plano e você ganha $40,00 de desconto no ato.

Para poder ganhar desconto ao assinar algum plano de hospedagem na Dreamhost, siga os seguintes passos:

Escolha o plano que gostar mais;
Clique no botão “SIGN UP NOW” do respectivo plano;
Na seguinte página, você escolhe o nível do plano que você gostaria de ter;
Na mesma página, você escolhe se quer receber comissões por indicações;
Logo após, selecione as opções de domínio, se você não tiver domínio ainda, preencha os dados referentes ao seu domínio, conta de usuário, email e seus dados pessoais. Se já tiver, é só selecionar dizendo que já tem um domínio;
No último campo, intitulado “Promo Code or email of who referred you:“, digite um dos cupons do Tableless: TABLELESS, TABLELESSMENSAL ou TABLELESS60;
Clique em I agree to abide by DreamHost’s Terms of Service and Anti-Spam Policy.
E para finalizar clique no botão “Continue to secure payment…”;
Cheque o valor. Ele já deve estar com o desconto aplicado;
Preencha os dados do seu cartão de crédito (tem que ser internacional ou via paypal) e finalize a compra;

Pagando pelo GoogleChekout é fácil:

Por causa de fraudes que estavam ocorrendo o Dreamhost está passando a utilizar o GoogleCheckout como forma de pagamento. Para ter uma conta no GoogleCheckout, você precisa apenas já ter ou criar uma conta no Google (GMail).

Para usar o GoogleCheckout no Dreamhost, siga os passos abaixo:

Ao se cadastrar, no país escolha BAHAMAS. Isso porque você não precisará colocar CEP.
Preencha o restante dos dados normalmente.
Quando chegar em SHIP MY ORDER TO, selecione a opção A DIFFERENT ADDRESS, e agora sim, selecione BRAZIL como seu país. Depois, preencha seu endereço.
Clique em AGREE e CONTINUE e pronto!

Assine o DreamHost pelo Tableless e saia do sufoco.