[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ページ固有の見出しと同じく、 hn、 hgroup、header といった要素を使って表現できます。

[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サイトの見出しである、 とのものでした。

  • [1] Web Applications 1.0 r826 Define how to distinguish site-wide headers from page headers ( 版) https://html5.org/r/826
  • [2] Web Applications 1.0 r827 Let's try that again. Distinguishing site-wide headers from page headers: ( 版) https://html5.org/r/827
  • [3] Web Applications 1.0 r3803 Remove the site-wide heading section. It was incomprehensible and nobody cares anyway. ( 版) https://html5.org/r/3803

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

実装