7

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:

enter image description here

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:

enter image description here

  • 2
    That looks like a bug, not something you should have to work around. Send me some sample URLs :) – John Mueller Mar 10 '15 at 9:54
  • 1
    @JohnMueller I found the site URL and sent it to you through Google+ (I didn't post it here because the poster appears to be trying to obscure it publicly.) – Stephen Ostermiller Mar 10 '15 at 20:41
  • 1
    @StephenOstermiller thanks for sharing the url on my behalf. Yes, I don't want it to be discovered by everyone, at least for some days. – Harit Mar 11 '15 at 5:21
3

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

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.

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

2

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

  • Thanks for the help. I am a developer by passion and SEO is something that adds value to my projects. Your suggestions are valuable. I will try applying them and mark it as answer if it solves my problem. – Harit Mar 10 '15 at 9:10
  • 1
    Just keep in mind, this does not fix itself overnight. Might take a couple of days. – Martijn Mar 10 '15 at 9:15
  • Yes I understand. – Harit Mar 10 '15 at 9:19
  • As far as search goes, it will not change until Google re-fetches the page. Just for testing, I would suggest a Fetch as Google to see what effects your changes have. You do not have to tell Google to index the page while you are experimenting. If you are satisfied with the results, you can tell Google to index the page on the last fetch. I would not suggest doing this for a bunch of pages. Your home page should be enough. – closetnoc Mar 10 '15 at 20:24
  • 1
    I am not sure I read your answer right. Forgive me if I did not. Are you suggesting the h1 is taken as the SERP link? Generally, this only happens in rare cases where the title tag is too long, too short, or does not match search intent. Otherwise, generally, if done right, the title tag is almost always used for the SERP link. If I misunderstood you, you do not need to reply. I was just checking. ;-) BTW- I like your answers!! – closetnoc Mar 10 '15 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.