25

HTML ドキュメントに<meta>配置できるタグやその他のものがあります。アクセスしやすく、検索しやすく、最適化するために、HTML ドキュメントで<head>どのようなタグやベスト プラクティスを使用していますか。<meta>

4

12 に答える 12

18

私の場合：

  • タイトル (より良い SEO のために [セクション名 - サイト名] にする必要があります)
  • Content-type、description、およびのメタ タグkeywords
  • スタイルシートへのリンク ( を指定することを忘れないでくださいmedia="")。
  • <script>外部の JavaScript ファイルにリンクするタグ。

すべてのタグは、W3C の標準に従う必要があります。W3C サイトには、HTML セクションに関するより技術的で詳細なセクションがあります<head>。

于 2008-11-09T06:02:52.813 に答える
9

Chrome Frameがインストールされているときに、ユーザーに好意を示し、IE エンジンを Chrome に切り替えるようにしてください:)

<meta http-equiv="X-UA-Compatible" content="chrome=1">
于 2009-09-26T20:41:06.770 に答える
5

BODY 要素を閉じる前に、ページの最後に SCRIPT 要素を配置する必要があります。詳細については、 http://developer.yahoo.com/performance/rules.html#js_bottomを参照してください。

于 2008-11-09T06:41:58.930 に答える
5

通常の文書型、タイトルなどに加えて、私が学んだことや実装したことで役立つかもしれないことをいくつか紹介しようと思います。

まず、タイトルは、最高のユーザー エクスペリエンスを実現するために、最も関連性の高いサブセクションを最初に配置する必要があることを覚えておいてください。これは、通常、タイトルバー/タブリスト/ブックマーク名に表示されるためです。このページのタイトルを考えてみてください...

Stack Overflow - HTML head best practices

スタック オーバーフローになります... (タブ バー/ブックマーク リストのスペースを節約するためにむしゃむしゃ食べました)

5 つの Stackoverflow タブを開いている場合 (私がよく行うように :P)、ユーザーはどのタブがどれであるかをどのように知るのでしょうか?

また、CSS のカスケードの性質にも注意してください。したがって、これらの順序が重要になります。Javascript と同様に、他の外部サイトへの依存関係を許可する必要があります。私は頭に私のものを入れましたが、パフォーマンスの低下に気づいていません。より整然と論理的に見えるので、そこに置きました。ブラウザが一時的に停止しないように、<script src="">直前にリンクを挿入することを推奨する人もいますが、サイトに最適なものを使用してください。</body>

また、「評価」と「一般」のメタ タグにより、ネット フィルタリング ソフトウェアは、サイトがすべての年齢層の閲覧者にとって安全であることを認識できます (もちろん、安全である限りは!)。

私も使ってます..

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

ブラウザに自分のサイトのホームがどこにあるかを知らせます。また、ブラウザのプリフェッチ システムについては、プラグインの支援なしでは、これらはまだブラウザによって実装されていないと思います。

<link rel="">ページが並べ替えられている場合は、「次へ」と「前へ」も考慮してください。

于 2008-11-09T13:10:42.077 に答える
4

まず、<！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>
于 2012-01-06T18:32:20.093 に答える
2

IMHO の 2 つの最も重要な子タグは<head>、<title>コンテンツ タイプ メタ タグです。検索エンジンは積極的に を調べます<title>。一方、他のメタ タグは無視されることがよくあります。多言語 Web ユーザーとして、Content Type タグを追加することの重要性をこれ以上強調することはできません。これがないと、ブラウザーは 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>
于 2008-11-09T10:26:34.170 に答える
2

これが言及されているのを見ませんでした:<base>タグが指定されている場合は、 の最初の要素にする必要があります<head>。(ドキュメントのベース URI は、指定されていない場合は前と見なされ.ます。)

于 2008-11-09T06:18:15.920 に答える
1

私の知る限り、ほとんどの検索エンジンは「キーワード」や「説明」のメタ タグを無視し、代わりにドキュメントのコンテンツを読むことを好みます。

ただし、ページのタイトルを正しく設定することは非常に重要です。

于 2008-11-09T11:27:40.413 に答える
1

タグの順序に関するいくつかの光を追加するのに役立つ関連する質問がここにあります。

通常、私のページには次のものが含まれます。

<!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 は、ブラウザーによる厳密なレンダリング (互換モードなし) を強制するために重要です。XHTML があれば、代わりに XHTML を使用することもできます。著作権と作成者を追加したのは、純粋に他の会社のページをデザインおよび作成したからです。Description は SEO 用、Language はブラウザ用 (サポートしている場合) です。

どちらのメタタグが最初に来るか、またはタイトルが上にある必要があるかどうかに大きな違いがあるとは思いません。ほとんどの場合、それがページ上に存在し、正しいコンテンツを持っていることが重要です。

于 2008-11-09T08:37:38.477 に答える
0

重要な注意事項を追加します。IEのmeta X-UA-Compatibleタグを使用して Interet Explorer のレンダリング モードを切り替える場合は、それを HEAD の最初の項目として挿入する必要があります。

<頭>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>ページのタイトル</title>
  ...等
</head>
于 2008-11-09T10:36:31.140 に答える
0

上記の回答に加えて、ダブリン コア イニシアチブのメタタグを使用します。

それらは、実際のコンテンツ/論文などに非常に役立ちます。

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

等

于 2008-11-09T11:33:15.033 に答える
0

タイトル、キーワードのメタ タグ、コンテンツ タイプ (Web サーバーによって明示的に設定されていない場合)、およびページに適用される CSS。

前もって CSS を宣言すると、ブラウザーはページをより効率的にレイアウトできます ( http://developer.yahoo.com/performance/rules.html#css_topを参照)。

于 2008-11-09T05:18:16.803 に答える