Olá pessoal… hoje eu vou explicar um pouco sobre Tabela Semântica, esse post vai ajudar muito o meu amigo Alex que trabalha comigo lá na Mundo Click e também espero ajudar muitas pessoas que tem a mesma dúvida que a dele, então chega de papo e vamos começar o que interessa.

Bom primeiro eu vou mostrar como era uma tabela antiga sem semântica:

TITULO 1
TITULO 3
TITULO 3


TEXTO 1
TEXTO 2
TEXTO 3


RODAPÉ 1
RODAPÉ 2
RODAPÉ 3

Como vocês podem ver eu fiz uma tabela muito simples de 3 colunas , só para quem ainda não conhece eu vou explicar para que serve cada TAG.

<table> – A tag TABLE é o corpo da tabela dentro dela que vocês colocam todos os dados, ainda nele tem varias propriedades que podem ser integradas como cellpadding e cellspacing essas duas propriedades servem para tirar o espaçamento padrão que vem na TAG table e ainda tem várias propriedades que podem ser utilizadas.

<tr> – A tag TR ela sempre vem depois da TABLE porque ela é responsável de criar as colulas da tabela.

<td> – A tag TD ela é a celula da tabela é o lugar onde você o conteudos.

Agora é montar uma tabela seguindo as regras de semântica:

TITULO 1
TITULO 3
TITULO 3




RODAPÉ 1
RODAPÉ 2
RODAPÉ 3




TEXTO 1
TEXTO 2
TEXTO 3

Dá para ver como muda bastante mas estruturamente é a mesma mesma tabela somente o “ROPAPÉ” que mudou de lugar para ficar mais simples de entender eu vou explicar cada uma. As tags TABLE, TR, TD continuam mas agora adicionamos mais 4 tags e uma propriedade na tag TABLE.

SUMMARY – Essa propriedade serve para colocar “nome/titulo” da sua tabela.

<THEAD> -  essa tag é muito importânte porque nela que vai o cabeçalho da sua tabela.

<TFOOT> -  essa tag também é importate mesmo colocando ela abaixo da THEAD ela sempre vai ficar no rodapé da sua tabela.

<TH> -  essa th só funciona dentro da THEAD e TFOOT e o padrão dessa tag é negrito e centralizado.

<TBODY> – como o nome dela já diz ela é o corpo da sua tabela dentro dela podem ser colocadas as tags TR e TD.

Espero ter ajudado mas se vocês tiverem muitas dúvidas é só deixar um comentário ou mandar um email “chrdesigner@chrdesigner.com” que eu respondo até a proxima.

- Visualizar Exemplo

- Download do Arquivo

Eu estava lendo no blog do Fabio Ricotta e vi esse artigo muito bom falando sobre como melhorar a indexação de Sites em Flash, na Produtora Web que eu trabalho “Lógica Digital” eu sempre converço com o responsável em flash “Fabio JR.” como nos podemos melhorar a indexação. Abaixo vai ter uma breve descrição como podemos melhorar isso.

A grande maioria sabe, o Flash é totalmente um recurso visual, e o Googlebot não possui olhos. O Googlebot pode ler os arquivos Flash e extrair texto e links contidos nele, mas a estrutura e o contexto é perdido. Além disso, o conteúdo textual é, em algumas vezes, armazenado de forma gráfica no Flash, e como o Googlebot não possui um algoritmo para o reconhecimento destes gráficos, estas importantes palavras-chave são perdidas. Tudo isso significa que mesmo que o seu conteúdo em Flash esteja na base de dados do Google, ele pode perder um pouco de texto, conteúdo, ou links. O agravante fica no seguinte ponto: o Googlebot pode entender alguma coisa dos arquivos Flash, mas muitos outros crawlers não podem.

Então, o que um web desginer deve fazer?

A única coisa que se deve fazer é prover ao Googlebot e a todos os crawlers, o mesmo conteúdo que é disponibilizado aos usuários. Se você não o fizer, o seu site ficará suspeitos através dos algortimos de busca dos buscadores.

Algumas sugestões foram feitas pelos engenheiros da gigante Google, para quem desenvolve em Flash:

• Tente usar Flash onde é realmente necessário. Muitos sites como o Youtube, utilizam a tecnologia Flash para a exibição de vídeos, mas o restante do website é baseado em HTML para a perfeita estruturação.
• sIFR: Muitos sites utilizam o Flash para forçar os browsers a apresentar textos em uma fonte que o usuário não possua. Técnicas como sIFR deixam browsers que não possuem suporte ao Flash, lerem o conteúdo normalmente ao invés de forçar a aparição do objeto.
• Criar versões sem Flash: Um modo comum de contornar o problema de indexação de sites em Flash é a criação de uma página inicial para a seleção do tipo do site(com ou sem flash).

Olá pessoal neste post nos vamos tratar de uma coisa muito importante, “Favicons” vamos saber “O que é” e “Como colocar no seu site o blog”.

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador.

Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Como transformar meu arquivo em .ico?

Nesses links abaixo são alguns sites que transformam suas imagens em extensão .ico para vocês.

http://www.favicon.cc/

http://www.html-kit.com/favicon/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.co.uk/

E agora como colocar o favicon no meu Site ou Blog ?

Agora que já possui o favicon é necessário fazer o upload da imagem para a pasta principal  “pasta raiz” do seu site ou blog e colocar o código dentro da TAG “head” abaixo eu vou dar um exemplo como fazer.

<head>

<link rel=”shortcut icon” href=”http://www.meusite.com.com/favicon.ico”/>

</head>

Espero que vocês tenham gostado do post… até mais…

Neste post vai explicar um pouco mais sobre o que é “Meta Tags” é muito importante saber para que serve cada “Meta” para o posicionamento do seu site ou blog nos sites de busca.

Meta Tags são linhas de código HTML, também conhecidas como “etiquetas” e sua função é falar para os robôs buscadores do que se trata o conteúdo do seu site. Nelas você vai inserir as palavras que facilitarão o entendimento dos usuários que estiverem à sua procura, além de informar a qualquer um que veja seu código-fonte que você é o autor do mesmo.

Exemplo básico de Meta Tag:
<HTML>
<HEAD>
<TITLE>aqui vai o Título da página do site <TITLE>
<META NAME=”author” CONTENT=”Nome do autor do site”>
<meta name=”description” content=”Aqui dentro vai a descrição da página ou do site.”>
<META NAME=”keywords” CONTENT=”tecnologia, internet, web, desenvolvimento, seo”>
<meta name=”URL” content=”http://www.seusite.com.br” />
<meta name=”language” content=”portuguese” />
</HEAD>

Vamos detalhar cada item para facilitar

<TITLE > Conhecendo as Meta Tags </TITLE >
Title é onde definimos o título da página do site. Porém, não podemos escrever o que quisermos, temos um limite de 70 caracteres nos resultados de busca para o título de uma página. Ou seja, qualquer coisa além disso ninguém irá ver.

<META NAME=”author” CONTENT=”Nome do autor do site” >
Serve para definir o autor da página. Alguns buscadores têm a opção de busca por autor, por isto esta meta é importante. Não deixe de utilizá-la sempre.

<meta name=”description” content=”descrição da página” / >
Define a descrição da página no buscador. É através dessa meta que você vai falar ao buscador do que se trata seu site. Utiliza no máximo 255 caracteres, além disso não servirá para nada.

<meta name=”keywords” content=”tecnologia, internet, web, desenvolvimento, seo” / >
Inclua nesta tag o maior número possível de palavras que tenham a ver com seu site. Não repita palavras e tente utilizar sinônimos, além de nunca quebrar uma linha de palavras-chave, pois o código será considerado um erro e será ignorado pelos robôs. Utilize quantas meta tags keywords você precisar, o ideal seriam de 20 a 60 palavras, mas fique à vontade para colocar as todas necessárias.

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. Você pode incluir os termos no singular e no plural (palavra, palavras). No caso de acentuação, ignore-as ou utilize os caracteres acentuados em HTML (”manutenção” fica “manutencao” ou “manutenção”).

Cada buscador trabalha de forma única, é preciso estudar e entender a forma que cada um trabalha a fim de obter um melhor resultado em todos eles.

<meta name=”URL” content=”http://www.seusite.com” / >
Mostra aos buscadores qual a url principal do seu site.

<meta name=”language” content=”portuguese” / >
Define a linguagem da página do seu site. Esta meta é muito importante para que seu site apareça na busca pela linguagem correspondente, caso contrário, sua página só terá chances de aparecer na busca geral.

<meta name=”copyright” content=”seus direitos autorais” />
Se você é um desenvolvedor web, não pode esquecer essa tag: ela define o nome do desenvolvedor e seus direitos sobre ela.

<meta name=”robots” content=”INDEX, FOLLOW” / >
Esta meta é muito importante para qualquer site, pois define se o buscador pode indexar sua página, clicar nos links e catalogar as imagens que existem em seu site. Por isso é importante o ALT nas imagens. Esse código pode ter diversas variações, veja:

* INDEX = informa ao robô que a página pode ser catalogada
* FOLLOW = informa ao robô que ele pode explorar a página
* NODINDEX = informa ao robô que ele não pode catalogar a página
* NOFOLLOW = informa ao robô que ele não pode explorar a pagina
* NOIMAGEINDEX = informa ao robô que ele não pode catalogar as imagens da página
* NOIMAGECLICK = informa ao robô que ele não pode explorar os links nas imagens
* ALL = informa ao robô que ele tem todas permissões na página
* NONE = informa ao robô que ele não tem permissões na página

Importante: A indexação das páginas ou seguimento de link são feitas automaticamente pelos buscadores sem você precisar usar as opções index e follow, mas nada impede que você coloque isso para reforçar essa opções.

<meta name=”revisit-after” content=”5 days” / >
Informa ao robô de quanto em quanto tempo a página é atualizada. Quanto menor o tempo de atualização maior o page-rank da página.

Caso você não atualize a página dentro do período pré-determinado, o buscador “exclui” a página do banco de dados. Devo dizer que isto é a teoria, mas felizmente isso não tem ocorrido. Fiz alguns testes e na prática isso não ocorreu. Lembrando que atualização dinâmica não vale para o robô.

<meta name=”reply-to” content=”seu@email.com.com” / >
Serve para informar ao robô para qual e-mail devem ser enviadas perguntas, respostas e comentários sobre a página/site.

<meta name=”document-class” content=”Completed” / >
Serve para informar ao robô a classe do documento.

<meta name=”document-classification” content=”Internet Services” / >
Serve para informar ao robô a categoria do documento.

<meta name=”document-rights” content=”Public” / >
Informa ao robô os direitos do documento (se é public, private, internal…)

Ex. Se você quer deixar uma seção privada e não quer que o robô a exiba nas buscas, coloque essa tag na página.

<meta name=”document-rating” content=”General” / >
Serve para informar ao robô a classificação da página quanto a idade. Confira o exemplo abaixo:

* General = padrão para todas as idades
* Mature = somente para adultos
* Old 14 years = para maiores de 14 anos (este atributo é devido a lei americana de proteção online para criança menor de 13 anos)
* Safe for kids = para crianças

No Brasil não costuma-se utilizar esse tipo de classificação, mas o correto seria. Então seja legal e use isso para facilitar as ferramentas de proteção a classificarem seu site.

<meta name=”document-state” content=”Dynamic” / >
Serve para informar ao robô se a pagina é dinâmica (jsp, aspx, asp, php,) ou até mesmo estática. Nesse caso as páginas html também podem ser dinâmicas, se tiverem a interferência de scripts baseados em tecnologia server-side.

<meta name=”document-distribution” content=”Global” / >
Serve para informar ao robô a distribuição do documento (global, regional, internal).

<meta name=”cache-control” content=”Public” / >
Serve para informar ao buscador se a página pode ser armazenada em cache. Se sua página sofre constante atualização evite usar essa tag, já que o cache pode ficar desatualizado no buscador.

<meta http-equiv=”Expires” content=”Thu, 01 Jan 2009 00:20:00 GMT” / >
Serve para informar ao sistema que dia a página deve expirar, se não for deletada antes.

<meta name=”Target” content=”_self” / >
Serve para informar ao navegador qual deve ser o destino padrão para os links da página. Isso vale para quando você não coloca o destino em seus links. Por padrão o navegador vai adotar o que estiver dentro desta tag, mas ela não inibe a ação de link que você tenha colocado.

Ex. Se você colocou em um link
outrapagina, mesmo que o parâmetro de meta tenha sido definido como “_self”, o link o qual você fez abrirá como _blank. Nesse caso assume a sua definição de link e não a padrão de página.

<meta http-equiv=”Content-Language” content=”PT-BR” / >
Serve para informar ao navegador em qual idioma está o conteúdo atual da página. Se seu site tiver 2 ou 3 idiomas, separe cada idioma em htmls diferentes e classifique a tag dessa forma, pois caso contrário o google somente edificará o idioma principal.

<meta name=”Publisher-Email” content=”seu@email.com.com” / >
Serve para informar o e-mail de quem publicou a página. Nesse caso se você é o desenvolvedor coloque seu e-mail.

<meta name=”Contributors” content=”Robson Marquesin e Equipe” / >
Serve para informar quem são os publicadores da página, em geral, a equipe que está batalhando no dia-a-dia.

<meta name=”Page-Topic” content=”seo” / >
Serve para informar o tópico principal da página.

Referência:  Carreira Solo

Como eu sou novo nesse papo de SEO eu ando pesquisando muito em vários sites como Mundo SEO, Brasil SEO e vários outros. O mais importante no SEO é sabe como estruturar um Site corretamente nesse post vai ter as principais técnicas do que devemos saber.

1. Defina o tema do site.
Através do tema será possível escolher o melhor design, títulos, meta tags e conteúdo para o site. Atente para títulos e meta tags que devem ser diferentes para cada página, isso parece lógico, mas muita gente esquece disso. Outra coisa é não repetir conteúdo. As ferramentas de buscas possuem algoritmos que verificam a existência de conteúdo duplicado em suas páginas.

2. Trabalhe com texto de âncora em seus links.
Texto de âncora (Ancor Text) é a palavra ou frase usada como link na sua página. É importante trabalhar esse texto de âncora usando palavras-chave, pois ele está diretamente relacionado com a página a qual está relacionada.

3. Mantenha o usuário no site.
Sites feitos de qualquer jeito, mal organizados e com apresentação ruim, podem fazer com que um possível usuário nem navegue seu site. Portanto, ao criar ou otimizar um site, não esqueça de verificar se seu design é moderno, chamativo e se está bem feito.

4. Use as tags H1, H2 ou H3 para definir títulos e subtítulos.
É fundamental estruturar o conteúdo de forma correta.

5. Posicione suas informações de forma a facilitar a visualização do usuário.
Conteúdo ou informações posicionadas de forma errada podem fazer com que o usuário não as encontre. Isso faz com que ele acabe desistindo de navegar o site. Então evite que aconteça isso, faça um estudo de usabilidade para a construção do seu site.

6. Evite formatações in-line nas páginas.
Use um arquivo CSS para separar o código da formatação. Isso ajuda manutenção e deixa o código mais limpo.

7. Problemas com navegadores diferentes.
Atualmente, existem no mercado vários navegadores diferentes e cada um deles faz a leitura e interpretação de suas páginas de maneiras diferentes. Portanto, faça um teste com suas páginas em alguns navegadores com configurações e resoluções da tela para testar a sua compatibilidade. Recomendo verificar as páginas no IE (Internet Explorer) e Firefox que são os navegadores mais usados atualmente.

Referências: Mundo SEO e Brasil SEO

No outro dia eu e o Marcelinho estávamos converçando sobre esse assunto ai resolvi dar uma pesquisa sobre oque é “Black HAT” ai eu achei esse post no site Mundo SEO muito bom. Basicamente há 3 técnicas-chave dentro do SEO:
White Hat SEO: Técnicas permitidas que realmente otimizam seu site deixando-o mais atraente pelos mecanismo de busca.

Gray Hat SEO: Técnicas de procedência duvidosa, embora não sejam consideradas técnicas de Black Hat, atuam no limiar. O uso excessivo das mesmas pode levar a punição pelos mecanismos de busca.

Black Hat SEO: Técnicas de Otimização de sites mal vistas pelos mecanismos de busca. Embora tragam resultados a curto prazo para o seu site, mais cedo ou mais tarde este será penalizado pelas search engines.

Vamos tratar neste post, algumas técnicas de Black Hat. Desaconselhamos ao extremo o uso das mesmas, porém é importante ter consciência, para eventualmente evitá-las. Pois quem nunca teve uma idéia genial de subir o rankeamento do site rapidamente, não é mesmo? Então é bom ter noção de como poderá ser penalizado pelo uso da mesma!

As principais técnicas black hat são:

Keyword Stuffing: Basicamente é um spam de palavras-chave ( keywords ) durante todo conteúdo da página.

Invisilbe Text: Técnica em que deixa o texto escondido, camuflado com a mesma cor da página de fundo. Assim fica imperceptível ao usuário porém relevante ao mecanismo de busca. Geralmente usam palavras-chaves mais visadas sem relação com o texto.

Cloaking Page: Finalidade de exibir páginas distintas para as search engines do que para os usuários normais. Direcionam o acesso checando o IP ou o navegador do visitante.

Doorway page: Semelhante a Cloaking Page, porém ao invés de utilizar do navegador ou o IP do usuário, utilizam de javascript, meta ou ocasionalmente de cliques feitos pelo mesmo.

Link Farms: Processo onde várias páginas são criadas em sites distintos e nelas há vários links apontados mutuamente. Ou mesmo uma única página apontando para várias outras. Este processo de troca de links não é bem vista e passiva de punição.

Over-Submitting: A utilização de ferramentas de divulgação que constam de processos automáticos, pode levar envios redundantes ao mesmo local, e desta forma são considerados spam.

Duplicated Content: Sabe-se a relevância que os mecanismo de busca dão a unicidade da informação apresentada, então é necessário tomar cuidado para evitar conteúdo duplicado da mesma.

Misrepresenting Content: É mostrado um conteúdo diferente do que a página deveria mostrar. Desta forma tenta enganar o usuário, que buscaria tal informação e tem uma surpresa.

Referência: Mundo SEO

Com o lançamento do WordPress 2,7 paged comments tornou construído em um recurso. Por padrão, eles são ativados em ambas as novas instalações e atualizações. Onde ele pode ser bom para a usabilidade, pode não ser bom para SEO.

De uma perspectiva usabilidade, paged comments que são bons lugares para obter uma série de observações. Por padrão, o WordPress corta-las em 50 comentários por página. Os usuários, então não temos de esperar por mais de 100, ou até 1000, comenta a carregar. Sim, eu já vi lugares com mais de 1.000 comentários. O tempo que leva para uma página com muitas das observações a carga pode ser muito maior do que o utilizador está disposto a esperar. Quebra-los em páginas acelera página carga tempo e torna o site mais amigável.

De um SEO vista, paged comments podem dificultar a postagem. Com paginável comentários, cada página tem um URL separado e do próprio posto é duplicada entre cada página. Isto pode causar problemas conteúdo duplicado e visitantes do site poderão ser introduzidos na página 3 comentário de uma postagem. Idealmente, eles entram em todos os principais pós página.

Um blog proprietário poderia bloquear comentar páginas dos mecanismos de pesquisa, mas o conteúdo a ser criada pelos comentários na página dois + então não pode ser usado para ajudar a impulsionar o tráfego para o cargo. Os comentários são realmente uma ótima maneira de obter os usuários criem conteúdo adicional para um blog e não queremos que a solta.

Então, qual é a melhor solução? Minha recomendação seria configuração paged comments e colocar 100 comentários por página. Dessa forma, você precisará de um primeiro lote de comentários em uma postagem individual antes de comentar páginas começam a aparecer. Quando você tem mais de 100 comentários e, em seguida, o foco deveria ser mais sobre usabilidade, uma vez que é bastante óbvio que o lugar é muito popular. , Poderá haver ainda algumas implicações SEO, mas por esta altura, os usuários são mais importantes.

Se você ainda quiser ter paginado comentários, e estão preocupados que o SEO implicações são grandes para a ignorar e, em seguida, check-out Pressed Words’ SEO for Paged Comments plugin. Eu não tentei isso sozinho, mas ele alega que ponha pós cantadas em todas as páginas do comentário e apenas mostrar o post completo sobre os principais post URL. Esta parece ser uma solução lógica.

Há um monte de usabilidade vs SEO debates lá fora. Cada um deve ser tomada numa base caso-a-caso e a verdadeira solução é até o proprietário do site. No caso dos comentários paginado, colocando 100 comentários por página e, em seguida, criar paginável comentários, é a melhor solução, como usabilidade vitórias fora, neste cenário, em minha opinião.

Referência: Blogger Design