Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • 01 Metatags

    Enviado por

    Amanda C. Piske
    4 visualizações5 páginas
    Curso

    Título original

    01_metatags

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Curso

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    4 visualizações5 páginas

    01 Metatags

    Enviado por

    Amanda C. Piske
    Curso

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 5

    Codificação Front-End

    Meta tags

    1. Abra o arquivo index.html


    com o bloco de notas.

    <!DOCTYPE html>
    2. Copie o trecho destacado <html lang="pt-br">
    <head>
    em vermelho e cole-o no <meta charset="UTF-8">
    bloco de notas. <title>Meu Primeiro Site</title>
    <meta name="description" content="Programador Front-End,
    Senai.">
    <meta name="keywords" content="HTML, CSS, JavaScript,
    Senai">
    <meta name="author" content="seu nome">
    <meta name="viewport" content="Width=device-with, initial-
    scale=1.0">
    </head>
    <body>
    <p>Meu primeiro site</p>
    </body>

    SENAI 1
    Codificação Front-End

    Dessa forma:

    3. Salve e feche o
    arquivo.

    SENAI 2
    Codificação Front-End

    4. Abra o arquivo
    index.html em
    algum
    navegador.

    Perceba que não houve mudança, pois as tags dentro da head não
    são visíveis para o usuário.

    SENAI 3
    Codificação Front-End

    Outro teste

    Embora não estejam visíveis para o usuário, as meta tags


    description, keywords, author e viewport são muito relevantes
    para determinar quais páginas devem ou não ser indexadas nas
    pesquisas realizadas pelos usuários em buscadores como
    Google, por exemplo.

    Pesquise no Google, ou em outra ferramenta de busca de sua


    preferência, por “curso senai”. O resultado da busca
    provavelmente será bem parecido com a imagem a seguir.
    Repare nos destaques da imagem para conhecer onde alguns
    dos metadados são utilizados.

    Veja o exemplo:

    <title>
    O título “Cursos Técnicos – Portal SENAI-SP” foi incluso na tag <title>.

    <meta name="description" content=“ ”>


    A breve descrição “Jovens profissionais cada vez mais qualificados e especializados. Os Cursos Técnicos
    do SENAI-SP preparam jovens para trabalhar nas mais dive...” foi inserida no atributo content e faz
    parte do metadado description.

    SENAI 4
    Codificação Front-End

    Pense nisso
    No caso da sua página HTML, qual título aparece
    como sugestão de site?
    A resposta é: Meu primeiro site.

    SENAI 5

    Você também pode gostar