web-dev-qa-db-ja.com

<nav>の<a>内で<span>を使用すると、Google検索結果のサイトリンクで単語が一緒に実行されます

ナビゲーションメニューに次の構造があります。アンカータグ内に、ナビゲーションの外観を改善するスパンがあります。

<nav class="navbar-collapse navbar-collapse-header collapse">
    <div class="navbar-right yamm dropdownnav" >
        <ul class="nav navbar-nav smart-menu dd-menu">
            <li><a href="https://www.example.com/hosting">Try & Buy<span class="subline">Hosting List</span></a></li>
            <li><a href="https://www.example.com/products">Shop<span class="subline">Webshop</span></a></li>
            <li><a href="https://www.example.com/features">Features<span class="subline">Features</span></a></li>
        </ul>
    </div>

ただし、サイトリンクにはマイナスの影響があります。

enter image description here

Googleはアンカータグ内にあるものを考慮しますか？デザインを維持し、サイトリンクの外観を改善する方法はありますか？

これは私のナビゲーションが私のサイトでどのように見えるかです：

enter image description here

seogooglesitelinks
7
Harit

<span>タグは通常、要素の周りに空白を追加しません。 CSSを使用して作成しているようです。ただし、テキストブラウザとGoogleは、スパンの周りにスペースを追加する可能性はありません。マークアップでスペースを入れる方が良いでしょう：

Try & Buy <span class="subline">Hosting List</span>

の代わりに：

Try & Buy<span class="subline">Hosting List</span>

リンク内にスパンを設定しても本質的に問題はありません。スペースを追加すると、サイトリンク（およびアンカーテキスト）がGooglebotにより良く見えるようにすることができます。次に、Googlebotはそのリンクのアンカーテキストを「Try＆Buy Hosting List」として表示します。

機能リンクは、たとえスペースがあっても、サイトリンクとしてはあまり良くないようです。サブリストで同じWordを複製するため、同じWordをリンクで2回使用します。たぶんそれを2つのリンクに分けるのは理にかなっているでしょうか？

<a href="https://www.example.com/features">Features</a>
<a href="https://www.example.com/features"><span class="subline">Features</span></a>
3
Stephen Ostermiller

その追加情報が純粋に視覚的な目的のためである場合、おそらくCSS Pseudoコンテンツの使用を検討することができます（Googleはそれを無視しますが、テストしていないので間違っている可能性があります）

副次的には、これらの要素のほぼすべてがその上のテキストを複製しているように見えるので、実際にユーザーに値を追加しているのか、それとも単に便利な画面スペースを占有しているのか疑問に思います。価値がある。

3
Kessa

他の人が指摘しているように、Googleはサイトリンクをすべてプレーンテキストであると見なします。通常、スタイルシートは考慮されません。 （実際、Google できませんあなたのサイトでスタイルを設定したようにサイトリンクを実際にフォーマットしますが、それをどのように伝えるかは何もありませんべき代わりにフォーマットします。）

あなたが考慮するかもしれない1つの解決策は、最初にリンクを書くことですプレーンテキストとして意味をなす。あなたの場合、あなたのリンクはメインのリンクタイトルと説明的なサブタイトルで構成されているようです。自然な選択は、次のようにコロンで区切ることです。

Try & Buy: Hosting List
Shop: Webshop

次に、いくつかのスパンを追加して、個別のパーツを示します。このような：

<li><a href="https://www.example.com/hosting">
  Try &amp; Buy<span class="separator">: </span><span class="subline">Hosting List</span>
</a></li>
<li><a href="https://www.example.com/products">
  Shop<span class="separator">: </span><span class="subline">Webshop</span>
</a></li>

最後に、スタイルシートにルールを追加して、スタイル設定時にコロンを非表示にします。

.nav li a .separator { display: none }

おまけとして、テキストのみのブラウザや、あまり一般的ではないユーザーエージェントでも、ページに（わずかに）アクセスできるようになりました。

（これだけでは、完全に問題を解決しないことに注意してください。Features: Featuresは、FeaturesFeaturesほど愚かではないにしても、まだかなり愚かに見えます。ページの見栄えもあまり良くありません。一貫性のためにタイトル/サブタイトルの構造に固執したい場合は、繰り返しの少ないサブタイトルを見つけた方が良いでしょう）

3
Ilmari Karonen

ご覧のとおり、スパンがあるかどうかに関係なく、コンテンツはプレーンテキストとして表示されます。ユーザーと同じように見えますが、スパンを視覚的に変更して区別を作成しただけです。

ただし、画像に表示されるヘッダーは、アンカーではなくページ自体から取得する必要があります。適切な<title>と<h1>があるかどうか（ページごとに1つ！）を確認することをお勧めします。これは、アンカーの一部のテキストを変更するよりも役立ちます。

考えてみてください。あなたの内部リンクは、あなたのサイトの異なるページからこのページを指している可能性があります。どのテキストを取るべきでしょうか？アンカーテキストはキーワード値に役立ちますが、Googleでの結果を決定するのは実際のヘッダーです（適切に実装されている場合）。

2
Martijn