2

I've done a few quick SEO tests of a page and they all suggest "consider adding text to links". The links they were referring to are all social icons, and are displayed using icon fonts. I've read a few different questions similar to this and most of the answers were unclear or didn't help.

Here are some similar answers to other questions (with how I would respond for my situation):

  1. Don't put SEO first (I haven't, since I'm already done with the site).
  2. Don't over think it (I'm not. It never even crossed my mind before doing seo scans).
  3. Do what's best for your readers (This affect readers one way or another since I'm not actually changing the display (although it might actually screen readers by adding this.. not sure).

Right now they're being displayed as social icons empty but appear as links without any text to search engines. More so it's adding unnecessary tags.

Here's an example:

social icons

With a little manipulation I can remove the I tag and replace with span (not sure if that's better or even matters). I can also now add text to that span with a text-hide or sr-only class which would hide it.

I know that it's generally not good to hide text, but in situations like this would I get penalized or is this actually better to do? This would add text to an empty link and possibly help screen readers if using the sr-only class.

New example with hidden text:

<a href="https://www.facebook.com/disputebills" class="fa fa-md fa-facebook">
    <span class="text-hide"">Dispute Bills Facebook Page</span>
</a>

I'm using twitter bootstrap which has two css classes to hide text. If hiding the text is ok in this situation, I'm not sure if sr-only would be better to use then .text-hide (in terms of seo).

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
  • These online tools have to be taken with quite a bit of salt. I would not change your social media icons at all!! Generally speaking, links are better if they are text. But I do not include social media and other similar links within the mix. Do not worry too much. – closetnoc Oct 29 '15 at 23:58
  • Have you considered adding a title attribute? – MrWhite Oct 30 '15 at 0:22
  • @w3d yea I thought about that, but I didn't think title attributes had any impact on seo. – Bryan Willis Oct 30 '15 at 1:24
  • I thought I could even make the text a tooltip that shows when you hover over it. That way it for sure wouldn't have a negative effect. I know that this might not have much impact, but I guess I'm just wondering if there's any negative to doing this? – Bryan Willis Oct 30 '15 at 1:26
1

Don't do it, because Google don't like hidden text.

But, What you are trying to optimize, someone else site? because social media sites is not yours, so I don't think, you should focus on rich anchor text links.

You can mention anything, like, like my page, icons, images etc, Because it is not your site. Yes Rich anchor text help so much in SEO, but only when someone point your site with rich anchor text. (For example, in first line, I mention Google Don't like hidden text, so it helps so much in SEO, because anchor text and PageRank both pass thorugh links(Assume links are not nofollow)) .So by optimizing external link with rich anchor text does not help in SEO. So feel free to use any of things, that looks good to users.

0

It depends what you want to satisfy.

To satisfy Google, make all text in links visible, not the same color as background color or they might qualify as hidden links to Google.

To satisfy accessibility, you need at least some kind of text in links. This means in order for users who cannot interpret images (for example, those using screen reading devices) to understand the link, they rely on the text.

To satisfy only the visual minded whilst not caring about Google or accessibility, make your links just images.

What I personally suggest to make a win-win situation for all is to add text and blend it in nicely with the link. For example, you can have small text in a bright color right underneath the link item so that either the text or image can be clicked to access the link. This also works too if style sheets or images are disabled in the client's browser.

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.