Passo a Passo Para a Otimização de Sites Estáticos em Construção Apresento a seguir os passos para você otimizar o seu
site estático em construção e ter chance de visibilidade na Internet. Antes, porém, faço as seguintes observações: | |
| |
| |
12 Passos Para a OtimizaçãoNo construtor de sites você será instado a colocar coisas na parte visível e na parte invisível do site. A parte invisivel é onde fica o código-fonte em HTML A parte visível é a que aparece na tela. Você colocará ainda coisas na primeira página, também chamada de home ou página inicial ou página index. Colocará coisas nas outras páginas, também chamadas de páginas internas. Para fins didáticos, vamos dividir cada página em duas partes: cabeça e corpo. A cabeça vem com o nome head e o corpo vem com o nome body. Veja o esqueleto (sem preenchimento algum) de um código-fonte de html; mas você não precisa entendê-lo - serve apenas para dar uma idéia dos lugares onde seus dados estarão entrando. Elementos da cabeça no código-fonte: Primeiro passo: Fazer o Título Web da Home ou Página Inicial Este é o título que vai aparecer na página inicial do seu site quando ela for exibida numa busca na Internet. É a parte mais importante do seu site. Em geral os modelos de construção de sites veem com alguns dados antes da cabeça, tais como versão do html usada e o código <HTML>. Em seguida vem a <head>. Head é cabeça, ou seja, a cabeça da página. Seja como for, quando pedirem para colocar o título na sua página inicial, o que você escrever será lançado em <title>. 1. Título – Também chamado de título web, é representado pelo código <title>. Come preencher o título – Vamos considerar a home incialmente. O título deve expressar o conteúdo da home e o tema do site. Ele vai ser a primeira indicação usada para que suas páginas sejam posicionadas. Por isso o título da home é o mais importante de todos. Ele deve ser feito com muito cuidado. . -- Colocar as palavras chaves principais do site. Se seu site trata, por exemplo de "Equipamento de Jardinagem", é conveniente que o título comece com Equipamentos de Jardinagem - Equipamentos e Jardinagem são suas principais palavras-chave. Não se preocupe em colocar todas as palavras-chave aqui. Você poderá ter tantas páginas internas quanto for necessário para colocar as outras. Evite vírgulas – se tiver de colocar, limite a duas vírgulas. No lugar de outras vírgulas use travessões ou barras verticais ou nada. -- É conveniente otimizar a home para uma frase-chave que traduza bem o tema do site. Pode-se acrescentar outras palavras, mas não é conveniente. Não há necessidade de ficar repetindo palavras. Dê preferência ao plural. -- Limite o número de caracteres de tudo o que colocar nesta tag a no máximo 67, incluindo-se os espaços. Você pode colocar mais de 67 caracteres e as palavras excedentes serão contadas na página de resultados da busca, mas não serão exibidas ao usuário e isso pode atrapalhar. Uma boa maneira de fazer essa contagem é copiar o título que escreveu, colar no Word e contar os caracteres (colunas); a contagem começa pela coluna dois, logo você pode ir a 68 caractere no máximo (que na verdade são 67). Nessa faixa de caracteres você pode fazer ajustes, mudanças nas palavras que compóem o título. e é claro, o título pode ter um número menor de caracteres. . -- Se você tiver duas ou mais palavras-chave, coloque a principal palavra-chave ou frase-chave do site em primeiro lugar. -- Não se preocupe em formar frase completa. Se o espaço de 67 caracteres comportar frases, ótimo; se não comportar, não vai fazer diferença na otimização se ficarem apenas as palavras ao invés de frases. Entretanto, na medida do possível, coloque as palavras numa ordem que exiba alguma coerência. -- Evite usar palavras maiúsculas porque isso atrapalha a leitura. -- Se tiver de repetir alguma palavra, limite a duas – três podem ser consideradas spam. -- O código </title> fecha essa tag; logo ela ficará assim: <title>palavras</title> No esqueleto acima iria aparecer na Internet o título: Documento Sem Título Segundo Passo: Fazer a Descrição da Home - essa descrição tem o nome de meta descrição, e como todas as partes dele, vem em inglês e que no caso é meta description. 2. Meta descrição (que aparece como meta description) – Veja como exemplo a meta descrição desta página: <meta name="description" content="Faça a otimização de sites estáticos que estão em construção seguindo este passo a passo."> -- O limite de caracteres para essa meta é 150. -- Inserir na meta descrição as palavras-chave que aparecem no <title>. -- Repetições de palavras-chave não mudam nada. -- Evite meta descrição muito curta. -- Procure colocar as palavras-chave mais no começo desta meta. -- Faça, com os 150 caracteres, uma ou duas frases com sentido. Terceiro Passo: Fazer a Meta Palavra-chave da Home 3. Meta palavra-chave (que aparece como meta keyword) – Veja o exemplo desta página: <meta name="Keywords" content="otimização, sites estáticos, construção"> -- Não é necessário colocar mais de três ou quatro palavras porque os grandes mecanismos de busca praticamente não indexam mais essa meta tag. (Se ficar em branco não vai fazer falta alguma). Quarto Passo: Fazer a Meta Robot da Home 4. Meta robot – (que aparece como <meta name="robots" content=""> Não se trata de um robot mas de um arquivo onde são colocadas restrições ao acesso de robots. Num site comum, em geral não há restrição a ser colocada nessa meta tag. Por isso, e em tais condições, ela pode ficar em branco, sem nada escrito, nem mesmo o segmento acima. Sua ausência significa que a página está aberta ao acesso de todos os robots. 5. Arquivo css – Este é um caso um pouco mais complexo e será explicado mais à frente, e que poucos construtores de sites disponibilizam. Antecipo apenas que o css é um script que pode ter varios graus de complexidade, mas na maioria das vezes é muito simples. Ele tem por objetivo armazenar instruções para a composição do layout e textos das páginas e fornecê-los quando solicitado. Para sites pequenos essas instruções podem ficar localizadas dentro da página, no campo das meta tags. Entretatno, as mudança ocorridas no Google em janeiro/2010 apontam para as conveniências de seu uso fora das páginas, em qualquer circunstância. Quinto Passo: Fechar a Tag Head da Home 6. Fechamento do head com o código </head>. Uma vez que se abriu a tag <head>, ao terminar a colocação de seus componentes ela deve ser fechada. Outras coisas podem e devem ser colocadas dentro do head, mas muitas pessoas colocam coisas desnecessárias e que não têm efeito algum. Por exemplo, uma meta de revisita diária do robot à página ou semanalmente ou quinzenalmente. Isso é bobagem. O robot vai visitar a página quando os programas dos centros que processam os dados julgarem conveniente. Você pode colocar um dia e ele levar 365 dias. Instruções como essa são indicações de que a pessoa é amadora no conhecimento do funcionamento dos robots e programas dos bancos de dados dos mecanismos de busca. Elementos do corpo da página: Sexto Passo: Iniciar Corpo da Home 7. Body – Agora que fechamos a cabeça da página, vamos ao corpo, designado por <body>. O corpo é onde ficam as coisas que aparecem na tela. Portanto é onde ficam as tabelas e/ou outras instruções que vão controlar o layout da página. O corpo é geralmente dividido em topo, meio ou miolo e rodapé. No código <body> podemos colocar algumas insruções. Por exemplo, se queremos o fundo do site na cor branca, o código <body>, que abre o corpo da página, ficará assim: <body bgcolor="#FFFFFF"> Sétimo Passo: Desenvolver Topo do Corpo da Home 8. Topo – É a primeiro coisa que o usuário vê quando entra na página. É também a primeira coisa que o robot encontra quando entra no corpo. Ele deve começar com a palavra-chave principal. É como se dissessemos ao robot que chega: o assunto aqui é este. Então nós estamos dando prosseguimento à diretriz do tema do site já colocado no <title> e meta descrição. Essa informação aos roots pode ser num texto normal, dentro de uma imagem ou simplesmente o link da home do site, se o domínio for composto pela palavra-chave principal. Depois colocamos alguma imagem ou um flash ou algum banner ou mensagem ou um menu completo ou parcial ou uma combinação dessas coisas. É importantíssimo que o topo tenha algo que atraia a atenção do visitante. É para ali que convergem os seus olhos em primeiro lugar e, dependendo do que vê, ele fica inclinado a examinar o restante da página. Se não se sente atraído, ele sai, vai embora. A palavra-chave no começo, tal como disse no parágrafo anterior, pode ficar inserida no design do topo. Por que o topo é importantíssimo na otimização? Porque o Google está inserindo no seu conjunto de critérios para posicionar um site, a rejeição ao site. Considera-se rejeição quando o visitante fica menos de 10 segundos no site. Este é o tempo para saber se o que o visitante viu é interessante ou não. Se ele vai embora dentro desse tempo, o Google considera que houve rejeição ao site. Portanto, além da sua importância como marketing tem também importãncia na otimização. Oitavo Passo: Desenvolver Miolo do Corpo da Home 9. Miolo – O miolo é onde colocamos o conteúdo propriamente dito. É recomendável que ele tenha duas partes principais: uma coluna lateral esquerda, onde vai o menu, e uma parte central. Coluna à direita são pouco produtivas porque os olhos do visitante raramente chegam lá durante a primeira inspeção. O olhar do vistante, depois de passar pelo topo, segue pelo menu da esquerda por onde passa rapidamente e depois se vira para o centro da página. Ele vê o título da página e corre os olhos pelo texto e imagens. Se acha interessante, começa a ler. 10. Cabeçalho ou Título da Página – O cabeçalho ou título da página é, depois do título web (<title>), a parte mais importante para os robots e programas dos mecanismos de busca. Ele deve conter palavras-chave, mas não é conveniente que seja uma cópia do título web. A tag que o identifica h1 (o h vem de header, cabeçalho em inglês) e seu código é <h1> e, tal como no título web, ela abre com o código <h1>; depois vem o texto do título e ela fecha com </h1>. No caso desta página ele aparece assim: <h1>Passo a Passo Para a Otimização de Sites Estáticos em Construção</h1> A posição, fonte, cor da fonte, tamanho da fonte, são determinados em outro lugar, no arquivo css. Existem 6 códigos para o título e subtítulos e que são: h1, h2, h3, h4, h5, h6. O h1 é o mais importante. Dificilmente se usam todos os subtítulos. Já há uma tendência a usar apenas os 3 primeiros. Em breve os 3 últimos deverão ser extintos, como já foram outros. Na virada do século eles eram onze. A rigor, nem o h1 é mais necessário, em função da evolução dos mecanismos de busca. Hoje em dia são tantos os aspectos analisados numa página, que o peso desse cabeçalho deixa de ter importância para certas definições como tinha antes. Eu só uso o h1 – raramento lanço mão de h2. |
|
Tenha em Mente Que: -- É fria copiar conteúdos de outros sites.
-- É fria plagiar outros sites. -- É fria fazer outro site com o mesmo tema ainda que tenham conteúdos diferentes. Quem faz qualquer uma dessas coisas quase sempre é descoberto rapidamente pelo Google. Hoje ele é muito mais capaz de descobrir deslizes como esses do que qualquer profissional de qualquer parte do mundo. Quando ocorre a terceira situação, assim que ela é descoberta, a punição é sobre o proprietário e todos os sites ficam prejudicados nos posicionamentos. É preferível você fazer um texto singelo, caso não tenha prática com redação ou não tenha alguem que a faça para você, e com o tempo ir melhorando as páginas do que se expor a uma punição que é diícil de ser revertida. | |
|
Nono Passo: Desenvolver Menu Lateral Esquerdo da Home 11. Menu Lateral Esquerdo – Este menu é muito importante por ser alvo do olhar do visitante e porque ali nós colocamos os links mais importante no site. Siga estas instruções na sua confecação: -- Os textos dos links precisam ser visíveis aos visitantes e aos robots – se ficarem escondidos num javascript, provavelmente não será indexado. Por visível eu me refiro a literalmente digitado. -- Eles podem também ser imagens, mas como os robots não leem o que está escrito nas imagens, podemos colocar o texto do link na tag alt da imagem. -- É conveniente fazer separação entre os links conforme se muda de subtemas no menu. -- Os textos dos links devem ser bem claros e confortáveis para a vista do visitante. Textos com cores aberrantes ou muito apagados, forçam a vista dele e, se se tratar de algum deficiente visual, ele vai embora sem explorar o site. -- Imagens no menu, seja como lugar para clicar e ir a uma página interna, seja como imagem de adorno ou de propaganda ou marketing, tem de obedecer a certos critérios como veremos abaixo. -- O menu não deve conter muitas imagens e nem muitos textos de links porque tanto o topo, como ele e o rodapé serão repetidos nas imagens internas. Se esse conjunto contiver mais palavras do que o próprio texto da página, o site corre o risco de ser colocado lá atrás ou, ao menos, a página onde se deu o problema porque os programas têm dificuldade de determinar o tema da página. E quando há dúvida ou conflito, joga-se o site ou página lá para trás porque os progrmas não podem gastar tempo com investigações dessa natureza. Décimo Passo: Desenvolver Parte Central do Miolo da Home 12. Parte Central do Miolo – É nessa área que se trava a batalha do convencimento. Você precisa "argumentar" com o visitante humano de sorte que ele compre sua idéia e "argumentar" com os programas dos mecanismos de busca que sua página merece uma boa colocação. Por isso, precisa ter um texto equilibrado e reforçado com imagens para um e outro objetivo. 13. Palavras-chave na Parte Central do Miolo – As palavras-chave precisam aparecer no miolo. É praxe que a palavra-chave principal apareça logo no primeiro parágrafo. E continue aparecendo no texto. É aqui que você vai convencer os programas dos mecanismos de busca que seu site trata do tema que você informou no começo. Outras recomendções: -- O texto deve ter pelo menos 350 palavras, incluindo-se o menu (ou mais, se o menu for muito grande). Certa feita um engenheiro do Google disse que, retirando-se o menu, precisa-se de pelo menos oitenta palavras para definir o tema. -- Textos pequenos, além de informar pouco, podem ser desprezados pelos mecanismos de busca. -- As palavras-chave devem ser distribuídas no texto. -- Se você usar frase-chave, proceda da mesma forma, com um adicional: devem aparecer pelo menos duas frases no texto com cada uma das palavras separadas das demais palavras da frase-chave. O motivo é que, se o mecanismo de busca precisar buscar no texto material para ser apresentado no lugar da meta descrição, ele encontrará as palavras separadas e poderá exibi-las com facilidade. 14. Imagens – Cada página deve ter pelo menos uma imagem e no máximo trinta. Quando há necessidade de mais, recorre-se à sua mobilização pelo css. Embora estes números sejam discutíveis de há muito, observei que na loja do Google, www.Googlestore.com, não há nenhuma página com mais de trinta imagens. Cada imagem deve conter: -- endereço correto; -- dimensões corretas; -- tag alt. As tags alt devem ser o mais descritivas possível e conter as palavras-chave da página porque o mecanismo de busca pode lançar mão de algumas delas para exibir nas buscas. Ademais, se a imagem não carregar por algum motivo, o usuário tem a oportunidade de ver a descrição dela. Imagens meramente decorativas ou usadas para compor o layout podem ter na tag alt apenas duas aspas, assim: alt="". Veja uns exemplos de como uma imagem pode aparecer no código-fonte: <img src="../imagens/valid-html401%5B1%5D.gif" alt="HTML Validado!" width="88" height="31"> – src é o endereço; alt é abreviação de alternate, ou alternativa; width é o comprimento; height é a altura. Estes são os componentes básicos e que devem ser exibidos. Outros podem ser acrescentados, mas não é onosso caso agora. <img src="../imagens/lustre.jpg" alt="Lustre decorativo de teto em cristal e vidro fosco com diâmetro de 40 cm e altura de 60 cm" width="60" height="90"> – tag alt bastante descritiva. <img src="../imagens/esp.gif" alt="" width="25" height="6> – tag alt com aspas indicando que se trata de imagem decorativa ou de composição do layout. Décimo-Primeiro Passo: Desenvolver Rodapé da Home 15. Rodapé – É praxe colocar um rodapé com o nome da empresa, direitos autorais, links relativos ao mapa do site, à política da empresa e outras coisas do gênero. 16. Nome do Arquivo – Mesmo em se tratando de home, ela tem uma terminação ou nome de arquivo. Pode ser default.asp, index.html, index.htm, etc. Evite colocar /pagina1.html ou pagina1.asp, etc. 17. Banners, Flash e outros – Evite colocar banners, flashes, marquee ou qualquerr outra coisa que se mova ou pisque. Está provado por pesquisas que tais coisas desviam a atençao do visitante e dificultam sua concentração. E ele precisa estar focado no que você apresenta para decidir se compra seu produto, seu serviço ou sua idéia. Se sua template já vem com algo do gênero, retire-o. Vou lhe dar um argumento a mais: entre no site do Google, navegue nas suas páginas e veja se encontra algum desses objetos. Décimo-Segundo Passo: Desenvolver Primeira Página Interna 18. Páginas Internas – As páginas intenas vão repetir o topo, o menu e o rodapé da home. Observe que quando você repete tais partes da home você está propagando para todas as páginas dados contidos no topo (em especial o tema do site), no menu e no rodapé. Recomendações: -- NÃO REPITA título web, meta descrição, meta palavra-chave, h1 e conteúdo em nenhuma página. -- Evite títulos que repitam palavras porque podem ser considerados spam, como por exemplo: <title>Empresa Ebooks de Ficção DVD CDRom Televisões Máquinas Lavar Roupa</title> <title>Contato Ebooks de Ficção DVD CDRom Televisões Máquinas Lavar Roupa<title> <title>Produto Ebooks de Ficção DVD CDRom Televisões Máquinas Lavar Roupa</title> Titulos assim, colocados em diferentes páginas naturalmente, devem ser evitados. Parece que está praticando spam com as palavras repetidas em todas as páginas, não parece? -- A palavra-chave deve ser secundária no site e ela deve aparecer no título da web, na meta descrição, na meta palavra-chave, no h1, no texto e nas tags alt. -- Coloque a palavra-chave mais importante de cada página interna na terminação do endereço. Ao invés de /pagina2.html, coloque /(nome do produto).html. 19. CSS – Em geral os sites pré-formatados já vêm com os estilos na própria página. Mas você pode colocá-los num arquivo próprio. Se você pensa em crescer o site com o tempo, sugiro abrir um diretório com o nome que desejar (estilos, por exemplo) e nele colocar um arquivo que pode receber qualquer nome, digamos, passoapasso, mas a terminação deve ser .css. Por exemplo, /estilos/passoapasso.css. Em seguida copie os estilos colocados na página e cole nesse arquivo. Se as páginas internas apresentarem algum estilo diferente, copie e agregue ao arquivo passoapasso.css. É conveniente copiar os estilos de cada página e colar numa página do Word para o caso de algum erro. Se você vai construir um site partindo do zero, haverá mais dificuldade. Será preciso descrrever os diversos estilos e colocá-los na folha de css. Para você ter uma idéia de como a folha de estilos (á o arquivo css) facilita a nossa vida, vou fazer a seguir uma tabela bem simples para exemplificar, com e sem o arquivo css. Sem passoapasso.css:
Este exemplo, no código-fonte poderia apareceria assim:
<table width="100%" cellspacing="0" border="0" cellpadding="0"> <tr> <td width="80%" height="50" valign="top"> <p><font-family="Arial, Helvetica, sans-serif" font-size="3" text-decoration=none; color="#FF0000">Texto inicial Mais texto Mais texto Mais texto</font></p> </td> <,/tr> </table> ,br> Se esse conjunto de estilo: "Arial, Helvetica, sans-serif" font-size="3" text-decoration=none; color="#FF0000" fosse colocado num arquivo css, e se chamássemos esse conjunto de texto1, a tabela no código-fonte ficaria assim: <table width="100%" cellspacing="0" border="0" cellpadding="10"> <tr> <td width="80%" height="50" valign="top" class="texto1" > <p>Texto inicial Mais texto Mais texto Mais texto</p> </td> <,/tr> </table> Ou seja, toda a descrição das caracterísicas do texto é traduzida por class="texto1". Falta, para funcionar desse jeito, uma conexão entre o arquivo css e a página. Isso é feito por meio de um link que fica dentro do <head> e que no caso, seria assim: <link href="../estilo/passoapasso.css" rel="stylesheet" type="text/css"> Ir para o diretório d Consultas Fevereiro/2010 |