HTML melhores práticas [fechado]

StackOverflow https://stackoverflow.com/questions/275631

  •  07-07-2019
  •  | 
  •  

Pergunta

Existem marcas <meta> e outras coisas que você pode colocar no <head> do seu documento HTML. O que <meta> etiquetas etc. e as melhores práticas que você fazer uso de em seu documento HTML para torná-lo mais acessível, pesquisável, otimizado etc.

Foi útil?

Solução

No meu caso:

  • Título (deve fazer [Seção Nome - Nome do site] para melhor SEO)
  • Meta tag para Content-type, description e keywords
  • Link para a folha de estilo (s) (não se esqueça de especificar o media="").
  • tag <script> que os links para arquivos javascript externos.

Todas as tags devem seguir o padrão da W3C. O site W3C tem um seção mais técnica e detalhada sobre a seção <head> HTML.

Outras dicas

Os seus usuários um favor e fazer o seu interruptor do motor IE para o Chrome um quando Chrome frame está instalado:) 

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Você vai querer colocar elementos script no final da página antes do encerramento do elemento BODY. Consulte http://developer.yahoo.com/performance/rules.html#js_bottom para mais detalhes.

Além do doctype habitual, título, etc, vou tentar e dar-lhe algumas coisas que eu aprendi e implementados que possam ser de ajuda para você.

Em primeiro lugar, lembre-se que o título, para melhor experiência do usuário deve ter a subseção mais relevantes primeiro. Isso é porque ele geralmente é exibido no nome da barra de título / lista de guia / marcador. Considere esta página título ... 

Stack Overflow - HTML head best practices

torna-se Stack Overflow ... (mastigava para economizar espaço na barra de guia lista / marcador)

Agora, se você tinha 5 abas StackOverflow abrir (como costumo fazer: P)? Então como é que o usuário saiba qual é qual

Observe também com CSS a natureza em cascata ... Então, a ordem destes importa. Mesmo com Javascript, quaisquer dependências em outros sites externos devem ser permitidas para. Eu coloquei o meu na cabeça e havn't notado uma diminuição de desempenho. Eu colocá-los lá porque me parece mais arrumado e lógico. Apesar de algumas outras pessoas vão recomendo colocar as ligações <script src=""> em apenas antes </body> para que o navegador não vai temporariamente tenda ... Basta usar o que funciona melhor para o seu site.

Também uma tag Meta de 'rating' com software 'geral' Filtragem da rede de dar a conhecer o seu site é seguro para os espectadores de todas as idades (desde que, é claro!)

Eu também uso .. 

<link rel="start" href="/" title="Home" />

para deixar o know navegador onde a casa do meu site é. E para qualquer navegador sistemas de pré-busca, embora eu acredito que estes estão ainda a ser implementado por navegadores sem a ajuda de plugins.

Considere também o 'próximo' e 'anterior' <link rel=""> se suas páginas estão em uma seqüência de tipos.

Em primeiro lugar, verifique se o 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>

Eu não vi isso mencionado: a tag <base>, se especificado, deve ser o primeiro elemento em <head>. (A base URI do documento é assumido como sendo . antes / se não especificado.)

IMHO, os dois mais importantes tags filhas de <head> são <title> ea tag Tipo meta conteúdo. Os motores de busca procurar activamente na <title>. Considerando que os outros meta tags são muitas vezes ignorados. Como um usuário de web multi-lingual - Eu não posso enfatizar mais a importância de adicionar a tag tipo de conteúdo porque sem ele, as necessidades do navegador para detectar automaticamente o conjunto de caracteres da página web e esta operação é muitas vezes escamosa. As extremidades resultado sendo que vários personagens não são processados ??corretamente para o usuário ou às vezes nada no caso do japonês ou chinês.

Aqui está um trecho de algum do código de cabeçalho de um projeto atual da mina: 

<!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">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>

Há uma questão relacionada aqui que podem ajudar a adicionar um pouco de luz sobre a ordem das tags.

Geralmente minhas páginas incluem o seguinte: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

DocType é importante para fazer cumprir prestação estrita (modo Sem peculiaridades) pelo navegador. Você pode querer usar XHTML em vez - contanto que não há ninguém lá. Acrescento Direitos de Autor e Autor puramente porque eu desenhar e criar as páginas para outras empresas. Descrição é para SEO, e idioma é para o navegador (se ele suporta).

Eu não acredito que faz a grande diferença que meta tag vem em primeiro lugar, ou se o título deve estar acima. O que conta na maioria dos casos é que ele existe na página, e tem o conteúdo correto.

Tanto quanto eu estou ciente, a maioria dos motores de busca ignorar qualquer "palavras-chave" ou "descrição" meta tags, preferindo ler o conteúdo do documento.

Obtendo o título da página direita no entanto, é de extrema importância.

título, meta tags de palavras-chave, tipo de conteúdo (se não explicitamente definido pelo servidor web), e qualquer CSS a ser aplicado à página.

Declarando o CSS na frente permite que o navegador para colocar a página de forma mais eficiente (ver http://developer.yahoo.com/performance/rules.html#css_top ).

Gostaria de acrescentar uma nota importante: se você estiver usando tag meta X-UA-Compatible do IE para modos de renderização do interruptor para Interet Explorer, você deve inseri-lo como o primeiro item na CABEÇA: 

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

Além das respostas acima eu uso os iniciativa meta-tags Dublin Core .

Eles são muito úteis para o conteúdo efectivo / papers etc. 

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

etc.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top