🔥 How to add emojis to title tags and meta descriptions in WordPress

Imagine.

You go through the old generic SERP results and see something like that.

The inner child in you claps your hands.

Cute! Emojis.

This post could be fun read.

So click on it.

And you are not alone.

Emojis in title tags and meta descriptions are known to attract attention and increase click-through rates.

If you are interested in that too, this blog is for you.

In it I will show you:

• Here’s how to insert emojis in title tags and meta descriptions. (Hint: it’s harder than you think!)
• Here’s how to find the right emojis and then embed them in your HTML.
• The most common problems encountered while using emojis in your title tags and meta descriptions.

Ready to start?

Let’s dive in!

A step-by-step guide on how to add emojis to your title tags and meta descriptions

No, making cute emojis appear in the SERPs is not the same as selecting an emoji on a keyboard and hitting the “submit” button.

Nor can you just copy and paste them into your title and description.

Here’s how to do it right.

1. Use Yoast’s WordPress SEO

Yoast’s WordPress SEO plugin allows you to support emojis in your title tags and meta descriptions.

The good news is that Yoast’s WordPress SEO is free and super easy to use.

2. Find the emoji you want

A great website that you can use to get codes for emojis is amp-what.com.

The website gives you access to a ton of interesting emojis, as well as the codes that work on Yoast.

Here is an example.

Are you looking for a specific emoji?

You can use the search box at the top right of the page to narrow your search.

For example, enter “love” in the search box.

Here are your results.

3. Get the code for your emoji

Getting the code for your emoji is super easy!

Just click the emoji you want.

When you do this, you will see an enlarged version of your emoji, as well as the code to copy and paste.

Do you want to change HTML to CSS?

Just go back to the search box at the top right of the page and click the arrow next to the box.

You can choose the code for your emoji whether you want U + 0000, HTML Decimal, HTML Hex, JSON, CSS, or URL.

4. Paste the code in your title tag or meta description

When you have the code for the emoji you selected, copy and paste it into the WordPress field for your title tag or meta description.

If you code your site from scratch, you can use it in the same way.

5 reasons to reconsider adding emojis to your title tag and meta description

Of course, emojis in your title tags will grab the attention of busy scrollers and even give them an extra reason to click.

A side note, however, is that you can run into problems while doing this.

Here are five that you should be careful of.

1. Emojis are not always previewed in Yoast

Yoast’s ability to display an emoji varies from device to device.

I did this research using a Windows PC with Google Chrome, and often no preview was shown either in Unified Unicode or in Google code.

2. If users haven’t set the emoji on their device, it might show up as a blank rectangle in search results

There is no way to tell if users have set the emoji on their device. And without that, they’ll see your emojis as empty rectangles.

You do not want that!

Somehow, no emoji is better than an empty rectangle.

However, you can always do backend work to discover the device and / or whether the emoji is displayed.

3. Emojis may not display in desktop browsers and instead show a blank rectangle image

The emoji on this page that is previewed in Yoast is shown in SERPs and is displayed properly in mobile browsers. However, it is displayed as a blank rectangle so that the browser cannot parse the character encoding.

4. If Google decides to stop showing emojis in search, it may show code in the title tag area instead

Hopefully when you stop using them, they just pull out this code.

But SEO pros would do well to keep an eye on their SERPs just in case.

5. Emojis take up the character space in the title tag and require the title tag to be shorter than normal

While Yoast displays the emoji as an image with a space afterwards, it actually takes 9 characters and a space to add an emoji to the title.

Still not sure how this works in google, although hopefully it is based on the width of the emoji rather than the code required to display it.

Using Emojis in Title Tags and Meta Description: Should You Use Them?

Emojis are cute, friendly, and extremely relatable.

In addition, they can be found online everywhere. People hook you up to show emotion when words run out.

But do they really belong in your title tags and meta descriptions?

The answer is, it depends.

Yes, emojis can give busy scrollers an extra incentive to click.

However, there are reasons why adding an idea like this might not be a good idea.

What matters is your specific campaign.

Do you want to run the risk of some people seeing blank rectangles next to your heading for those few extra clicks?

Then go ahead and use them.

But what if you think your headlines are compelling enough to get a ton of clicks without the cute emojis?

You can skip them.

The final decision is yours.

More resources:

Photo credit

All screenshots by the author, October 2020.