O cabeçalho é a parte onde vai as configurações do nosso site, mas, que não são visíveis aos usuários.
- Serve para fazermos configurações da nossa página, definindo estilos de letras, cores, tamanhos, etc ;
- Nele colocamos as informações como a <title> ,
que representa o Título da Página, aquele que aparece lá na aba. como por exemplo o deste que é "Cabeçalho HTML"
- Podemos adicionar links para o CSS também através da <head> ;
- Podemos adicionar links para a Favicon também através da <head> .
Meta
-A tag <meta> serve para definirmos metadados do nosso site;
-Imagine então que precisamos fazer certas configurações do nosso site e essas são feitas através da <meta> ;
-Veremos algumas configurações básicas da tag, aquelas que aparecem quando iniciamos o programa com <!DOCTYPE> ...
Atributos
- Charset: relacionada à codificação de caracteres especiais. Ou seja, se digitarmos algo em japonês por exemplo, alguns navegadores
vão interpretar o que foi escrido da mesma forma, enquanto outros, não vão conseguir interpretar isso por causa do charset
logo, se não definir o charset alguns navegadores poderão deixar o texto embaralhado, não deixando aparecer como deveria.
Um charset "padrão" seria o "UTF-8".
- Name: Responsável pela portabilidade para dispositivos móveis, ele especifíca qual meta está sendo utilizado.
- Content: vindo após do atributo name, o content apresenta o conteúdo meta.
Meta SEO
A meta SEO (Search Engine Optmization/Otimização para Motores de Busca, exemplo: Google)
São eles:
- Charset: já vimos;
- Viewport: já vimos;
- Author: Define o autor da página
- Description: Descrição da página, aquela que aparece ao pesquisarmos por um site. Se não houver este atributo,
pode acontecer de pegar um texto que tenha na sua página. O ponto é que utilizando, pode-se "falar" para o Google o que
você quer que apareça de descrição da sua página.
- Robots: Utilizado para definir o que queremos que o "robô" do Google faça. Logo, quem ta trazendo os resutlados da pesquisa por
determinado site, etc. é esse robô.
<metaname="description"content="descrição_do_site">
<metaname="robots"content="noindex, nofollow">
Perceba que para o robô utilizamos "noindex, nofollow" e vou explicar o que quer dizer essas duas relações.
Bom, "nofollow serve para dizer ao robô de pesquisas do Google que não deve seguir os links que há dentro do site.
Já o "noindex utilizamos para dizer à ele que não queremos que ele indexe a página.
Fica a dúvida, quando utilizamos o robots?
Somente quando quisermos falar algo relacionado à isso, pois de padrão o robô já está para fazer a indexação e seguir os links da página.
Favicon
Favicon nada mais é do que aquele ícone que aparece nas nossas guias, aquela pequena imagem que acompanha o Título da Página.
Definimos o Favicon através da tag <link> , acompanhada
do atributo rel (de relação)
Definimos o Favicon através do comando <link&rel=
"icon"href= "...">
Para iPhones de não retina, iPod Touch e dispositivos Android 2.1+.
Definimos o Favicon através do comando <linkrel=
"apple-touch-icon-precomposed"href= "...">
Para iPads de 1° e 2° Gen, também há um processo um pouco diferente, mas não se assuste.
Calma, você não precisa decorar tudo isso, existem Frameworks (bibliotecas de códigos) que já possuem isso pronto para pegarmos e usarmos.
A questão é sabermos o que é e para que serve.
Meta Social
Bem por cima, é a nossa tag <meta> para redes sociais, como o Facebook, Twitter, etc.
Graph: Facebook
- Open Graph: Imagem
<metaproperty=op: imagecontent="...">
Nesse caso temo que o OP seria relacionado a uma imagem, onde o link se encontra após o content.