Sitelinks in Google-Suchergebnissen führen Wörter zusammen, wenn ich einen <span> in <a> in <nav> verwende

Ich habe die folgende Struktur in meinem Navigationsmenü: In einem Ankertag befindet sich eine Spanne, die die Navigation besser aussehen lässt.

<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>

Dies hat jedoch negative Auswirkungen auf Sitelinks:

Berücksichtigt Google, was in einem Ankertag enthalten ist? Gibt es eine Möglichkeit, das Design beizubehalten und die Sitelinks besser aussehen zu lassen?

So sieht meine Navigation auf meiner Website aus:

<span>Tags fügen im Allgemeinen keinen Leerraum um Elemente hinzu. Es sieht so aus, als würden Sie Ihr CSS verwenden, um dies zu erreichen. Textbrowser und Google werden jedoch wahrscheinlich keinen Platz um Bereiche hinzufügen. In Ihrem Markup ist es besser, ein Leerzeichen einzufügen:

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

Anstatt:

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

Es ist an sich nichts Falsches daran, eine Spanne in Ihren Links zu haben. Durch Hinzufügen des Speicherplatzes können Sie dies tun, während Ihre Website-Links (und Ihr Ankertext) für Googlebot besser angezeigt werden. Dann würde Googlebot den Ankertext dieses Links als "Try & Buy Hosting List" sehen.

Es sieht so aus, als wäre Ihr Features-Link trotz des Platzes immer noch nicht als Site-Link geeignet. Sie verwenden dasselbe Wort im Link zweimal, weil Sie es in der Unterliste duplizieren. Vielleicht wäre es sinnvoll, das in zwei Links aufzuteilen?

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

Wenn diese zusätzlichen Informationen nur zu visuellen Zwecken dienen, können Sie möglicherweise die Verwendung von CSS-Pseudo-Inhalten in Betracht ziehen (ich denke, Google wird sie ignorieren, aber nicht getestet, sodass dies falsch sein könnte).

Nebenbei bemerkt, es sieht so aus, als ob fast alle dieser Elemente den Text darüber duplizieren. Ich frage mich nur, ob es Ihren Benutzern tatsächlich einen Mehrwert bringt oder ob es einfach nützlichen Platz auf dem Bildschirm beansprucht. Einen Gedanken wert.

Wie andere angemerkt haben, sieht Google Ihre Sitelinks so, wie sie alle im Klartext waren. Dabei werden Stylesheets im Allgemeinen nicht berücksichtigt. ( In der Tat, Google kann nicht wirklich formatieren Sie die Sitelinks die Art und Weise haben Sie sie auf Ihrer Website gestaltet und es gibt nichts , was es würde sagen , wie es sollte sie stattdessen formatiert werden .)

Eine Lösung, die Sie in Betracht ziehen könnten, wäre, zuerst Ihre Links so zu schreiben, dass sie als einfacher Text sinnvoll sind . In Ihrem Fall scheinen Ihre Links aus einem Hauptlink-Titel und einem beschreibenden Untertitel zu bestehen. Eine natürliche Wahl wäre, sie mit einem Doppelpunkt wie folgt zu trennen:

Try & Buy: Hosting List
Shop: Webshop

Fügen Sie als Nächstes einige Bereiche hinzu, um die einzelnen Teile anzuzeigen, z. B.

<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>

Fügen Sie Ihrem Stylesheet schließlich eine Regel hinzu, um den Doppelpunkt beim Gestalten unsichtbar zu machen:

.nav li a .separator { display: none }

Als Bonus sind Ihre Seiten jetzt auch (etwas mehr) in Nur-Text-Browsern und mit anderen weniger üblichen Benutzeragenten zugänglich.

(Beachten Sie, dass dies an sich Ihr Problem nicht vollständig löst - Features: Featuressieht immer noch ziemlich albern aus, wenn auch nicht annähernd so albern wie FeaturesFeatures. Das heißt, es sieht auch auf Ihrer Seite nicht allzu gut aus; wenn Sie sich an das halten möchten Titel- / Untertitelstruktur aus Gründen der Konsistenz ist es besser, wenn Sie weniger sich wiederholende Untertitel finden.)

Wie Sie sehen können, wird der Inhalt als einfacher Text angezeigt, unabhängig davon, ob es eine Spanne gibt. Es wird genauso angezeigt wie ein Benutzer, nur dass Sie eine visuelle Änderung an der Spanne vorgenommen haben, um eine Unterscheidung zu erstellen.

Die Überschriften, die sie Ihnen in Ihrem Bild zeigen, sollten jedoch von den Seiten selbst und nicht vom Anker stammen. Vielleicht möchten Sie überprüfen, ob Sie die richtigen <title>'s und <h1>' s haben (eine pro Seite!). Dies hilft mehr als das Ändern von Text in einem Anker.

Denken Sie nur darüber nach, Ihre interne Verknüpfung könnte auf diese Seite von verschiedenen Seiten Ihrer Website verweisen. Welchen Text sollten sie verwenden? Der Ankertext hilft beim Keyword-Wert, aber es ist der tatsächliche Header, der das Ergebnis in Google bestimmt (falls ordnungsgemäß implementiert).