Tag: links

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>