HTML
(Tags que ajudam no posicionamento do site nos buscadores)
No primeiro capítulo vimos alguns termos (texto, hipertexto, HTML) também vimos algumas ferramentas de visualização de códigos. Na (parte 02), estudamos a estrutura básica de um site, e as tags principais na formação estrutura. Nesse capitulo vamos conhecer algumas tags relacionadas ao posicionamento das palavras chaves nos sites de busca. Por meio dessas tags, entenderemos como facilitar a encontrabilidade de nosso site nos motores de busca.
Após estudarmos esse assunto teremos condições de identificar se as nossas palavras chaves no código fonte, além disso poderemos responde o porquê de nossa palavras chaves estarem localizadas naquela tag. Além de visualizarmos os resultados da escolha das nossas palavras chaves no site. Bom estudo!
Sabemos bem que o Goolgle é no momento o maior site de busca da internet em vários sentidos. Quando usamos para fazer nossas pesquisas, os resultados são mostrados da seguinte maneira.
Links Patrocinados são resultados que foram pagos para aparecerem nesse setor. Os programs de afiliados como o "Google Adword" é que promovem esse tipo de publicidade.
Busca orgânica são decorrentes de critérios que o buscador estabeleceram para definir esse posicionamento.
SEO (Search Engine Optimization) ou Otimização para motores de busca é a disciplina que prover estratégias capazes de melhorar o posicionamento de um sites nos buscadores como o Google, Bing, Yahoo, nas Areas de Busca Organica.
Podemos dividir a otimização de duas formas: a interna e a externa. A otimização interna díz respeito aos códigos presentes na página e é sobre isso que vamos tratar aqui. A otimização externa dependeremos de outros sites e links (nos outros sites blogs, comentários, redes sociais)que apontam para o nosso site (em outra oportunidade trataremos desse tipo de otimização.)
Para facilitar nosso estudo, vamos dividir em quatro tópicos.
I - Resutados Visualizados nos sites de Busca.
A)definir as tags
B)analise do código-fonte
C)resultado no site de busca.
II - Resutados Visualizados no próprio site
A)definir as tags
B)analise do código-fonte.
C)resultadono nosso próprio site
III - Otimizando imagem.
IV - Oimizando URL.
I - Resutados Visualizados nos sites de Busca.
A) definir as tags>
a) Meta tag Keywords <meta name="keywords" content="uma palavra-chave, outra palavra chave, outra palavra chave"> Nesta tag você deve incluir uma quantidade de palavras chaves que se referem ao conteúdo da página. Mantenha o limite de aproximadamente 150 caracteres. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado. Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas - alguns buscadores têm problemas com letras maiúsculas e podem ignorar seu site. coloque palavras chaves diferentes em cada página. Não coloque palavras chaves que não estejam presentes também na página não repita palavras dentro dessa tag.
b)Titulo <title>titulo com palavras chaves</title> É uma das tags mais importantes, dentro da Estrutura Basica se encontra no cabeçalho em algum lugar entre as tags <head>/<head>. Essa tag ajuda a definir qual o titulo da pagina. o titulo é que vai aparecer destacado nos sites de busca e também é o que vai nomear as janelas(veja a imagem a baixo). Podemos definir o titulo que será mostrado e que tambem desejamos que as pessoas vejam na suas buscas sobre nosso site. Cada pagina deve possuir um titulo diferente; deixe de acordo com atag de palavra-chaves. é iteressante o título aparecer no corpo do texto.
as frases selecionadas são exatamente as palavreas que estão dentro da tags de titulo; elas estão entre
<title></title> dessa maneira:
<title> flores online e floricutura ... </title>
c)Meta tag description <meta name="description" content="coloque aqui a descrição do site. com alguma palavra chave"> Essa tag se torna importante pois nela temos a descrição da página. A descrição também aparecerá nos site de busca informando sobre o que o site se refere. É importante escolher bem aquilo que vai aparecer como descrição nos sites de busca pois nesse caso você é que esta determinando dentro do seu planejamento de campanha qual texto deve aparecer aqui. Escreva nessa tag douas ou tres frase que descrevam bem a sua página. para cada pagina use uma descrição única. a descrição não é do site é da página. utilize para conquistar seus clientes no sites de buscas.
B) definir as tags>analise do código-fonte>
Para análisar as tags acima, vamos utilizar a visualização online
para começar, vá no google e pesquise a palavra "óculos e grifes".
teremos como resultado:
Entre nesse site "Óculos e Grifes" para acessarmos o código-fonte> Como estou usando o Firefox Mozilla
costumo a usar a tecla atalho Ctrl+U. Para localizar as tags voce pode utilizar tambem usar a tecla atalho Ctrl+F
e colocar nas lacunasos códigos ja estudados.
obs: Na (parte 01) ensino como visualizar códigos fontes online.
O código fonte da página escolhida é:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="pt-br" lang="pt-br">
<head profile="http://gmpg.org/xfn/11">
<title>Óculos e Grifes - Ótica Online - Comprar Óculos de Sol e Armações</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="language" content="pt-br" />
<meta name="generator" content="MKX WebSites" />
<meta name="author" content="MKX WebSites" />
<meta name="description" content="A Óculos e Grifes é a melhor loja virtual de óculos de sol e
armações para óculos de grau. Use nosso provador virtual e experimente as melhores grifes de
óculos." />
<meta name="keywords" content="óculos, óculos e grifes, óculos online, loja de óculos" />
Nessa área temos um monte de tags referentes ao cabecalho.
</head> <body>
Nessa área temos um monte de tags referentes ao conteúdo.
</body>
</html>
Observe o que foi destacado:
- as tags relacionado a
estrutura básica.<html><head><title></title></head><body></body></html>
- a tag que serve para incluir as palavras chaves
<meta name="keywords" content="palavras-chaves">é importante, quando tiver oportunidade, colocar as palavras chaves dessa tag no título, na descrição, no corpo do texto, nas palavras destacadas com negrito, italico entre aspas, a palavra chave do site que escolhemo é
<meta name="keywords" content="óculos, óculos e grifes, óculos online, loja de óculos" /> então podemos definir melhor o site tendo como base essas palavras-chaves.
- a tag que serve para incluir um título na página e que o buscador irá procurar
<title>titulo com palavras chaves</title>.
veja quer aqui encontramos palavras da tag de definição de palavras definidas na tag anterior<title>Óculos e Grifes - Ótica Online - Comprar Óculos de Sol e Armações</title>
a tag que serve para incluir uma descrição
<meta name="description" content="descrição da pagina>
Ainda sobre essas duas ultimas tags título e descrição, podemos visualisa-las nas páginas dos buscadores. observe o codigo fonte acima e veja o relsutado na imagem abaixo
C) definir as tags>analise do código-fonte> resultado no site de busca.
II - Resultados visualizados no próprio site
A)definir as tags>
d)Palavras-chaves no texto: quando você tiver algum texto tente relacionar as suas palavras chaves ao longo do texto, de preferencia ao inicio e o fim do texto para colocar suas palavras chaves, também coloque suas palavras chaves no plural e também escreva termos relacionados a suas palavras chaves.
e)Texto destacado <b></b>; <strong></strong>; <i></i>; <em></em>; <u></u>: use suas palavras-chaves para destacas seus textos. negrito<b>palavra chave</b>;<strong> </strong> sublinhado<u>palavra chave</u>, itálico, <i>palavra chave</i>, use essa tmas sem abusar.
f)headings tags ou tags de títulos: Essas tags ajuda na formatação do bloco de texto, cada tag dessa é um nivel de título. não use esses nives em exesso.
<h1>Titulo 1 </h1>; Título 1
<h2>Titulo 2 </h2>; Título2
<h3>Titulo 1 </h3>; Título3
<h4>Titulo 1 </h4>; Título 4
<h5>Titulo 1 </h5>; Titulo 5
<h6>Titulo 6 </h6>; Titulo 6
Essas tags são ótimas para organizar o conteúdo da página títulos você poderá determinar os titulos conforme as palavras-chaves de sua campanha.
B)definir as tags>analise do código-fonte>
vá nesse site http://www.likemarketingdigital.com.br/ e abra o codigo fonte dele:
no codigo fonte deles encontraremos as segintes palavras chaves.
<meta name="keywords" content="like, marketing digital, publicidade online,
publicidade digital, planejamento de marketing digital,agência de marketing digital
, consultoria em marketing digital, Curitiba" />
vamos encontrar essa linha de comando abaixo.
<h1 title="Sobre o Marketing Digital">Sobre o Marketing Digital</h1>
<div class="bloco_descricao"
<p>A melhor maneira de encontrar o consumidor é ser encontrado por ele!
Essa é a principal função do <strong>marketing digital.</strong></p>
<p>Com ações de comunicação e publicidade online, sua empresa
pode estar nas <strong>primeiras páginas do Google</strong> e se tornar
referência na internet, gerando lucros para o seu negócio.</p>
<p>Além disso, com ações de <strong>publicidade nas redes sociais,</strong>
sua marca cria relacionamento com os clientes e se aproxima do exigente
mercado consumidor do século 21.</p>
</div>
<div class="dlmarketing">
<h2 title="Apareça no Google">Apareça no Google</h2>
Observe o que foi destacado:
As tags <h1></h1> <h2></h2> as palavras destacadas são os comandos de titulos.
a tags <strong></strong> serve para deixar o texto em negrito.
C) definir as tags>analise do código-fonte> resultado no nosso próprio site
III - Otimizando Imagens
g)Atributo ALT para Otmizar se imagens ou Vídeos,: Também você pode otimizar as imagens ou vídeos ou qualquer elemento que possibilite o uso do atributo alt. um atributo é um comportamento que uma tag deve assumir. O atributo "Alt" faz a imagem video ou qualque elemento se comportar como se fosse uma palavra chave, um titulo ou uma descrição só que estara associado a uma imagem. Com esse atributo, os buscadores conseguem identificar a sua imagem. tambem é interessate para os mecanismios de busca de imagem como o Google Imagem.
para entendermos como funciona o atributo alt, vamos análisar a tag <img> observe a linha de código abaixo.
<img src =“figuras/marca.jpg” title = “marca do site” alt= “palavra-chave”>
<img> serve para requerer uma imagem. Apartir daqui vamos acrescentar alguns atributos.
<img src =“figuras/marca.jpg”> o src é um atributo que foi acrescentado aqui para dizer o local onde se localiza a imagem, no nosso caso esta na pasta “figuras” e o nome do arquivo é “marca.jpg”.
<img src =“figuras/marca.jpg” title = “marca do site”> preste atenção não é a tag <title> é o atributo que também tem o nome da tag <title>! esse atributo determina que quando colocamos o ponteiro do mouse em cima da imagem, apareça uma legenda com o nome “marca do site”.
<img src =“figuras/marca.jpg” title = “marca do site” alt= “palavra-chave”> e finalmente o atributo alt= “palavra-chave” é um dos mais importantes no nosso caso pois a palavra que escolhermos será aquela que os buscadores pesquisaram.
Obs: A tag <img> é uma das poucas que não precisa de tag de fechamento </img>.
IV - Otimizando URL
h) URL amigáveis: Não se trata de uma tag. Mas faz parte das técnicas de uma busca interna. quando registrar seu site é interessante usar uma url-amigável! de facil compreenção pelo usuário, cada vez que ele encontrar o seu site melhora o seu posicionamento nos sites de busca , tornando-o relevante e cada vez mais influente nos robores de busca. Coloque nomes do seu repertorio des palavras-chaves. Exemplo: “www.nomedomeusite.com.br”
Para finalizar abaixo temos alguns links de ferramentas que ajudam na procura de palavras-chaves:
Por enquanto, é isso.
