site-wide header

site-wide header

[19] 多くのWebサイトでは、構成する多くのWebページで共通する見出しロゴなどのヘッダーフッター、 関係するメタ情報などが含まれています。

仕様書

サイト名

[9] Webサイトサイト名は、マイクロデータとして項目型 http://schema.org/WebSite >>8 を使って記述できます。

[10] WebサイトトップページHTML文書titleサイト名が一致するなら、次のように記述できます >>7

  <head itemscope itemtype="http://schema.org/WebSite">
    <title itemprop='name'>Web サイト名</title>
    <link rel="canonical" href="https://example.com/">
    <link itemprop="url" href="https://example.com/">

[11] Webサイトのそれ以外のページでは、次のように記述できます。

  <head itemscope itemtype="http://schema.org/WebSite">
    <title>ページ名 - Web サイト名</title>
    <link rel="canonical" href="https://example.com/page">
    <link rel="top" href="https://example.com/">
    <meta itemprop=name content="Web サイト名">
    <link itemprop=url href="https://example.com/">

[12] なお WebサイトWebアプリケーションでもある場合は、 <meta name=application-name> にもサイト (アプリケーション) 名を指定したいかもしれません。

サイトロゴ

[16] Webサイトの運営者など、関係する組織ロゴがある場合、 マイクロデータ項目型 http://schema.org/Organization により記述できます。

[17] 厳密には Webサイトのロゴではなく、当該ページに関係する組織のロゴを表すものとなります。
[18] ページのロゴについては、 favicon を参照。

サイト名・ロゴのリンク

[22] Webサイト中の各ページWebサイトの名前やロゴが掲示されている場合、 それを Webサイトトップページへのリンクとする、というイディオムが広く浸透しています。

[23] たまにこの慣習に従わないWebサイトもあって不便です。

本文中の見出し

[13] Webサイトを構成するWebページの共通の見出し (ヘッダー) は、 Webページ固有の見出しと同じく、 hnhgroupheader といった要素を使って表現できます。

[14] マイクロデータとして項目型 http://schema.org/WebSite >>8 を使って記述することもできます。

[15] 例えば Webサイト全体のヘッダーと記事の冒頭部分は次のようにできます。

<body>
  <header itemscope itemtype="http://schema.org/WebSite">
    <h1 itemprop=name><a href=/ rel=top itemprop=url>Web サイト名</a></h1>
    <nav>
      <a href=/news>お知らせ</a> <a href=/search>検索</a>
    </nav>
  </header>

  <article>
    <h1>記事タイトル</h1>

ネイティブアプリケーション

[20] Webサイトとネイティブアプリケーション参照。

ページ個別の情報

[21] SNS用のWebページデータ参照。

歴史

HTML5

[4] Webサイト見出し (サイト名等) の部分と Webページ見出し部分を区別する方法は、 HTML5 で2007年に規定されました >>1, >>2 が、2009年に削除されています >>3

[5] その方法では、 body 要素によって表される章節内 (直下) に article 要素によって表される章節がちょうど1つと、 nav 要素aside 要素によって表される章節が0個以上しかないなら、 その body 要素見出しWebサイト見出しである、 とのものでした。

[6] この方法が削除されましたが、かわりの方法は用意されていません。

実装