HTML< head>ベストプラクティス[終了]
質問
< meta>
タグと、HTMLドキュメントの< head>
に配置できるその他のものがあります。 HTMLドキュメントで< meta>
タグなどとベストプラクティスを利用して、アクセスしやすく、検索しやすく、最適化するなど
解決
私の場合:
- タイトル(SEOを改善するために[セクション名-サイト名]を実行する必要があります)
-
Content-type
、description
、およびkeywords
のメタタグ
- スタイルシートへのリンク(
media =""
を指定することを忘れないでください)。
外部のJavaScriptファイルにリンクする -
< script>
タグ。
すべてのタグはW3Cの標準に従う必要があります。 W3Cサイトには、より技術的で詳細なセクション HTMLの< head>
セクションについて。
他のヒント
Chromeフレームがインストールされています:)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
SCDYPT要素は、BODY要素が閉じる前のページの最後に配置する必要があります。 http://developer.yahoo.com/performance/rules.html#js_bottom詳細については。
通常のdoctype、タイトルなどに加えて、私が学んで実装したいくつかのことを提供します。
まず、最高のユーザーエクスペリエンスを実現するために、タイトルには最初に最も関連性の高いサブセクションを含める必要があることに注意してください。これは通常、タイトルバー/タブリスト/ブックマーク名に表示されるためです。このページタイトルを検討してください...
Stack Overflow - HTML head best practices
スタックオーバーフローになります...(タブバー/ブックマークリストのスペースを節約するために変更されました)
今、5つのStackoverflowタブが開いている場合(私がよくやる:P)、どのタブがどれであるかをユーザーはどのように知るでしょうか?
また、CSSではカスケードの性質に注意してください...したがって、これらの順序は重要です。 Javascriptと同様に、他の外部サイトへの依存関係を許可する必要があります。私は私の頭に入れて、パフォーマンスの低下に気づきませんでした。私はそれをもっときちんと論理的に見えるので、そこに置きます。ブラウザが一時的に停止しないように、&lt; / body&gt;
の直前に&lt; script src =&quot;&quot;&gt;
リンクを配置することを推奨する人もいますが、 ...サイトに最適なものを使用してください。
また、「レーティング」と「一般」のメタタグにより、ネットフィルタリングソフトウェアは、サイトがすべての年齢の視聴者にとって安全であることを認識できます(もちろん、そうであれば!)
私も使用しています。
<link rel="start" href="/" title="Home" />
私のサイトのホームがどこにあるかをブラウザに知らせます。また、ブラウザのプリフェッチシステムについては、これらはプラグインの支援なしにブラウザによってまだ実装されていないと思います。
ページが並べ替えられている場合は、「次」および「前」の&lt; link rel =&quot;&quot;&gt;
も考慮してください。
まず、&lt; !DOCTYPEはドキュメントの最初の要素です。つまり、スペース、タブ、破損したBOMマーカーはありません。
<!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>
これは言及されていませんでした:&lt; base&gt;
タグは、指定されている場合、&lt; head&gt;
の最初の要素である必要があります。 (ドキュメントのベースURIは、。
の前/指定されていない場合を想定しています。)
IMHO、&lt; head&gt;
の2つの最も重要な子タグは、&lt; title&gt;
とコンテンツタイプメタタグです。検索エンジンは積極的に&lt; title&gt;
を調べます。一方、他のメタタグはしばしば無視されます。多言語Webユーザーとして-コンテンツタイプタグを追加することの重要性を強調することはできません。タグがないと、ブラウザはWebページの文字セットを自動検出する必要があり、この操作はしばしば不安定です。その結果、さまざまな文字がユーザーに正しく表示されないか、日本語または中国語の場合はまったく表示されないことがあります。
現在の私のプロジェクトのヘッダーコードの一部のスニペットを次に示します。
<!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>
関連する質問がありますこちらタグの順序。
通常、私のページには以下が含まれます。
<!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は、ブラウザーで厳密なレンダリング(No quirksモード)を強制するために重要です。代わりにXHTMLを使用したい場合があります-XHTMLがあればそれです。著作権と著者を追加するのは、他社のページを設計および作成するためです。説明はSEO用で、言語はブラウザ用です(サポートしている場合)。
メタタグが最初に来るか、タイトルが上にあるべきかどうかに大きな違いがあるとは思わない。ほとんどの場合に重要なのは、ページ上に存在し、正しいコンテンツを持っていることです。
私が知る限り、ほとんどの検索エンジンは「キーワード」を無視します。または「説明」代わりにドキュメントのコンテンツを読むことを好むメタタグ。
ただし、ページタイトルを正しく取得することは非常に重要です。
タイトル、キーワードのメタタグ、コンテンツタイプ(Webサーバーによって明示的に設定されていない場合)、およびページに適用されるCSS。
CSSを前もって宣言することで、ブラウザはページをより効率的にレイアウトできます(を参照) http://developer.yahoo.com/performance/rules.html#css_top )。
重要な注記を追加します。 IEの meta X-UA-Compatible
タグは、Interet Explorerのレンダリングモードを切り替えるため、HEADの最初のアイテムとして挿入する必要があります。
<head> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>Page title</title> ...etc </head>
上記の回答に加えて、 Dublin Coreイニシアチブメタタグを使用します。
これらは、実際のコンテンツ/論文などに非常に役立ちます。
<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />
etc。