web-dev-qa-db-ja.com

<nav>がhtml5Webサイトで「無題のセクション」として表示されないようにする

デザイン/レイアウトを実現しながら、html5セクショニング要素とヘッドラインを使用して正しいセクショニングを実装しようとしています（特定の制限を含む）。

一般的なレイアウトは次のようになります。

<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>

私が今懸念しているのは、 html5アウトライナー を使用すると、ブレッドクラムナビゲーションとメインナビゲーションが無題のセクションとして表示されることです。階層的な見出し構造に従って、h2より下に見出しを付けることはできません。当然、「タイトル」を付けることも、cssで見出しを非表示にして「タイトル」を付けることもできません。

意味的に正しいままで、seo標準を確認し、それらが無題のセクションとして表示されないようにするための最良の方法は何ですか？

htmlnavigationsemanticsnav
23
All Bits Equal

どうやら、nav要素はセクション要素であるため、無題です。

アウトラインにタイトル付きセクションとして含める必要がある場合は、その中に見出しを追加する必要があります。

この場合、次のことができます...

<nav class="breadcrumbs">
    <h2>Breadcrumb navigation</h2><ol />
</nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
<nav class="main_navigation">
    <h2>Main navigation</h2><ul />
</nav>

次に、cssでh2sを非表示にします。

ところで、よりセマンティックにするために、おそらくdivをsectionに変更する必要があります...ここ

<section class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
</section>
7
Jason Gennaro

Edxコースで述べたように、w3cから推奨されるアプローチは次のとおりです。

ベストプラクティス1：見出しのコンテンツを画面に表示しないために、推奨される手法は Steve Faulknerによるこの記事 で説明されています。 CSSスタイルシートでdisplay：noneまたはvisibility：hiddenを使用しないでください。その場合、見出しのコンテンツがスクリーンリーダー、より一般的には支援技術によって発声されることはありません。

記事のサンプルコード：

.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

<div class="offscreen">This text is hidden.</div>
5
Ashfaq

ページ全体で1つのh1だけに制限する必要はなく、必要な数だけ使用できます。ヘッダーはセクション要素によって分割され、各セクションはh1から始まり下に向かって独自の階層構造を持つことができます。必要に応じて、セクションごとに多数のh1を設定することもできます。セクションは、それぞれ独自の独立した構造を持つセクション内にネストされます。それはすべて、ページ/アウトラインをどのように構成するかによって異なります。

また、この例では3つのレベルしか使用していないため、navヘッダーに対応するために記事をh3またはh4に簡単に上げることができます。ヘッダー（非表示またはその他）を持つことは、セマンティックにセクション要素にタイトルを付ける正しい方法です。

http://html5doctor.com/outlines/http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

3
Deadpool

HTML5のアウトラインにのみ重要な見出しのCSSクラスを作成しました。

h1.outline, .outline {
  display: none;
}

...次にhtmlで

<nav>
  <h1 class="nocontent outline">--- Main Navigation ---</h1>
  <a href="/about">About Us</a>
  <a href="/products">Products</a>
  ...
</nav>

...概要では、これは次のように表示されます

 1. --- Main Navigation ---

編集：「nocontent」クラスは重要ですGoogleのSEOアルゴリズムに、タグにSEOに関係のない「ボイラープレート」コンテンツがあることを知らせます。あなたのサイトの検索エンジンランキングにまたは反対としてカウントされません。 https://support.google.com/customsearch/answer/2364585?hl=en このページによると、他のクラスを「nocontent」と組み合わせても問題ありません。

編集：私は自分のサイトで次の手順を実行しませんでした。Googleウェブマスターツールによると、ペナルティはなく、非表示のタイトルは警告やフラグを作成しませんでした。ただし、Googleのドキュメントでは、この最後のステップで「nocontent」クラスを有効にすることを推奨しています。

Googleのランキング目的で「nocontent」クラスを有効にするには、サイトのコンテキストファイルを変更します。

  1. コントロールパネルの左側のメニューで、詳細をクリックします。
  2. ダウンロードコンテキストセクションで、XML形式でダウンロードをクリックします。
  3. ダウンロードしたコンテキストファイルcse.xmlを編集して、CustomSearchEngineタグに新しい属性enable_nocontent_tag = "true"を追加します。たとえば、に変更します。
  4. Upload contextセクションで、Uploadをクリックし、更新されたcseをアップロードします。 xmlファイル。

これにより、ユーザーには表示されない見出しがナビゲーションに表示されましたが、アウトラインビューがクリーンアップされ、わかりやすくなりました。

1
Deborah