3

I'm having trouble finding info on this. I'd like to know what is the best way to markup icon links so Search Engines can make sense of it. Google's validator tools seem to ignore title attributes.

The following are 2 cases for icon link formatting I tend to use (be it in breadcrumbs or in other navigation elements)—using CSS ::pseudo element on a <span> or <i> tag, or styling a character by applying the @font-face icon font to it.

I also started implementing JSON-LD in my project, so for things like breadcrumbs, setting the "ListItem" "name" seems to tell Google what the name of the link is—at least the validator recognizes it in the JSON-LD code. When combined with RDFa or other Microdata, Google did not recognize the name without a hack, so I'm sticking to just JSON-LD for now.

I'm not sure about other search engines, as well as best general practices when using icons for links, and if using JSON-LD makes the HTML markup irrelevant.

Case 1: CSS Pseudo Element

<ol id="breadcrumbs">
    <li><a href="/" title="Home"><span class="icon-home"></span></a>&nbsp; &gt;</li>
    <li><a href="/collection-page/" id="collection-page">Collection Page</a>&nbsp; &gt; </li>
    <li><span class="current-page">Current Page</span></li>
</ol>
<style>
    .icon-home::before { font-family:'my-icon-font'; }
</style>

Case 2: A character being directly styled

<ol id="breadcrumbs">
    <li><a class="b-home" href="/" title="Home">H</a>&nbsp; &gt;</li>
    <li><a href="/collection-page/" id="collection-page">Collection Page</a>&nbsp; &gt; </li>
    <li><span class="current-page">Current Page</span></li>
</ol>
<style>
    .b-home { font-family:'my-icon-font'; }
</style>

JSON-LD

<script type="application/ld+json">
    {
        "@context": "https://schema.org/",
        "@type": "BreadcrumbList",
        "@id": "https://example.com/collection-page/current-page/#breadcrumbs",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "https://example.com/"
            },{
                "@type": "ListItem",
                "position": 2,
                "name": "Collection Page",
                "item": "https://example.com/collection-page/"
            },{
                "@type": "ListItem",
                "position": 3,
                "name": "Current Page"
            }
        ]
    }
</script>
Improve this question
8
  • 1
    What does "search engine friendly" mean to you? Do you want to make sure that a link with an icon passes PageRank? Do you want the icon to show up in image search?
    – Stephen Ostermiller ♦
    Sep 9, 2021 at 9:23
  • 1
    I don't know about search engines, but using a custom font to display icons isn't user friendly. Browsers have settings to use consistent fonts. (I have mine set to use "Deja Vu" for all website regardless of what the website specifies.) Icons just won't show up for those users.
    – Stephen Ostermiller ♦
    Sep 9, 2021 at 9:25
  • Not sure where you've been, but using icon fonts in web design has been a standard for many years now using CSS3 @font-face because it is efficient (one request for your icons, compressed formats like woff) and cross-browser/OS compatible. Even IE supported it using eot fonts. My question was making sure that search engines understand what the link is for, such as a home icon that looks like a house, or an email icon that looks like an envelope.
    – liquidRock
    Sep 9, 2021 at 10:03
  • Can you use alt text for these icons? That is the typical way to tell search engines what the anchor text would be for image and icon links.
    – Stephen Ostermiller ♦
    Sep 9, 2021 at 10:05
  • There is no alt text. They aren't images. They behave as any font behaves. The only difference being that instead of spelling out words, the characters are symbols. This is why I posed the question, since adding an alt attribute to an <a> tag or <span> tag is invalid HTML. I came across a brief article last night about using hidden aria spans. If I find anything more detailed I will post my findings.
    – liquidRock
    Sep 9, 2021 at 16:42

1 Answer 1

Reset to default
2

I still haven't found a clear answer for making icon links easily crawlable, however using JSON-LD the schema validators at least show the search engines will see the schema if you set it up correctly and know the name of the icon link that way.

As far as accessibility, all you need to do is add an aria-label to your icon link and screen readers will see it. From what I've read, title attributes don't seem to work all the time, so adding an aria-label is the best bet.

<!-- Old code -->
<li><a href="/" title="Home"><span class="icon-home"></span></a>&nbsp; &gt;</li>

<!-- New code with aria label-->
<li><a href="/" title="Home" aria-label="Go to homepage"><span class="icon-home"></span></a>&nbsp; &gt;</li>
Improve this answer

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.