Descripción: Sfaturi SEO pe Blog SEO http://optimizare-site-google.blogspot.com/
Describing latest SEO, SEM, Link building and SMO techniques, SEO principles, ON page factor, XML and HTML Sitemap, Free directory and article site , Keywords analysis techniques
La idea de este ebook es acercar a las personas interesadas las estrategias de posicionamiento web (Search Engine Optimization, abreviadamente SEO) usando como herramienta principal para el…Descripción completa
Full description
A tutorial on Search Engine optimisationFull description
Search Engine Optimization Resume, SEO Resume, Search Engine Optimization CV, SEO CV, SEO Analyst Resume, Search Engine Optimization Analyst Resume, Sr. SEO Analyst, Sr. SEO Resume
SEO HandbookFull description
15 DICAS PARA MELHORAR SUA POSIÇÃO NAS BUSCAS DO YOUTUBE. Origem: Escola para Youtubers https://www.youtube.com/user/escolaytDescrição completa
Very good SEO tutorial. Help you to understand well how to put in place a good SEO system and how to link with all search engine. Contact me for more info.Full description
Descripción completa
En este tutorial aprenderás lo necesarios para desarrollar tu estrategia SEO. Como hacer una búsqueda de keywords, SEO On Page y Off Page, lista de suscriptores, optimiza tu sitio, consigue …Descripción completa
Descripción completa
Search Engine Optimization / Social Media Optimization Resume, Business, social, media, Internet, video, marketing, web, Facebook, blogging, 2.0, amazon, bookmarking, internet, Marketing, web 2.0, ...
Full description
Descripción: Conceptos Escenciales de SEO www.hansnolte.com
seoDescripción completa
search engine optimizationFull description
TODO TODOSS OS DIRE DIREIT ITOS OS RESE RESERV RVAD ADOS OS,, EM HIPÓ HIPÓTE TESE SE ALGU ALGUMA MA QUALQUER PARTE DESSE MANUAL PODERÁ SER REPRODUZIDA OU TRANSMITIDA SEM A PERMISSÃO DO AUTOR. O AUTOR NÃO ASSUME A RESPONSABILIDADE PELO USO DAS INFORMAÇÕES E RESULTADOS OBITIDOS PELO MANUAL, ESSE MANUAL É FRUTO DE ANOS DE EXPERIÊNCIA DE TRABALHO ÁRDUO. MARCAS REGISTRADAS: O AUTO AUTOR R NÃO NÃO PO POSS SSUI UI NENH NENHU UMA RELA RELAÇÃ ÇÃO O COM COM A MARC MARCA A GOOGLE Inc. O USO DE IMAGENS IMAGENS,, NOME, NOME, MARCA MARCASS PODERÃ PODERÃO O SER CITAD CITADAS AS NESSA OBRA APENAS PARA CASO ILUSTRATIVO, NÃO VISANDO O LUCRO, FAVORECIMENTO OU DESMERECENDO O PRODUTO.
1
PREFÁCIO Há cerc cercaa de algu alguns ns anos anos atrá atráss publi publici cida dade de e mark market etin ingg na inte intern rnet et eram eram sinônimos de venda e troca de banners, aos poucos vieram as famosas janelas pop-ups, que incomodavam e muito os usuários. Cada vez mais esses métodos foram extintos da web por trazerem grande desconforto e não terem uma precisão 100% de vendas. Foi aonde surgiram o conceito de venda através de sites de busca, a parceria ideal entre usuário e empresas que usavam a internet como um veículo de venda. O usuário buscava algo de seu interesse e lá estava em primeiro lugar nos sites de busca o que ele procurava. Entre todos os meios de web marketing o que chamou mais a atenção era a possibilidade de estar nas primeiras posições no Google com custo 0, fazer com que o sistema de busca trabalhe para você enquanto está dormindo. É justamente aonde nós iremos entrar no assunto:
WEB MARKETING – Search Engine Optimization
2
O AUTOR Michel Michel Ferreira Ferreira nasceu em 1983 no Rio de Janeiro é casado com Luciane Alves Peixoto da Silva e possui um filho chamado Isaque. Michel Ferreira é especialista em SEO (Search Engine Optimization), atualmente trab trabal alha ha no Gove Govern rnoo do Esta Estado do do Rio Rio de Jane Janeir iroo como como webd webdes esig igne ner, r, respo responsá nsáve vell pela pela Intr Intran anet et do Estad Estadoo aond aondee engl englob obaa toda todass as secr secret etár ária iass do governo. Possui no seu portfólio grandes projetos como: • • •
Clube de Regatas Flamengo Second Life Governo do Estado do Rio de Janeiro
3
AGRADECIMENTOS Agradeço ao Senhor Jesus Cristo pela sua fide fideli lida dade de e a mi minh nhaa espo esposa sa benç benção ão na minh mi nhaa vida vida.. Agra Agrade deço ço o apoi apoioo de toda toda minha família. Obrigado.
4
5
6
7
8
1) INTRODUÇÃO
A
apostila WEB MARKETING – Search Engine Optimization, é voltada apenas para profissionais que estruturam seus sites nas normas da W3C, ou popularmente falando: Tableless. Um dos principais critérios para indexar uma keyword 1 é a estruturação do código fonte, o que torna o código-fonte legível e acessível para os crawlers 2. Podemos dividir em 2 etapas as técnicas SEO: • •
Links Semântica
Links – Nada mais é do que links que apontam para a sua página o quanto mais links tiver, melhor será sua posição. Muitos devem estar lendo e falando que isso não passa de uma técnica chamada Google Bomb3 , mais não se engane o Google penaliza as páginas que o conteúdo não seja o mesmo, por exemplo, um site de floricultura apontado para a página da segurança nacional. Essas técnicas de manipulação de PageRank 4 são denominadas cloaking 5 e são severamente punidas pelo Google causando até mesmo a exclusão da página nas buscas.
Semântica – O fato das páginas HTML serem estruturadas nos padrões web as torna acessíveis a qualquer dispositivo, seja ele um computador antigo até mesmo um celular, padrões web significa uma web que fala uma única língua. Tente abrir no Dreamweaver uma página HTML que foi criada no FrontPage, o resultado será desastroso, pois cada empresa cria um padrão de criação, hoje temos uma internet sem lei, aonde os desenvolvedores são escravizados no modo gráfico sujando o código fontes das HTML. Por parte de muitos desenvolvedores existe uma grande resistência aos padrões web, eles alegam que é como se voltasse ao sistema antigo de criação de sites direto no código fonte, o que não passa de desculpas. Não existe nada melhor do que ter o seu site no topo das busca e toda dia receber uma proposta de orçamento de desenvolvimento de site. Desejo uma boa leitura e que você faça parte do futuro da web. Grande abraço
9
Keyword – Palavra-chave Crawlers – São os robôs responsáveis por buscar na internet os conteúdos dos sites,
1 2
indexando palavras-chaves e links. 3 Google bomb – São vários links apontados para uma mesma página, influenciando a posição nas máquinas de busca e adulterando o PageRank. 4 PageRank – É uma avaliação que o Google da aos sites, essa avaliação é em uma escala de 0 a 10, a medida que determinada página possui links apontados para ela a tendência é o PageRank aumentar.
10
2) CONHECENDO O GOOGLE
A
ntes de começar a parte prática, vamos entender como funciona o nosso espaço de trabalho, pois nada melhor do que conhecer a empresa em que vamos trabalhar, saber como são as hierarquias e a metodologia de trabalho.
COMO FUNCIONA O SISTEMA DE PAGE RANK Texto retirado do site google.com.br
Google roda sobre uma combinação única de avançados hardware e software. A velocidade que notamos pode ser atribuída em parte a eficiência do algoritmo de busca e parcialmente a milhares de PC's de baixo custo que estão reunimos em rede para criar um mecanismo de busca super-rápido. O coração do software é o PangeRank(TM), um sistema para dar notas para páginas na web, desenvolvido pelos fundadores Larry Page e Sergey Brin na Universidade de Stanford.
EXPLICAÇÕES SOBRE PAGERANK Texto retirado do site google.com.br
A classificação das páginas (PageRank) confia na natureza excepcionalmente democrática da Web, usando sua vasta estrutura de links como um indicador do valor de uma página individual. Essencialmente, o Google interpreta um link da página A para a página B como um voto da página A para a página B. Mas o Google olha além do volume de votos, ou links, que uma página recebe; analisa também a página que dá o voto. Os votos dados por páginas "importantes" pesam mais e ajudam a tornar outras páginas "importantes”. Sites importantes, de alta qualidade recebem uma nota de avaliação maior, que o Google grava a cada busca feita. Naturalmente, uma página importante não significa nada se não combinar com a sua busca. Assim, o Google combina os resultados de alta qualidade com a busca que você está realizando para que o resultado seja o mais relevante possível. O Google pesquisa quantas vezes a palavra procurada aparece nas páginas e examina todo o aspecto delas (e conteúdo das páginas ligadas a ela) para determinar o melhor resultado para a sua busca.
11
INTEGRIDADE Texto retirado do site google.com.br
Os sofisticados métodos de automação do Google tornam a manipulação dos resultados extremamente difícil. E, apesar de veicularmos alguns anúncios relevantes acima e ao lado dos resultados, o Google não negocia classificações dentro dos resultados de busca (ou seja, não é possível comprar uma posição privilegiada na Listagem de Páginas). A busca no Google é um meio fácil, honesto e objetivo de encontrar websites de boa qualidade com informações importantes para a sua pesquisa.
CONCLUSÃO Amigos, concluímos então que um dos fatores primordiais para obtermos PR, são os links apontados para as nossas páginas, quanto mais links de qualidades tivermos, melhor será o nosso PR, mais vale ressaltar que trocar links com sites que não tem o mesmo conteúdo pode causar o efeito inverso, o Google possui normas internas que penalizam sites que tentam burlar normas, mais a frente iremos ver essas normas.
m CC-
Image by-SA
retirada do Fã-Clube do Google
12
Uma ilustração sobre o funcionamento do PageRank, cada esfera representa uma página e o tamanho o PR. A esfera superior direita recebe apenas um voto, de uma esfera com alto PR, tornando-a com bom PR.
AÇÕES DO GOOGLE CONTRA OS SPAM Sabendo que apontando muitos links para minha página, é muito fácil obter um excelente PR basta apenas entrar nos fóruns de discurssão e deixar um post com um link para meu site, e até mesmo colocar um link no site do seu Manél da padaria. ERRADO Sair linkando para seu site pode causar uma grande penalidade, pois os
algorítimos do Google são inteligentes, eles estudam o conteúdo das duas páginas e verifica se as duas possuem o mesmo tema, caso contrário acontece a perda de PR, é necessário mostrar para o bot do Google que aquele link no seu site é de algum parceiro ou venda, através do atributo external nofollow. Atualmente no meu site www.michelferreira.com criei algumas estratégias para poder usar de maneira consciente algumas técnicas SEO Black Hat sem ser punido pelo Google, em meu artigo no site Oficina da Net http://www.oficinadanet.com.br/artigo/569/como_ganhar_destaque_no_google Falei um pouco sobre estratégias que até mesmo é utilizada em grandes portais.
NORMAS DE DESENVOLVIMENTO Existem algumas normas pré-estabelecidas para que seu site não seja punido veja alguma delas, detalhe todas elas foram tiradas do endereço www.google.com.br .
13
1) Construa um site com uma hierarquia clara e links de texto. Cada página deve ser acessada a partir de pelo menos um link de texto estático. 2) Mostre aos usuários um mapa do site que relacione o tópico às partes importantes de seu site. Se o mapa do site tiver mais de cem links, convém dividi-lo em páginas separadas. 3) Crie um site útil, com muitas informações e páginas que descrevam de forma clara e precisa o seu conteúdo. 4) Pense nas palavras que os usuários digitariam para encontrar suas páginas e certifique-se de que elas apareçam no seu site. 5) Tente usar texto, em vez de imagens, para exibir nomes, conteúdo ou links importantes. O rastreador do Google não reconhece texto contido em imagens.
6) Certifique-se de que as tags "TITLE" e os atributos "ALT" sejam descritivos e precisos. 7) Verifique se há links quebrados e corrija o código HTML. 8) Se você utiliza páginas dinâmicas (aquelas em que o URL contém um caractere "?"), saiba que nem todo spider do mecanismo de pesquisa rastreia páginas dinâmicas tão bem quanto faz com as estáticas. É aconselhável que os parâmetros sejam poucos e curtos. 9) Utilize um número razoável de links por página (menos de cem).
14
3) INICIANDO O DESENVOLVIMENTO DO SITE
D
epois de ter todas essas informações, iremos basear nosso desenvolvimento nas diretrizes do Google, pois é melhor obedecer do que sacrificar.
DEFININDO AS PALAVRAS-CHAVES Antes de tudo pense em uma palavra-chave na qual poderá trazer lucros para você, pensou? Você tem que pensar em que chave o cliente buscaria para achar os seus serviços, por exemplo, suponhamos que você tenha uma agência web, qual seria a palavra-chave que clientes buscariam no Google? Se eu quisesse fazer um site buscaria por “ desenvolvimento de sites ” e “criação de sites ”.
O QUE É KEYWORD DENSITY? Keyword density ou densidade da palavra-chave nada mais é do que a quantidade determinada de palavra-chave no conteúdo da página, mais uma ação contra os SPAMS, pois tempos atrás somente era necessário criar links com a palavrachave desejada e pronto, não era analisado o documento para ver se realmente aquela página continha determinada chave, com esse conceito toda a página é analisada verificando relação keyword x conteúdo. Temos que ter em mente que o conteúdo de nossa página deva falar sobre a nossa palavra-chave, para o Google dar relevância, um erro fatal de muitos desenvolvedores é escrever inúmeras keyword sem relação com o conteúdo, visando acessos quando o usuário busca o termo escolhido. 15
Um exemplo muito comum e errôneo é incluir palavras-chaves que não tem relação nenhuma com o conteúdo pensando em ganhar acessos em virtude da palavra-chave, esteja ciente que o Google analisa todo o código de sua página e tentar enganá-lo trazem drásticas conseqüências. Vamos agora estudar o nosso oponente esse quesito é fundamental para ganharmos a disputa pelas primeiras posições, acesse o Google e busque pela palavra-chave escolhida. Depois de pegar a URL do principal concorrente analise a relação keyword x conteúdo, acesse o site http://www.keyworddensity.com , esse site permite analisar a densidade das palavras-chaves em todo corpo HTML, caso prefira posteriormente você pode fazer uma analise no seu site e no do concorrente, essa ferramenta nos permiti tanto avaliar individualmente como também avaliar duas páginas verificando qual página possui a melhor densidade.
Exemplo do site www.keyworddensity.com uma análise entre o meu site e de um concorrente em uma disputa pela palavra-chave “michel ferreira”.
16
Resultado da análise da keyword density, o sistema analisa todo corpo HTML incluindo: Título da página, descrição da página, palavras-chaves, texto visível, descrição das imagens, comentários, palavra-chave no domínio, links e tags com a chave.
ESTUDANDO A KEYWORD DENSITY DO NOSSO OPONENTE Antes de analisarmos o nosso rival temos que saber que um dos pilares do SEO é a acessibilidade web o quanto mais acessível nosso site for melhor será para ganharmos a disputa pelas primeiras posições. Vamos compreender um pouco como funciona o sistema de densidade, na página anterior verificamos a densidade no site do meu concorrente o Michel Ferreira de Portugal, vamos a análise:
Análise do site http://www.ncc.up.pt/~michel/ Title (Título da página) Tag: Michel Ferreira HomePage
Ele colocou a palavra-chave no title da página, indicando ao robô a importância do nome.
Meta Description (Descrição do site) 17
Tag: <meta http-equiv="Content-Language" content="pt"> Michel Ferreira HomePage
Ele simplesmente não colocou nada na descrição do site, o que atrapalha e muito a definição, muitos desenvolvedores ignoram as Meta-tags saiba que elas são o rótulo do nosso site, fator essencial para descrevermos o site. Sempre coloque na descrição do site a palavra-chave que você busca coloque um texto que seja harmonioso com o conteúdo do site.
Meta Keywords (Palavras-chaves) Tag: <meta http-equiv="Content-Language" content="pt"> Michel Ferreira HomePage
O nosso amigo não especificou nenhuma palavra-chave, mais um ponto perdido na densidade.
Visible-Text (Texto visível) Apenas 2 referências no conteúdo do site, visible text é o conteúdo do site. Explore ao máximo, o texto com a sua palavra-chave, não crie um site com muitas imagens e poucos texto, crie um site que tenha conteúdo. Alt tags (imagens) Não possui nenhuma referência nas imagens com a palavra-chave. Sempre no atributo alt, escreva o que está escrito na sua imagem. Coment tags (comentários) Não possui nenhum tipo de comentário com a palavra-chave. Se possível crie comentários com a palavra-chave. Domain name (domínio) Possui 1 referência no domínio, colocar a palavra-chave no domínio nos da grande relevância, vamos ver isso mais na frente. Image tags (Imagens) Não possui nenhuma imagem com a palavra-chave. O sistema verifica se existe alguma imagem com a nossa palavra-chave. Linked text (links) 18
Links com a palavra-chave ajuda e muito se não o principal responsável, sempre é bom colocar os links com o nome da palavra-chave mais na frente vamos ver isso. Não colocou nenhuma referência.
TRABALHANDO NOS ERROS DO NOSSO OPONENTE Com todos esses dados do nosso concorrente é só trabalhar em cima deles, você viu o leque que temos em que podemos usar a nossa palavra-chave? Varia desde o domínio até comentários, então explore ao máximo a densidade da chave na sua página, lembrando que um dos pilares é a acessibilidade.
VERIFICANDO O PAGERANK? A última análise do nosso oponente é o PageRank, para isso será necessário baixar a Google Tool Bar no endereço http://toolbar.google.com
A imagem acima é um exemplo da nossa Google Tool Bar, repare ao lado de Favoritos uma barrinha verde com o título de PageRank, é justamente ali que verificamos o nível das páginas, apenas passe o ponteiro do mouse em cima da barrinha verde que ela mostrará o nível do PR.
O MEU CONCORRENTE TEM 4 DE PAGERANK E AGORA? Caso o seu concorrente venha ter um nível alto não se desespere, pois na época que estava desenvolvendo meu site possuía nível 0 e o meu concorrente 4, com apenas a acessibilidade em 2 semanas estava na primeira posição. Afinal o PageRank conta ou não? Existem muitas discurssões a respeito do PageRank, se ele conta na corrida das melhores posições ou não, na minha opinião e baseado em minhas experiências o PageRank não conta, vide isso buscando no Google pela a palavra chave “michel ferreira” meu site ocupa o primeiro lugar em terceiro lugar vem o site do Michel português que tem PageRank 4. Segundo Luís Henrique especialista em SEO tem a mesma opinião veja sua coluna no Oficina da Net: http://www.oficinadanet.com.br/artigo/607/page_rank_nao_significa_nada _quando_seu_site_tem_popularidade_
19
Aprendemos tudo sobre o nosso concorrente e temos todos os dados necessários para trabalharmos em cima, no próximo capítulo vamos começar a estruturação do HTML da página, e aprender as mais obscuras técnicas SEO.
4) A IMPORTÂNCIA DA ACESSIBILIDADE
A
final como podemos fazer um documento XHTML perfeito para o Google? Antes de tudo devemos dominar muito bem a funcionalidade de cada tag XHTML, qualquer erro na semântica do documento poderá ser uma oportunidade perdida. Um amigo no início do seu aprendizado em Tableless criou uma estrutura baseada em CSS, sem nenhuma tabela, tudo na tag DIV, o documento estava válido pela W3C, tudo como mandava a cartilha mais a acessibilidade do documento estava péssima.
NA PRÁTICA O QUE É ACESSIBILIDADE E USABILIDADE WEB? Finalmente vamos entender na prática a importância dos padrões web na estrutura de um documento XHTML, lembrando que um site que esteja nas primeiras colocações e não utiliza as normas da W3C, está com os seus dias contados no topo das buscas, até que venha um abençoado com código acessível 20
e semântico e lhe tire a posição, o quanto mais acessível o site estiver, melhor será. Em 2003 foi criado o site Connected Earth custou cerca de 1,6 milhões de dólares, porém seus desenvolvedores ignoraram os padrões web, o site era incompatível com qualquer navegador diferente do Internet Explorer, acarretando uma grande perca de clientes. Vai continuar no mundo quadrado das tabelas?
ESTRUTURANDO O DOCUMENTO A nossa função é ser o facilitador do projeto, desenvolvedores preguisoços não tem espaço no mundo SEO, pense que você receberá em sua casa uma visita ilustre, Jesus Cristo vai visitá-lo para saber como anda sua vida, se tem levado uma vida de desgraça, beberrão, sem compromisso com nada e ninguém ou se tem levado uma vida de servo, seguindo todos os seus preceitos e mandamentos.
A vida do rebelde A primeira coisa que iria fazer era arrumar a sua casa, deixando tudo o mais limpo possível para a visitar ser rápida e Jesus enxergar que ele realmente era fiel, iria ser o facilitador da parada.
Servo fiel O servo fiel vive 24h com a sua vida pautada na Palavra de Deus, não precisando esconder nada.
Conclusão Nos dois casos a casa estava arrumada, limpa e pronta para receber a visita ilustre de Jesus, tudo estava facilitando Jesus, a saber, que a nossa casa estava arrumada. No caso do rebelde toda sua arrumação seria em vão, pois quando pensamos que ninguém está nos vendo quando fazemos algo de errado, esteja enganado Jesus está te vendo e muito bem, por isso não adianta tentar esconder a sujeira da sua vida. No caso do servo fiel, a visita foi agradável e maravilhosa, pois Jesus sabia da vida reta que estava levando.
21
Assim funciona os bots, não adianta tentar enganá-los com código escondido, ou algo malicioso, pois ele esta vendo tudo, se ele pegar um abraço para o seu site, pois levará a exclusão do mesmo. Para fazer denúncias acesse o link: http://www.google.com.br/contact/spamreport.html Torne o seu código mais específico e acessível possível.
META TAGS As meta tags, são o rótulo do site, nelas estarão contidas todas as informações possíveis a respeito do site, até mesmo agendar uma visita com o Google bot. Inclua as principais meta tags e não deixe nenhuma de fora do seu cabeçalho, a seguir estarei listando todas elas e o que significa. Na próxima página estarei mostrando as meta tags do meu site e explicando uma a uma.
22
1) Especificando a versão do XHTML
Especifica a versão do XHTML, no nosso caso é a Strict. Independente da versão do XTML é necessário especificá-lo.
Indica a codificação de caracteres, responsável pelos caracteres do documento, a mais comum são UTF-8 e ISO-8859-1, a grande maioria dos servidores que hospedam sites rodam em UTF-8, caso venha ocorrer algum erro de má visualização de caracteres tente trocar para UTF-8.
4) Definindo o título da página Michel Ferreira desenvolvimento de sites
O que mais eu vejo na internet são desenvolvedores incluindo de forma exagerada palavras-chave no título, exemplo: Michel Ferreira, sites, websites, Seo, otimização de sites, web marketing, desenvolvimento de sites, criação de sites
Eles pensam que incluindo a palavra-chave no título da página os bots irão enxergar as mesmas, ERRADO. Os bots só enxergam os primeiros 60 caracteres do título da nossa página, o ideal é mesclar aqui o título da sua empresa com a sua palavra-chave desejada, não ultrapassando o limite de 60. Lembre-se que a palavra-chave que está no título deverá ser comentada no texto do site, como vimos em keyword densit.
Não pense que apenas incluindo as suas palavras-chaves poderá lhe ajudar mesmo respeitando o limite de 60 caracteres, temos que ter referências no conteúdo do site com as palavras-chave do título.
5) Especificando o tipo de documento < meta name="resource-type" content="document" />
Essa meta tag só possui um valor “document” a função dela é dizer que o arquivo é um documento, não é muito utilizada, mais não custa colocá-la na página.
6) Configurando o cache <meta http-equiv ="pragma" content="no-cache" />
Sempre ao acessar a página o navegador não irá deixar no cache sempre vai buscar uma nova página. 24
7) Classificação da página meta name="classification" content="Internet" /> <
Essa meta tag é fundamental para alguns bots definirem a categoria da sua página, essa meta é responsável por dar o tema a página. Excelente para cadastramento em diretórios de busca.
8) Descrição da página <meta name="description" content="Michel Ferreira é um profissional voltado ao desenvolvimento de sites nos padrões web, criando estruturas semânticas para otimização nos principais sites de buscas tais como: Google, MSN Search, Yahoo, Cadê. " />
Esse será a descrição da nossa página dando um breve resumo do site, lembre-se de inserir a palavra-chave na sua descrição.
9) Palavras-chave <meta name="keywords" content="desenvolvimento de sites,criação de sites,dispositivo moveis,tableless,semantico,webdesign,web marketing,w3c,artigos de TI,michel ferreira,Jesus,otimização de sites,site,consulta de dominios,e-commerce" />
Todas as palavras-chave que você deseja ser achado pelos sites de busca devem estar aqui, não adianta colocar uma palavra-chave que não tem relação nenhuma com o conteúdo do site. Lembre-se do conceito keyword density.
10) Robots <meta name="robots" content ="all" />
Através dessa meta podemos restringir algumas páginas, as opções além de all: [NO]INDEX, [NO] FOLLOW. Para bloquear páginas não utilize essa meta sempre deixe como all, para bloquearmos URL iremos utilizar o robot.txt, que irei falar mais na frente.
11) Google bot <meta name="googlebot" content="all" />
A mesma função da meta anterior só que essa é especifica para o spider do Google.
12) Distribuição da página meta name="distribution" content="Global" /> <
25
Define se o nosso documento será fornecido para o mundo ou somente em redes locais ou até mesmo intranets, as opções são: global, local e IU
Essa meta define a classificação da sua página se ela é aberta a todo público, somente a crianças, 14 anos, conteúdo adulto e restrito as opções são: 14 Years, General, Mature, Restricted e Safe For Kids
14) Autor < meta name="author" content="Michel Ferreira " />
17) Define o status da página < meta name="doc-class" content="Completed" />
Define a página está em construção ou já finalizada, as opções são: Completed, Draft, Living Document, Published
18) Define o status do documento <meta name="doc-rights" content="Public" />
Define o status do documento.
19) Produtos Microsoft < meta name="MSSmartTagsPreventParsing" content="true" />
Impede que os produtos Microsoft gerem etiquetas inteligentes em seu site, deixe sempre como true. 26
20) Image Tool Bar <meta http-equiv ="imagetoolbar" content="no" />
Desliga a barra do Internet Explorer que aparece ao passar o mouse sobre a imagem, aparecendo opções de salvar, imprimir, enviar por e-mail e adicionar no "My Pictures".
Repare a barra no canto superior esquerdo, essa meta bloqueia esse recurso do IE.
IMAGENS ACESSÍVEIS As imagens no nosso site são fundamental para o design da nossa Home, grande parte dos sites em tableless utiliza poucas imagens, explorando mais os recursos do XHTML criando sites com um design não muito agradável, uma vez um programador me disse: “Michel você cria layouts que não olha o lado do cara que irá estruturá-lo em tableless”.
A estrutura em tableless de um site realmente é trabalhosa, mais afetar o nosso design para criar uma estrutura fácil é o mesmo que retroceder o serviço e perder o foco totalmente. O que mais me chamou a atenção na época quando estava aprendendo tableless era criar um layout lindo sem nada ficar de fora, você já imaginou um menu em imagem e ter que transformá-lo em texto devido a acessibilidade web?? Com conhecimento de CSS é possível inserir imagens no XHTML só que no código fonte ser texto, veja o exemplo do meu site www.michelferreira.com , o 27
meu menu é todo texto só que eu puxo as imagens através do CSS, com um pouco de inteligência e criatividade é possível criar páginas semânticas com imagens, vamos ver alguns exemplos do que se encontra na web atualmente:
Eu não aconselho usar imagens em menus, sempre quando o fizer utilize o CSS para puxar as imagens, pois os sites de busca não conseguem ler o que está escrito no JPG, o ideal é utilizar a tag ALT para escrever o que tem na imagem por exemplo, no nosso menu está escrito SERVIÇOS especifique na tag ALT a palavra SERVIÇOS. O atributo ALT foi criado para especificar o que contém na imagem, não negligencie deixando vazio ou até mesmo escrevendo qualquer coisa, especifique, pois imagine o seu site com todas as imagens desabilitadas? Os programas para deficientes visuais entendem somente o texto da página, já imaginou o seu site não ter nada específico no atributo ALT? O atributo ALT é essencial na acessibilidade do nosso documento. O spider só entende texto e não consegue entender o que está escrito no JPG, vamos dizer que você esteja incluindo um JPG que esteja escrito: “Desenvolvimento de sites” o atributo alt deverá ficar:
No exemplo acima você está indicando que aquela imagem corresponde a palavra desenvolvimento de sites.
IMAGENS ATRAVÉS DO CSS É muito simples chamar uma imagem pelo CSS veja o exemplo: Página principal
No exemplo acima repare que não existe a TAG , mais na verdade eu puxei uma imagem pelo CSS, vamos verificar o CSS:
Repare que a imagem está como um plano de fundo e o texto está com -8000em, isso significa se puxar no XHTML o ID genesis o texto não ficará visível pois ele está em uma resolução de -8000em, nem mesmo se você estivesse usando 2 monitores você iria conseguir ver o texto. Assim só ficou visível a nossa imagem e com o menu totalmente em texto.
CRIANDO O MENU DO SITE O menu é a principal parte do site, pois através dele sairá a grande maioria da navegação do site, por isso toda atenção na estrutura do menu do site veja esse exemplo:
29
Sempre inicie o seu menu com a tag
responsável por definir o início e o fim de uma lista, a tag é responsável por definir um elemento dentro da lista. Sempre coloque cada link dentro de uma . O atributo ACCESSKEY nada mais é do que a possibilidade de acessar o link sem o mouse, somente usando as teclas especificadas, fundamental para deficientes visuais, no meu documento teclando Alt + 0, é acessado a página principal do site, Alt + 1 o meu perfil, Alt + 2 o meu portfólio. Cada link do seu menu deverá ter essas especificações, o quanto mais acessível melhor, você talvez até esteja falando que o seu site não é para deficientes visuais, e essas normas não são necessárias, lhe digo que o Google tem a visão de um cego, um cego que possui vários amigos, não obedecer esse requisito no seu menu poderá trazer muitos acessos a menos.
FLASH E A ACESSIBILIDADE Existem inúmeros discursos a respeito da acessibilidade em flash, se é possível ou não na verdade eu não irei entrar nesses detalhes, pois o ideal é usar o flash de forma moderada e dosada. Atualmente o Google inseriu nos seus bancos a possibilidade de indexar arquivos swf, quando o usuário busca por algum arquivo com terminação .swf ele mostra o resultado da busca, a Adobe tem trabalhado em cima a respeito da acessibilidade do flash, muitos desenvolvedores em flash dizem que tudo depende do desenvolvedor para tornar o site em flash acessível. Recentemente fui convidado para fazer o site de uma cantora evangélica, e a primeira citação que ela fez foi: “Quero um site bem bonito, bastante cores e o principal, que ele seja todo animado, pois eu já possuo um hot-site que a minha gravadora desenvolveu.”
Ao acessar o Google e buscar pelo nome da cantora levei um susto, não existia nenhuma referência do nome dela, achei estranho pois ela é uma cantora de peso no meio evangélico e possui uma grande gravadora, de curiosidade entrei no site da gravadora e depois de muitos cliques achei a abençoada. O site 100% em flash com o menu todo em flash, essa foi a resposta do sumiço do nome dela no maior site de busca do mundo. O Google pode até indexar
arquivos em swf mais entender o que cada link diz dentro do flash isso é
Uma das alternativas para burlar isso seria escrevendo o texto que está dentro do swf no XHTML, esconder o texto com CSS assim como os links, mais isso não é muito recomendado fazer, pois seria uma técnica SEO BLACK HAT que iremos ver mais a frente. Existem técnicas para validar o documento que usa flash pela W3C, isso ajuda na acessibilidade de todo documento, mais lembre-se use somente o flash para coisas básicas como topo, banner e esteja ciente que o texto que está no flash seja incluso no seu XHTML. No caso do seu site for 100% em flash a solução é criar uma segunda versão totalmente em XHTML assim o seu conteúdo será indexado pelo spider.
VALIDANDO O FLASH Iremos aprender como deixar semântica a nossa página que possui um arquivo swf, quando inserimos um swf na nossa página pelo dreamweaver o nosso código fica totalmente sujo veja o exemplo:
Esse código está sujando o nosso documento e deixando ele inacessível, para solucionar o caso poderíamos fazer os seguintes passos: 1. Baixe o arquivo no endereço: http://www.michelferreira.com/swfobject.js 2. Coloque o arquivo no seu servidor. Insira esse java na sua página: <script type="text/javascript" src="swfobject.js" >
3. Use o seguinte script para chamar o swf: <script type="text/javascript"> //
31
Repare na terceira linha do script que diz var so = new SWFObject é justamente dentro do parênteses que deveremos especificar o nosso SWF, aonde eu coloquei o nome “aqui você coloca o nome da sua div” você deverá colocar o nome da div que chama o flash. Os números 758 e 156 é o tamanho do nosso swf. Com esse script chamamos o swf através de um código Java o que irá validar a nossa página pela W3C.
H1, H2, H3, ETC. As tags , , , etc. Nada mais é do que os cabeçalhos da página, o mais importante é o e menos importante é o . Alguns designers não gostam de utilizar pela formatação que traz ao documento, lembre-se: CASO VOCÊ NÃO VENHA UTILIZAR ESSAS TAGS POR ACHAR QUE ELAS ESTRAGAM O DESIGN DO SITE, UTILIZE CSS PARA FORMATÁ-LAS. Eu aconselho a colocar a palavra-chave desejada dentro do , ele tem a função de especificar o título principal da página XHTML, as tags tem a função do subtítulo da página, vamos dizer que sua H1 seria:
Michel Ferreira desenvolvimento de sites
A sua H2 seria o nome de cada página ou sessão vamos dizer que iremos para o link aonde eu irei apresentar o meu portfólio:
Portfólio do Michel Ferreira
32
O H3 tem a mesma função do H2 mais seria uma espécie de subtítulo do H2, vamos ao exemplo:
Michel Ferreira desenvolvimento de sites
Portfólio do Michel Ferreira
Trabalhos
Sempre respeite a hierarquia, nunca coloque um H3 na frente do H1 ou coloque na frente do H2, sempre siga a seqüência H1, H2, H3, H4, etc.
PARÁGRAFOS Respeite sempre os parágrafos utilizando a tag , não use excessivamente o uso da tag para preencher buracos no layout como no exemplo:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
Para isso utilize o CSS para preencher espaços, a mesma coisa para a tag não utilize várias vezes com o intuito de preencher vazios. Isso conta e muito na acessibilidade web, faça o seu documento respeitando o objetivo de cada tag XHTML.
VALIDANDO O DOCUMENTO PELA W3C O significado das siglas W3C tem por nome World Wide Web Consortium, é a união de empresas que visa implementar os padrões web, liderada pelo criador da web, Tim Berners-Lee. O site da W3C nos permite validar o nosso XHTML e CSS, acesse o link http://www.w3.org
33
VALIDANDO O XHTML Esse validador verifica se o nosso XHTML possui erros, acesse: http://validator.w3.org/
Digite sua URL e clique em chek, se aprovado você poderá colocar o selo da W3C no XHTML. Site da W3C responsável por criar os padrões web, atualmente com 500 membros.
34
VALIDANDO O CSS Acesse http://jigsaw.w3.org/css-validator/ para verificar se existe algum erro na folha de estilo.
Verificação da folha de estilo, o validador verifica se existe algum erro no CSS.
TESTANDO A ACESSIBILIDADE DO SEU DOCUMENTO Depois de aprender as técnicas de acessibilidade, iremos avaliar o nível de acessibilidade, para isso hospede o seu arquivo XHTML em algum servidor e acesse: http://www.accesible.com.ar/examinator/index.php Examinator Acessible é uma ferramenta que verifica a acessibilidade da sua página, ela segue os padrões WCAG 1.0 da W3C. O WCAG 1.0 são normas da W3C que explicam como criar documentos acessíveis para deficientes visuais, ela é voltada para desenvolvedores web.
35
O Examinator é uma ferramenta que nos mostra os pontos aonde podemos melhorar a nossa acessibilidade, irei usar de base a minha index.htm, vamos para a análise: O Examinator é baseado nas diretrizes WCAG 1.0 de acessibilidade da W3C, ela mostra os pontos fracos e positivos no documento a nota máxima é 9.9.
RESULTADO EXAMINATOR O Examinator verifica 23 pontos na acessibilidade, varia desde número de links até idiomas vamos verificar os pontos:
IDIOMA Identifique quando sua página possuir outro idioma, principalmente em links externos se sua página é linkada para um site de outra língua identifique. IMAGENS Cada imagem deve conduzir o atributo "ALT", com um texto que descreve o seu conteúdo ou o papel. 36
ATRIBUTOS ANTIGOS DE DESIGN Não utilize atributos antigos como "hspace", "bgcolor" ou "nowrap". Os atributos obsoletos são estruturas que foram substituídas por outras mais adequadas e devem ser evitadas porque podem provocar problemas de acessibilidade. DECLARAÇÃO DO DOCUMENTO Necessário o documento ter a sintaxe DTD para especificar qual a versão usada do XHTML. TECNOLOGIA W3C Utilize a tecnologia que a sintaxe DTD suporte. Entre outras razões, porque eles são cada vez mais reconhecidos das questões relativas à acessibilidade. PÁGINA VÁLIDA PELA W3C É importante evitar os erros no código fonte para que a página seja corretamente interpretada pelo usuário. CSS VÁLIDO È muito importante o CSS está 100% válido, sem erros. ATRIBUTOS ANTIGOS Não utilizar atributos antigos como