Slider 1 mini Slider 2 mini

sexta-feira, 7 de junho de 2013

Como Colocar Marcadores em Forma de Menu Suspenso no Blog

Muitas vezes utilizamos muitos marcadores em nosso blog e acaba ficando feio e ocupando um grande espaço no blog.

Uma forma de reverter a situação sem perder a elegância do blog é substituir os marcadores de texto por marcadores em forma de menu suspenso.
Como Colocar Marcadores em Forma de Menu Suspenso no Blog
Lembrando, antes de começar a editar o Modelo do blog, faça um backup do template.
Como Fazer o Backup?

Acesse painel clique “Modelo”, “Fazer backup/Restaurar”, “Fazer download do modelo completo”.

Como Colocar Widget no Blog?

Após fazer o backup na mesma página “Modelo”, clique em “Editar HTML”, “Prosseguir” e selecione “Expandir modelos de Widgets”.

Procure pelo código (CTRL + F).

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Após localizar o código acima apague o trecho:

<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
E logo em seguida cole esse código no lugar:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecione um marcador</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>

</select>
Clique em visualizar, veja se o código realmente funcionou e salve clicando em “Salvar Modelo”.

Em <option>Marcadores</option>, onde está escrito Marcadores, você pode colocar qualquer nome que você quiser.

Criei esse Artigo baseado no Artigo publicado pelo Fabiano Roberto no Dicas para Blogs.
Gostou deste Artigo? Tem alguma Dúvida? Deixe seu Comentário!

Posted By Unknown13:28

segunda-feira, 24 de setembro de 2012

Setas de Navegação Entre Postagens Para Blogger - Floating NextPrev Dicas blogger e tutoriais


Tutorial completo de implementação do código Floating NextPrev - setas de navegação entre postagens para blogger. 


Antes de mais nada quero parabenizar ao Claudio Sanches do ferramentasblog que desenvolveu o plugin original para o wordpress e também ao Paulo Estevão do Códigosblogque fez toda a adptação do código para que ele fosse usado na Plataforma Blogger.

Plugin em funcionamento no Blogger
Antes de ensinar como colocar os botões de navegação no seu blog, quero deixar bem claro que todo o sistema foi desenvolvido pelo Claudio Sanches, apenas adaptei o código para funcionar no Blogger.
Siga o tutorial:
1) Faça login no Blogger, entre em “Modelo” – > “Editar HTML”. Depois marque a caixa “Expandir modelos de widgets”;
2) Procure (Ctrl + f) por ]]></b:skin> e cole o seguinte código logo ABAIXO da tag encontrada:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts(&quot;a.blog-pager-newer-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-newer-link2&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = alts(&quot;a.blog-pager-newer-link2&quot;).text();
alts(&quot;a.blog-pager-newer-link2&quot;).text(newerLinkTitle);
});
var olderLink = alts(&quot;a.blog-pager-older-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-older-link2&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = alts(&quot;a.blog-pager-older-link2&quot;).text();
alts(&quot;a.blog-pager-older-link2&quot;).text(olderLinkTitle);//rgt
});
});

var fnp = jQuery.noConflict();
fnp(document).ready(function(){

    fnp(&quot;.fnp-previous&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-10
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });
    fnp(&quot;.fnp-previous&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-400
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().animate({
            opacity:0},500)
    });fnp(&quot;.fnp-next&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-10
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });fnp(&quot;.fnp-next&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-400
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().animate({
            opacity:0
        },500);
    });
});
</script>
</b:if>
3) Procure (Ctrl + f) por <b:includable id=’nextprev’>, selecione todo o código a partir dessa tag até a primeira tag </b:includable>.
Ou seja, selecione isso:
<b:includable id='nextprev'>
...
</b:includable>
Obs.: Existem várias tags </b:includable>, é importante você selecionar até a primeira que você ver.
4) Substitua o código selecionado por:
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fnp-nav'>
<div class='blog-pager2' id='blog-pager2'>

<b:if cond='data:newerPageUrl'>
<div class='fnp-previous'><a rel='prev'><div class='fnp-box-left'><div class='fnp-content-left'><div class='fnp-content-border'/><div class='fnp-nav-title'>Anterior</div><div class='fnp-nav-link'><a class='blog-pager-newer-link2' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' style='display: block;'/></div></div></div></a></div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='fnp-next'><a rel='next'><div class='fnp-box-right'><div class='fnp-content-right'><div class='fnp-content-border'/><div class='fnp-nav-title'>Próximo</div><div class='fnp-nav-link'><a class='blog-pager-older-link2' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/></div></div></div></a></div>
</b:if>

</div>
<div class='clear'/>
</div>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Página Anterior</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Próxima Página</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:includable>
Obs.: A segunda parte do código acima, depois de “<b:if cond=’data:blog.pageType != &quot;item&quot;’>” é o código de navegação de páginas do blog, essa parte pode ser editada como quiser, só não retire a condicional (if).
5) Agora devemos aplicar o estilo CSS. Escolha um dos modelos abaixo, abra o link e copie o código correspondente.








6) Agora procure por ]]></b:skin> e cole o código antes dessa tag encontrada.
7) Teste, se não deu nenhum erro e a página visualizada não sofreu alteração, salve. Os botões de navegação só serão vistos quando alguma postagem for aberta.
Espero que gostem do resultado.
Obs.: Não copie o post! Tivemos trabalho em desenvolver o widget, caso queira compartilhar o código, coloque os créditos do Códigos Blog e do Ferramentas Blog.

Posted By Unknown23:52

Personalizando o Link de Navegação do seu Blog : Dicas & Tutoriais


Personalizando o Link de Navegação

Entre no painel do Blogger e clique em “Modelo”, depois no botão “Editar HTML”, lembrando de selecionar a caixa “Expandir modelos de widgets”.

Será preciso identificar longos trechos de código e substituí-los, portanto tenha muita atenção e cuidado. Exatamente pela dificuldade que alguns podem ter para identificar os códigos e as linhas corretas é que recomendamos fazer testes e backup antes de tentar aplicar em seu blog original.
Passo 1.
A primeira parte é modificar o código CSS que configura os links. Encontre o seguinte:
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
Isso terá que ser substituído por completo pelo seguinte código:
#blog-pager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Cor do texto */
background-color: #FFFFFF; /* Cor de fundo */
border: 1px dotted #CCCCCC; /* Cor da borda */

#blog-pager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */

#blog-pager {text-align: center;}
Onde está indicado de vermelho é o que determina a posição relativa na página. No caso os links ficarão centralizados. Se você trocar “center” por “left” os colocará à esquerda e “right” para a direita. Depois de completar todo o processo, veja qual a melhor posição que seu layout se adapta.
Já as partes marcadas em verde claro, determinam as cores. São perfeitamente modificáveis segundo o estilo de seu blog.
Passo 2.
Para que as modificações se apliquem de fato, precisa fazer uma última alteração de códigos, agora na parte do HTML do código-fonte de seu template. Assim procure mais uma vez pelo seguinte (tenha muita atenção pois pode ser um pouco mais difícil achar essa parte por completo e tenha cuidado para não modificar mais que o indicado):
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Para ajudar a encontrar essa parte, isso pode aparecer imediatamente abaixo de uma linha semelhante à esta (mas não modifique ela, é apenas uma ajuda para encontrar o que foi indicado):
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>


Tudo isso será modificado, colocando no lugar este código:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Página anterior'>&lt;&lt; Anterior</a>
</span>
</b:if>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if> 

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Próxima página'>Seguinte &gt;&gt;</a>
</span>
</b:if> 

</div>
<div class='clear'/>
</b:includable>
Bastará salvar o modelo e verificar o resultado em seu blog para certificar-se de que tudo ficou como desejado. Faça as alterações desejadas, passe as páginas do blog para ver se tudo funciona e teste em outros navegadores para ver se não apresenta erros de leitura nem conflito com outras partes e códigos do template em uso.
Espero que seja útil.

Posted By Unknown09:08

domingo, 23 de setembro de 2012

Está Começando Um Blog? Descubra Aqui O Que Você Não Deve Fazer

Filled under: , ,


Acabaram-se as desculpas. Se você ainda não sabia, aprenda agora o que não deve fazer, em hipótese alguma!

1 – Não copie conteúdo

Não CopieO ideal é não copiar conteúdo, ponto.
Publicar conteúdo copiado é prejudicial para o seu blog (além de ser prejudicial para o blog/site copiado), por quê:
  • Seu conteúdo vai ser considerado como “conteúdo duplicado” pelos motores busca (Google, Yahoo, etc.), o que significa que você receberá menos visitas vindas deles;
  • Poucas pessoas vão se interessar em ler seu blog, afinal, podem ler as mesmas coisas onde foram publicadas originalmente – e em um monte de outros blogs que copiaram a mesma coisa que você;
  • Dificilmente seu blog se tornará popular e conhecido, pela mesma razão citada no ponto anterior.
  • Se você não for cuidadoso, poderá incorrer em violação de direitos autorais, o que é crime tipificado no código penal.
Existem outros motivos, mas esses 4 deveriam ser suficientes para lhe convencer de que publicar conteúdo copiado não é uma boa idéia.
Caso não tenha se convencido, pelo menos copie do jeito certo. Quando quiser copiar um texto, procure no blog/site original, pela licença do conteúdo. Ela pode ser de dois tipos
1- Copyright – Se diz “Copyright” ou “Todos os direitos reservados” em algum lugar do blog, mesmo que seja no rodapé, não copie. Caso o fizer, estará cometendo um crime. É sério!
2-Creative Commons –Os blogs e sites que usam esta licença geralmente exibem um selinho que os identifica.O Creative Commons tem várias licenças, e todas elas autorizam a cópia, DESDE QUE se credite o autor. Algumas, além de exigir o crédito, não permitem publicar o conteúdo em sites com fins de lucro – que usem Adsense, por exemplo.Leia a licença de cada site, e certifique-se de cumprir as regras estabelecidas nela.

E se não há informação sobre a licença?

Caso não diga nenhuma das coisas que citei acima, não copie. O mais provável é que a pessoa não permita reprodução de conteúdo. Caso queira muito copiar o texto, entre em contato com o autor e PEÇA LICENÇApara reproduzir seu conteúdo.
E se ele não der licença, NÃO COPIE.

2 – Não esconda os créditos

Não esconda os créditosO fato de que você credite o autor não lhe dá direito de copiar.
O que lhe dá licença para copiar é o autor – ele decide. É um direito garantido por lei.
Crédito é um link clicável, apontando para o post original – não para a home do blog de onde você retirou o texto.
Crédito não deve dizer “Fonte: Lugar de onde você retirou o texto“. Fonte é o que se usa para pesquisar, não uma coisa que se copia. Coloque “Autor”, em vez de “Fonte”. É mais honesto, e é o correto.
O crédito deve estar no início do texto, logo abaixo do título. E deve aparecer no mesmo tamanho que o resto do texto – usar uma fonte minúscula no crédito, para que ninguém veja que o texto foi escrito por outra pessoa é muita filhadaputice.

3 – Não assuma autoria de um texto que não é seu

Diga Não ao PlágioIsso se chama plágio, e também é crime previsto no código penal. Se você copiou um texto, CREDITE. Coloque o nome do autor e um link para a página exata de onde você copiou.
Mesmo que você não diga “Eu escrevi este texto”, se não incluir créditos (nos moldes citados acima) está dando a entender que você é o autor – ou seja, plagiando uma pessoa que gastou tempo, esforço e talento em escrever algo.
De novo, é muita filhadaputice.
Além disso, nenhuma pessoa que tenha um pingo de decência e bom senso vai fazer de conta que criou algo que não criou, não é mesmo?

4 – Não peça links, nem visitas nem “uma força”

Não seja MendigoPedir e mendigar é patético, e não traz resultado algum. Já falei disso à exaustão, e muitas outras pessoas

5 – Não faça hotlink

Não Faça HotlinkHotlink é o que você faz quando você linka uma imagem que esta hospedada em outro blog, fazendo que ela apareça no seu blog.
Isso é errado, pois consome banda que o dono blog tem que pagar. Você faz hotlink, e a outra pessoa paga um custo. Você está roubando banda, e isso é errado!
O correto é copiar a imagem para o seu PC, e fazer upload dela para o lugar onde você guarda suas imagens – por exemplo, na sua conta do Blogger, ou em um serviço grátis de hospedagem de imagens.
Ao fazer hotlink, você se arrisca a que o dono da imagem a troque por outra, e você nunca sabe o que pode aparecer no seu blog – ele pode colocar uma imagem pornográfica, por exemplo. Então, guarde as imagens no seu espaço.

6 – Não escreva errado

Não Assassine o PortuguêsNão escreva com abreviações – pq, vc, msm, e coisas assim.
Não escreva em miguxês; naum ixcreva axim.
Use acentuação – não escreva neh, eh.
Não encha seu texto de palavras como “bróder”, “mermão”, “pow”, “véi”, e “falow”. De ser possível, não use nenhuma palavra desse tipo.
Escreva em português correto, puro e simples.
E use um corretor ortográfico – ele corrige não só a gramática, mas erros de digitação.
Por que é tão importante escrever direito? Porque escrever errado é uma excelente estratégia para afugentar visitantes e leitores, para não ser levado a sério, e para jamais ter um blog bacana e conhecido.

7 – Não faça spam

Não Faça SPAMNão mande emails dizendo “Visite meu blog” e coisas do gênero.
Nem para listas de contatos, nem listas de discussão, nem para lugar nenhum.
Email não solicitado é SPAM – e ninguém pediu para receber email pedindo visitas pro seu blog, não é?
A melhor explicação sobre como a forma correta de fazer divulgação do seu blog foi dada pelo meu amigo Daniel Becher, numa discussão na Lista Blogosfera. Veja só:
“Chegar nas listas e dizer que você tem um blogue sobre aquilo vale apenas na sua apresentação, onde você não vai mandar uma mensagem única e exclusivamente dizendo “visite o meu blog”, acredito, e sim dizendo quem você é, o que faz, os seus gostos etc. De outra forma, vai parecer inconveniente.
E, claro, isso é o que eu acho. Primeiro porque é a forma natural de acontecer. Da mesma forma que você não chega numa gatinha dizendo: “Olá, meu pinto é grande!” e sim “Oi, eu sou o Fulano, blá blá blá” e as suas sobresçalências pubianas ficam pra um momento mais oportuno (relevância).
E segundo porque os “grandes” fazem isso, pois já nasceram grandes, independente de quanto ganham ou visitas que recebam
Essas palavras se aplicam a email, comentários, e qualquer outro tipo de divulgação que você for fazer. Não “empurre” as coisas para as pessoas. Só fale do seu blog quando for adequado, nos lugares adequados. Não saia mostrando o pinto! :P
Também não faça comentários spam – comentários que dizem “Visite meu blog”, comentários que não acrescentam nada, não comentam nada, e só são deixados com o intuito de receber vistas. Quando for comentar, COMENTE – diga algo relevante ou interessante sobre o post, opine.
Não coloque sua url no corpo do comentário, nem assine seus comentários. Nome e endereço do blog devem ir somente nos campos do formulário que servem, veja você, para colocar seu nome e endereço.
No campo “Nome”, coloque seu nome ou seu nick, não o nome do seu blog nem palavras chave, ou qualquer outra estupidez dessas.

Errar é humano

E e todo mundo erra – principalmente quando está começando. No entanto, se você leu este post, já pode evitar os erros listados.
Claro que existem muitos outros erros que os novatos (e não tão novatos) cometem. Para evitá-los, leia bons blogs que ensinam a blogar. Aqui vão algumas sugestões:
Leia esses blogs, e garanto que não cometerá erros! Pelo menos, não muitos! ;)






Posted By Unknown23:32

Tutorial completa Meta Tags - O que são e como utilizá-las


Introdução

Meta tags são linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de te encontrar, por exemplo. Por meio delas, você pode também "assinar" seu site, declarando sua autoria sobre o código fonte.
Cada vez mais os buscadores levam em consideração a qualidade do conteúdo nos resultados de pesquisa, e por isso simplesmente adicionar meta tags no código fonte da sua página não vai melhorar o posicionamento dela. Porém, as meta tags ainda tem seu espaço se utilizadas corretamente.
Neste artigo veremos as principais meta tags e suas funções.

Como utilizar as meta tags

As meta tags devem ser incluídas no seu código HTML, dentro da tag <head>, como mostra o exemplo a seguir:
<html>
	  <head>
	  <title> Aprendendo sobre as meta tags </title>
	  <meta name="author" content="Erika Sarti">
	  <meta name="description" content="Meta Tags - O que são e como utilizá-las">
	  <meta name="keywords" content="sites, web, desenvolvimento">
	  </head>
	  ...
Vamos entender melhor as instruções "menos óbvias", isto é, keywords e description:

keywords

Nesta tag você deve incluir uma quantidade de palavras 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.
<meta name="keywords" content="sites, web, desenvolvimento, html, design">
Pessoalmente, eu costumo incluir os termos no singular e no plural (site, sites). No caso de palavras acentuadas, eu ignoro a acentuação ou utilizo os caracteres acentuados em HTML ("manutenção" fica "manutencao" ou "manuten&ccedil;&atilde;o").
Infelizmente, alguns desenvolvedores fizeram mal uso deste recurso no passado, o que faz com que algunsrobots e spiders não deem muita atenção às meta tags keywords. Se não têm mais tanta influência nos resultados dos principais buscadores, as meta tags keywords ainda podem ajudar a categorizar o conteúdo da sua página. Por isso, sempre use palavras-chave coerentes com o seu conteúdo, e nunca acrescente itens só para aparecer melhor na busca, afinal você sabe que quando o usuário entra no seu site e não encontra o que foi "prometido" sairá rapidamente da página. Além disso, os buscadores melhoram seus algoritmos de busca a cada dia, e um truquezinho que aparentemente vai te ajudar pode atrapalhar e muito.

description

Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site. Procure manter um limite de aproximadamente 90 caracteres.
<meta name="description" content=" Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes">
Sozinhas, as meta tags não fazem milagres na divulgação do seu site: dê muita importância ao seu conteúdo em primeiro lugar. É a dobradinha conteúdo bem apresentado + atualização constante que vai fazer com que o usuário sempre volte. Um título coerente com o conteúdo e explicativo também ajuda.
Cuide também dos seus links: procure inserir apenas endereços para páginas com assuntos relacionados ao seu conteúdo, e tente ser "linkado" de volta. Em quanto mais páginas relevantes sobre o mesmo assunto seu site aparecer, melhor ele estará no ranking dos buscadores.

Escondendo seu site dos buscadores

Hoje em dia é um pouco obsoleto utilizar as meta tags para esconder determinadas páginas do seu site dos buscadores. Para melhores resultados, você pode experimentar o uso de um arquivo robots.txt (link em inglês).
Tão importante quanto conhecer a utilidade da tag keywords é saber usar a tag robots. A função desta é informar aos buscadores se devem indexar sua página ou não. Parece contraditório falar sobre isso, mas, na verdade, bloquear seu site pode ter lá suas vantagens.
Quando você utiliza pop-ups ou iframes para mostrar o conteúdo do seu site, por exemplo, não é interessante que o buscador indexe essas páginas, afinal, se elas forem acessadas individualmente, não vão significar nada e não trarão visitação relevante ao seu site. Também pode ser interessante não indexar seu site quando o conteúdo é restrito a um grupo de pessoas e não precisa de divulgação ou quando você quer fazer um blog mais reservado, por exemplo. Nestes casos, mesmo que outras pessoas façam links para o seu site, ele não aparecerá em nenhuma busca (na verdade, isso pode depender de critérios internos do buscador).
Os valores possíveis para esta tag são:
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="noarchive">
Aqui, os valores "index" e "noindex" se referem ao tratamento da página inicial: se o buscador deve ou não incluí-la nos resultados, respectivamente.
Já os valores "follow" e "nofollow" se referem aos links da página inicial, se eles devem ser visitados e indexados ou não.
Portanto:
<meta name="robots" content="index,follow">
Indexa a página inicial e todas as páginas nela referenciadas.
<meta name="robots" content="noindex,follow">
A instrução acima não indexa a página inicial, mas indexa as páginas nela referenciadas.
<meta name="robots" content="index,nofollow">
A instrução anterior indexa a página inicial, mas nenhum link existente nela.
<meta name="robots" content="noindex,nofollow">
Por fim, a instrução acima não indexa nem a página inicial e nem seus links.
Portanto, se você quiser evitar que os sites de busca encontrem seu site, use a última opção. Porém, se você quiser que apenas o Google não encontre seu site ou se quiser remover uma página dos seus resultados de busca a partir da próxima varredura, pode utilizar a seguinte tag:
<meta name="googlebot" content="noindex,nofollow">
A maioria dos buscadores armazena uma cópia da sua página em cache, para otimizar a busca. Para evitar isso, você pode utilizar a tag a seguir:
<meta name="robots" content="noarchive">
Todavia, lembre-se que além de acelerar a busca, armazenar uma cópia em cache tem a finalidade de disponibilizar o resultado ao usuário caso seu site esteja passando por algum problema técnico. Use esta tag somente se o conteúdo do seu site for muito específico quanto a essa necessidade.

Mais do que divulgar seu site nos buscadores

As meta tags não servem só para divulgar seu conteúdo. Basicamente, a função delas é fornecer informações adicionais sobre seu site. Vamos conhecer melhor algumas meta tags interessantes.

content-language

Especifica a língua primária da página. Útil para ajudar o buscador a classificar seu site no idioma apropriado, orientar os navegadores a exibir acentuação e caracteres especiais corretamente, e para facilitar o uso de corretores ortográficos.
Alguns valores possíveis:
pt Português
pt-br Português do Brasil
en Inglês
en-us Inglês dos EUA
en-gb Inglês Britânico
fr Francês
de Alemão
es Espanhol
it Italiano 
ru Russo 
zh Chinês 
ja Japonês
Um exemplo usando o valor "pt-br":
<meta http-equiv="content-language" content="pt-br">

content-type

Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam exibidos corretamente.
Os valores mais comuns são:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Onde:
text/html define que o conteúdo é um texto em linguagem HTML. Se você desenvolve sites em XHTML ou XML, certamente sabe que deverá aplicar os valores "application/xhtml+xml" e "application/xml", respectivamente.
iso-8859-1 é a codificação da linguagem mais comum para exibir textos em línguas derivadas do latim.

author

Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte:
Eu considero esta tag importantíssima. Ela pode ser útil quando algum usuário procura pelo seu nome em um buscador ou quando o site do seu cliente não tem uma forma de contato direto com você desenvolvedor por alguma razão.
<meta name="author" content="Erika Sarti">
Infelizmente, trabalhamos com o risco de clientes não pagarem pelo nosso trabalho, motivo pelo qual também é importante manter uma tag com o seu nome no código do site para ajudar a provar que ele foi desenvolvido por você.

reply-to

Especifica um endereço de e-mail para entrar em contato com o responsável pelo site.
<meta name="reply-to" content="erikasarti@infowester.com">

generator

Alguma vez você já reparou que quando edita uma página HTML feita no FrontPage ou no Word, muitas vezes é o programa que a gerou que abre para edição, e não o Bloco de Notas ou seu editor não-visual padrão? Isso é por causa da meta tag generator, que especifica o programa que construiu a página:
<meta name="generator" content="Microsoft FrontPage 5.0">
É assim que o sistema operacional sabe que editor utilizar e que ícone mostrar ao exibir um arquivo .htm ou .html em uma pasta.

Redirecionando o visitante para outra página

Alguma vez você já deve ter visitado um site que mudou de endereço e que exibe uma mensagem do tipo:
Você será redirecionado para um novo site em 5 segundos.
Se não quiser aguardar, clique aqui.
Esse redirecionamento pode ser feito com meta tag, por meio de uma única linha:
<meta http-equiv="refresh" content=" 5 ;url=http://www.novosite.com/">
Ou seja, depois de 5 segundos, o navegador será redirecionado para o endereço www.novosite.com.
Essa mesma tag é utilizada para atualizar automaticamente uma página dinâmica, como a home page de um portal ou a sessão de notícias de um site, por exemplo. Neste caso, o intervalo de tempo em segundos deve ser bem maior e a URL deve ser o endereço do próprio site a ser atualizado.
<meta http-equiv="refresh" content="120;url=http://www.seusite.com/">
Lembre-se apenas de utilizar esse recurso com cautela, pois uma página que é atualizada automaticamente pode interromper a atividade do usuário, deixando-o irritado.

Redirecionamento com PHP e código 301

Apesar de as instruções do tópico acima funcionarem, especialistas em Search Engine Optimization (SEO) e o próprio Google recomendam que, toda vez que você tiver que mover uma página permanentemente, o faça utilizando o código 301. Esse procedimento oferece maiores garantias de que o buscador entenderá que se trata de um redirecionamento, diminuindo as chances de problemas na indexação do site.
Em cada linguagem há maneiras de se fazer isso. Usaremos PHP como exemplo. Na página que tiver que ser redirecionada, basta inserir as seguintes instruções:
	  <?
	  Header( “HTTP/1.1 301 Moved Permanently” );
	  Header( “Location: http://www.novoendereco.com.br/” );
	  ?>
Assim, toda vez que o usuário acessar o endereço antigo, será automaticamente redirecionado para o link informado em Location.


Finalizando

As meta tags são interessantes para o seu site, mas não são o mais importante. Você deve priorizar a disponibilização de bom conteúdo e, claro, evitar enganar ou confundir seu usuário. Acreditar que somente um bom trabalho em meta tags será o suficiente para o seu site ser bem indexado é um erro, mesmo porque, conforme já informado no texto, os buscadores estão cada vez mais preparados para identificar "truques". Por isso, utilize meta tags, mas procure também trabalhar com boas práticas.

Posted By Unknown22:48