How Do I Make Fancy SEO Friendly Titles?

Published Nov 29, 2021
Updated Dec 3, 2021
By Simon

In this snippet article, we will look at how you can add a little flair or interest to your titles by adding an emphasis to certain words but also retaining all the text to keep your titles SEO friendly as illustrated in the image below. This is not always an easy thing to do so make sure you read the final section. Let's get started.

Image
fancy titles that are search engine friendly
The title concept for my article on how to move elements with JavaScript. With 4 lines of JavaScript! I haven't implemented this yet due to the reasons at the end of this article.

Adding an Inline element to your title

The first thing we need to do is add a <span></span> element around the part we want to add emphasis to. You could use <em></em> if you like, just make sure you use an inline element.

<h1>How to make <span>super</span> fancy SEO friendly titles</h1>

Now that we have a tag we can use, let's write some CSS to style the text differently.

Related: Adding a gradient to text using background-clip

Okay, let's now see how you can modify our h1 heading text

First, we will add the rule to our stylesheet, you may need to add a class to your span so it is more specific, but I am only using it on h1 so h1 em works perfectly.

Now we have the rule set up in our stylesheet let's add a few properties and see where we can go.

The first property I am going to add is position and add the absolute value. This makes it absolute to its current position and removes it from the flow of the current parent element.

Since we have set the element to absolute we can now move it. We can use top, right, bottom, and left to move it or transform and translate. However, if we use top, right, bottom, and left it will be moved from the position on the last positioned element and if no position is added to any elements it will be absolutely positioned from the body, not exactly what we want.

I like to use transform because we can use it without needing to set the parent to relative. Also, it doesn't need to redraw the whole layout. This might be more relevant when animating and transitioning but it is good practice and using this seems more logical to me. Let's push it up by the line-height value.

article h1 span {
  position: absolute;
  font-family: "Comic Sans MS", cursive;
  /*top: 100px;*/
  /*left: 100px;*/
  transform: translateX(-4.8rem) translateY(-4rem) rotateZ(-15deg);
}

We can also rotate in a bit with transform, so another good reason to use transform.

Cool, so no our element has been moved up and rotated a little, I am going to add a little arrow.

Using ::after pseudo element to add ornament to your text

Next, let's add the ::after pseudo-element. The after pseudo-element always needs the content property and in this case, we will use it. You can add text or and an image here, I used a font character, but SVG or emoji could also be used, and any image format is okay.

Next, we need to use position and top, right, bottom and or left to move the pseudo-element as transform doesn't work on pseudo-elements.

/* ::after needs relative */

article h1 span::after {
  content: '⋎';/*❤url("arrow.svg")️*/
  position: relative;
  top: 2rem;
  left: -7rem;
  color: red;
}

Finally, I added a different font style, for ease of implementation I use comic sans with a cursive fullback. Fullbacks are needed as per the specification. You can use any font you want as long as you have imported and declared it in your stylesheet.

Related: How to add a font to your page? (coming soon)

Well, that's about it. Now you have a unique and fun heading that is also fully readable by the spiders and robots that crawl and document the web. If you are interested, in the second part we will look at how I got the inspiration to do this and then some things you need to consider if you are using a CMS or framework

The idea behind making fun search engine optimized heading and things I learnt

What made me think of doing this? It was quite simple, I had written the title of an article in my notepad and then thought why don't I insert "4 lines of" to the title, that's what you do, isn't it? So, that was the challenge, to make the title look like it did in my sketch pad.

It was quite a good challenge as I learnt (again) that the content property of the before and after pseudo-element is quite limited, you can only add plain text and no HTML. But also new to me I learnt that you can't transform it and need to use position, meaning you can't rotate the elements. This worked okay as the rotation of the parent element is applied and works fine.

Implementing in real life

Other than a pure static HTML webpage where you directly write the HTML in the HTML document you will need to make sure that the HTML is saved, retrieved and rendered correctly. What I mean here is in a CMS where you add and save your title to a database, I lot of the time it is possibly saved as plain text so your HTML will be stripped out. This is beyond the scope of this article but I thought that I would mention it.

Second, make sure you check your title on all screen sizes as sometimes the titles will wrap to a second line for certain screen widths. Check out the image below for an example of what I mean.

Image
image showing how long titles with this techniuqe look on a narrow width screen.
Needs a little work. Maybe not the best on small screens so you need to think about this. Maybe hiding for small screens is one possibility but you would have to make sure it still made sense. You could also remove the style for small screens so the full title is readable but doesn't have a fancy style.

So if you have many people adding titles to articles you would need to add it to the checklist of things to check before you press publish and or build it into the design system. Obviously, it's not something you going to want to add to every title but it can definitely add a little fun when needed.

That's it for this article, I hope you enjoyed reading it and if you want more of the same, ideas and thoughts and practical examples for use in the real world, from design to dev, then make sure you sign up for the Newwwsletter, you won't be disappointed.

Thanks for dropping by, bye for now & seize the day!