HTML <head> best practices [closed]

2020-05-16 02:56发布

There are <meta> tags and other things you can place in the <head> of your HTML document. What <meta> tags etc. and best practices do you make use of in your HTML document to make it more accessible, searchable, optimized etc.

12条回答
家丑人穷心不美
2楼-- · 2020-05-16 03:39

Do your users a favor and make their IE engine switch to Chrome one when Chrome Frame is installed :)

<meta http-equiv="X-UA-Compatible" content="chrome=1">
查看更多
放我归山
3楼-- · 2020-05-16 03:40

In addition to the answers above I use the Dublin Core initiative meta-tags.

They are very useful for actual content/papers etc.

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

etc.

查看更多
ら.Afraid
4楼-- · 2020-05-16 03:42

First, make sure the < !DOCTYPE is the verry first element of the document, i.e. no space, tab or corrupted BOM marker.

<!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>
查看更多
霸刀☆藐视天下
5楼-- · 2020-05-16 03:43

In my case:

  • Title (should do [Section Name - Site Name] for better SEO)
  • Meta tag for Content-type, description, and keywords
  • Link to stylesheet(s) (don't forget to specify the media="").
  • <script> tag that links to external javascript files.

All tags should follow the W3C's standard. The W3C site has a more technical and detailed section about the HTML <head> section.

查看更多
ら.Afraid
6楼-- · 2020-05-16 03:47

IMHO, the two most important child tags of <head> are <title> and the Content Type meta tag. Search engines actively look at <title>. Whereas the other meta tags are often ignored. As a multi-lingual web user - I cannot stress more the importance of adding the Content Type tag because without it, the browser needs to autodetect the character set of the web page and this operation is often flaky. The result ends up being that various characters are not rendered correctly to the user or sometimes none at all in the case of Japanese or Chinese.

Here is an snippet of some of the header code from a current project of mine:

<!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>
查看更多
叼着烟拽天下
7楼-- · 2020-05-16 03:49

As far as I'm aware, most search engines ignore any "keywords" or "description" meta tags, instead preferring to read the content of the document.

Getting the page title right however, is of extreme importance.

查看更多
登录 后发表回答