Semantic Yet SEO Friendly Rating Stars

In my previous post, I recreated a post, originally published by Sergio Zambrano in 2012, showing how a simple custom font can be used to create a semantic yet SEO friendly graph bar.

In this post, I’ll be showing you a similar application of custom fonts; this time to create semantic yet SEO friendly rating stars for reviews. No JavaScript, no divs and no SVGs. Just a custom font-family and plain CSS.

Here’s an example of the fraction-filled rating stars using the custom seostars font family.

How would you rate WordPress’s built-in SEO capabilities?
Rating:  4.5 out of 5
based on 298 reviews

And here’s the same snippet, without the custom fonts.

How would you rate WordPress’s built-in SEO capabilities?
Rating:  4.5 out of 5
based on 298 reviews

Try it yourself

1. Download the seostars fonts by Sergio Zambrano.

seostars fonts

Download

2. Upload the individual folders to the fonts directory on your website.
3. Add the following code to your CSS stylesheet. Make sure to replace yoursite.com with the URL of your website. This basically adds a reference to the custom fonts we uploaded and some basic CSS styling.

Note how the different star patterns (fractions, full, outline) are mapped to the different font styles and weights.

Font	Weight	Style
seostars-fractions	normal	normal
seostars-full	bold	normal
seostars-outline	normal	italic

@font-face {
  font-family: "seostars";
  src: url("https://yoursite.com/fonts/seostars-fractions/seostars-fractions.eot");
  src: url("https://yoursite.com/fonts/seostars-fractions/seostars-fractions.eot?#iefix") format("embedded-opentype"),
    url("https://yoursite.com/fonts/seostars-fractions/seostars-fractions.woff2") format("woff2"), url("https://yoursite.com/fonts/seostars-fractions/seostars-fractions.woff") format("woff"),
    url("https://yoursite.com/fonts/seostars-fractions/seostars-fractions.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "seostars";
  src: url("https://yoursite.com/fonts/seostars-full/seostars-full.eot");
  src: url("https://yoursite.com/fonts/seostars-full/seostars-full.eot?#iefix") format("embedded-opentype"),
    url("https://yoursite.com/fonts/seostars-full/seostars-full.woff2") format("woff2"), url("https://yoursite.com/fonts/seostars-full/seostars-full.woff") format("woff"),
    url("https://yoursite.com/fonts/seostars-full/seostars-full.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "seostars";
  src: url("https://yoursite.com/fonts/seostars-outline/seostars-outline.eot");
  src: url("https://yoursite.com/fonts/seostars-outline/seostars-outline.eot?#iefix") format("embedded-opentype"),
    url("https://yoursite.com/fonts/seostars-outline/seostars-outline.woff2") format("woff2"), url("https://yoursite.com/fonts/seostars-outline/seostars-outline.woff") format("woff"),
    url("https://yoursite.com/fonts/seostars-outline/seostars-outline.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
.seostars {
	font-family: seostars;
	position: relative;
	width: 5em;
	font-size: 1em;
	color: #ffffff;
	text-indent: -5000px;
	display: inline-block;
	font-style: normal;
}
.seostars strong {
	font-weight: normal!important;
	display: block;
	position: absolute;
	left: 0px;
	color: #5e17eb;
	font-family: seostars;
	text-indent: 0;
}
.seostars strong:first-letter {
	font-weight: bold;
	position: absolute;
	left: 0px;
	font-style: normal;
}
.seostars i {
	color: #666;
	position: absolute;
	text-indent: 0;
	color: #4B7D70;
	left: 0;
}
.starsbox {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
    font-size: 5vw;
    margin: 0.4em 0;
    text-align: center;
}
.starsbox .seostars strong {
    color: rgb(255, 136, 0);
	
    background: -webkit-linear-gradient(#FFFC00, #F40);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-size: 1em;
    line-height: 1em;
}
.starsbox .seostars {
	margin: 0;
}
.starsbox .seostars i {
    font-size: 1em;
    line-height: 1em;

    color: rgb(171, 0, 0);
}
#maincol .starsbox h3 {
    font-size: .5em;
    margin: 0.5em 0 0.6em 0;
}
#maincol .starsbox p:nth-child(3) {
    font-size: .3em;
    line-height: 0.3;
    margin: 0em 0 1.4em 0;
    color: rgb(161, 174, 184);
}
#maincol .starsbox p.hover { 
	color: #900; 
	font-size: 0.16em; 
	font-style:italic;
}
.seostars:hover,
.seostars:hover strong,
.seostars:hover strong:first-letter,
.seostars:hover i {
	background: none;
  color: inherit;
  -webkit-text-fill-color: initial;
  font-family: sans-serif;
  position: static;
  display: inline;
  text-indent: 0;
  width: auto;
  font-size: 1em;
}

4. Use the rating stars in your HTML code through the seostars class, which in turn uses the seostars fonts uploaded earlier. Here’s an example of the HTML.

<strong>How would you rate WordPress's built-in SEO capabilities?</strong>
<br>
Rating: &nbsp;<span class="seostars"><strong>4.5</strong> out of <i>5</i></span>
<br>
based on <strong>298</strong> reviews

That’s it. Now you can have nicely formatted rating stars, using plain text that can be crawled by search engines.

If you liked this post, make sure to check out a similar application of custom fonts in my post on how to create a semantic yet seo friendly graph bar.