web-dev-qa-db-ja.com

schema.org SiteNavigationElementの正しい使用方法は何ですか？

SEOの用語で...

すべてのリンクを含む親にスキームを配置するのが最善ですか？

<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</nav>

...または各リンクを独自の要素と見なすべきですか？

<nav>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 1</span>
        </a>
    </span>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 2</span>
        </a>
    </span>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 3</span>
        </a>
    </span>
</nav>
html5seoschema.org
37
Giel Berkers

SiteNavigationElementがナビゲーション全体（ナビゲーションリンクリスト）を対象としている場合、最初の例は正しいです。

SiteNavigationElementが単一のナビゲーションエントリ（ナビゲーションリンクリスト内のリンク）を対象としている場合、2番目の例は正しいです。

Schema.orgは、どのバリアントを意味するかを明確に定義しているわけではないと考えています。

ページのナビゲーション要素。

ただし、親タイプ WebPageElement は次のように定義されます。

テーブルや画像などのWebページ要素

また、他のすべての子タイプ（ Table または WPFooter など）は、特定の部分ではなく全体に使用されるようです。事の。

したがって、これは、各単一リンクではなく、ナビゲーション全体をマークアップする必要があることを示唆しているようです：

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
  <li><a href="/link-1">Link 1</a></li> <!-- don’t use the 'url' or 'name' property here! -->
  <li><a href="/link-2">Link 2</a></li>
</ul>
</nav>

この場合、すべてのプロパティはナビゲーション全体に属しているため、urlプロパティはこのナビゲーションのURLを指定します（およびnotこのナビゲーションのリンクのURL！）。

22
unor

Search Engine Land によると、次のようになります。

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
    <li itemprop="name">
        <a itemprop="url" href="#">Link 1</a>
    </li>
    <li itemprop="name">
        <a itemprop="url" href="#">Link 2</a>
    </li>
    <li itemprop="name">
        <a itemprop="url" href="#">Travel Resources</a>
    </li>
</ul>
12
John R Perry

最初の答えは正しいですが、私は（HTML5-）セマンティックの両方を混ぜます：

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul>
        <li>
            <a itemprop="url" href="http://example.com/">
                <span itemprop="name">Link 1</span>
            </a>
        </li>
    </ul>
</nav>
8
Stephan Weinhold
<nav role="navigation">

    <ul role="menubar" aria-activedescendant="">

        <li role="presentation" itemscope itemtype="https://schema.org/SiteNavigationElement">
            <a href="" role="menuitem" tabindex="-1" itemprop="url">
                <span itemprop="name">Link 1</span>
            </a>
        </li>   

    </ul>

</nav>
4
davidcondrey

schema.org/SiteNavigationElement はWebPageElementを拡張し、リンクをマークアップするために使用できます。これにより、多くの場合、適切なコンテキストリンクが作成されます。このスキーマをページメニューに使用できます。

<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
    <li>
        <a href="https://yoursite.com/" title="Link to Home" itemprop="url">
            <span itemprop="name">Home</span>
        </a>
    </li>
    <li>
        <a href="https://yoursite.com/sample-page" title="Link to sample page" itemprop="url">
            <span itemprop="name">sample page</span>
        </a>
    </li>
</ul>
2
ashrafnezhad

habd.as のページソースから適応された次のコードスニペットを検討してください。

<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
  <meta itemprop="name" content="Main Menu">
  <a itemprop="url" class="active" href="/">habd.as</a>
  <a itemprop="url" href="/code/">Code</a>
  <a itemprop="url" href="/post/">Posts</a>
  <a itemprop="url" href="/site/">Sites</a>
  <a itemprop="url" href="/talk/">Talks</a>
</nav>
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
  <meta itemprop="name" content="Utility Menu">
  <a itemprop="url" href="/about/">About</a>
  <a itemprop="url" href="/contact/">Contact</a>
</nav>

上記のように複数のナビゲーションがある場合、SiteNavigationElementを使用してgroupナビゲーション項目にnameを使用できます。グループ化自体にラベルを付けることができます。グループ内の個々のアイテムのラベルは、リンク自体のコンテンツを使用して取得できます。

したがって、反対の主張にもかかわらず、最初の例はより正確です。

1
Josh Habdas

OPの元の質問には、コードの良い例が含まれていました。しかし、答えはどれもありません...

誰もがややランダムな答えを投げたようです...次の公式のGoogleツールを使用してスキーマのマイクロデータコードをテストできます search.google .com/structured-data/testing-tool 。

このツールで提案された回答を実行すると、期待される結果が得られないことに気付くでしょう：名前とURLを持つSiteNavigationElementのリスト

メニュー全体が「ナビゲーション要素」と見なされる可能性があると主張する人もいるかもしれませんが、この宗派では単一のナビゲーションリンクを指定する方が理にかなっていると思います。さらに、メニュー全体のマーカーとしてSiteNavigationElementを使用する場合、html内のURLに名前を関連付ける方法はありません。

これを実現するには、各リンクをitemscopeプロパティでカプセル化し、すべてのリンクに独自のnameおよびurlitemprop（これらは@David Harknessで言及されているようにシングルトンであるため、itempropごとに1回だけ表示する必要があります

<nav>
    <ul>
        <li  itemscope itemtype="http://schema.org/SiteNavigationElement">
            <a itemprop="url" href="http://example.com/link-1">
                <span itemprop="name">Link 1</span>
            </a>
        </li>
        <li  itemscope itemtype="http://schema.org/SiteNavigationElement">
            <a itemprop="url" href="http://example.com/link-2">
                <span itemprop="name">Link 2</span>
            </a>
        </li>
    </ul>
</nav>

上記のコードは、それぞれ名前とURLを持つ2つの異なるナビゲーション要素を無効にします。

注：itemprop="url"属性は、アンカーのhref属性を値として使用します

0
Mathieu VIALES

最も適切な解決策は、 hasPart プロパティを使用することだと思います。

<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
  <a itemprop="hasPart" href="/link1.html">Link 1</a>
  <a itemprop="hasPart" href="/link2.html">Link 2</a>
  <a itemprop="hasPart" href="/link3.html">Link 3</a>
</nav>

Googleの Structure Data Testing Tool を使用すると、これらのリンクがSiteNavigationElementの一部であり、Googleはこれらのアイテムへのリンクをたどる必要があることを通知します。

Google's Structured Data Testing Tool's result

0
David Barratt