Sitelinks in Google search results run words together when I use a <span> inside <a> in <nav>

Question

I have the following structure in my navigation menu: There is a span inside an anchor tag which makes the navigation look better.

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

But it has a negative impact for sitelinks:

Does Google take anything goes inside an anchor tag into consideration? Is there any way that I can keep the design and make the sitelinks look better?

This is how my navigation looks on my site:

Answer 1

<span> tags don't generally add white space around elements. It looks like you may be using your CSS to make it so. Text browsers and Google are not likely to add space around spans, however. It would be better in your markup to put in a space:

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

Instead of:

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

There is nothing inherently wrong with having a span inside your links. Adding the space would allow you to do so while having your site links (and anchor text) appear better to Googlebot. Then Googlebot would see the anchor text of that link as "Try & Buy Hosting List".

It looks like your Features link still wouldn't be great as a site link, even with the space. You use the same word in the link twice because you duplicate it in the sublist. Maybe it would make sense to divide that up into two links?

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

Answer 2

If that extra info is purely for visual purposes then you could perhaps consider using CSS Pseudo content (I think Google will ignore it but haven't tested so could be wrong on that)

As a side point though, it looks like almost all of those elements duplicate the text above it so I just wonder whether it's actually adding any value to your users or whether it's simply taking up useful screen space. Worth a thought.

Answer 3

As others have noted, Google sees your sitelinks as is they were all in plain text — it does not generally take style sheets into account. (Indeed, Google cannot really format the sitelinks the way you have them styled on your site, and there's nothing that would tell it how it should format them instead.)

One solution you might consider would be to first write your links so that they make sense as plain text. In your case, your links seem to consist of a main link title and a descriptive subtitle; a natural choice would be to separate them with a colon, like this:

Try & Buy: Hosting List
Shop: Webshop

Next, add some spans to indicate the distinct parts, e.g. like this:

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

And finally, add a rule to your style sheet to make the colon invisible when styled:

.nav li a .separator { display: none }

As a bonus, your pages will now also be (slightly more) accessible in text-only browsers, and with other less usual user agents.

(Note that this, by itself, does not completely solve your problem — Features: Features still looks pretty silly, if not nearly as silly as FeaturesFeatures. That said, it doesn't look too great on your page, either; if you want to stick to the title/subtitle structure for consistency, you'd really be better off finding some less repetitive subtitles.)

Answer 4

As you can see, it sees the content as plain text, no matter if there's a span. It will see the same as a user does, only you have made a visual change to the span to create a distinction.

However, the headers they show you in your image should be taken from the pages themselves, not from the anchor. You might want to check if you have proper <title>'s and <h1>'s (one per page!), this will help more than changing some text in an anchor.

Just think about it, your internal linking could point to this page, from different pages on you site, which text should they take? The anchor text helps for keyword value, but it's the actual header that determines the result in Google (if properly implemented).