Is hiding text in links bad if the links are icon fonts?

Question

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:

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

Answer 1

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.

Answer 2

I would recommend using the sr-only class for this.

Your example is good, but the hide-text class has been deprecated as of Bootstrap 4.1, and it will be removed entirely with the release of 5.0 (source).

Since the sr-only class is intended for accessibility and used extensively for that purpose across the internet, it is VERY unlikely that it would be penalized by Google.

Answer 3

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.