How to Add Emojis to Title Tags and Meta Descriptions in WordPress

Expedia recently started using Emojis in their title tags to try to increase click-through rates. If you’re using WordPress, you’ve likely tried figuring this out by either copy+pasting emojis, using a WordPress plugin, or trying to type the formal unicode notation into your title tag field all to no avail. The good news is if you have one of the more recent versions of WordPress SEO by Yoast then you already have Emoji support for your title tags and meta descriptions.

To get your emojis to work on your WordPress based sites that use the Yoast SEO plugin follow these instructions

1. Find the Emoji You Want

To find an emoji go to iEmoji.com and search for an emoji of your choice. I tried other websites, but this one displays the code that seems to work in Yoast.

2. Get the Code for Your Emoji

Once you’ve found an emoji you want to use look for the “Decimal HTML Entity” or “Hexadecimal HTML Entity”. Then copy whichever of those two codes you’d like to use.

You’ll notice on some emojis listed there are various code sets called: Softbank, Unified Unicode, DoCoMo, KDDI, and Google. I’m not certain which one’s Google interprets correctly, though I would hope they would interpret their own standard set without error. However, Unified Unicode is likely the most popular due to its use on iOS 5+ devices. Running a test showed that this code was indeed indexed and displayed by Google as well. I also checked and ensured these emojis appeared on Android devices in the browser.

The end result should look something like this:

There Are a Few Caveats to Doing This

1. The emojis don’t always appear as a preview in Yoast, though I’m almost certain it’s different from device to device. I did this research using a Windows PC with Google Chrome, and frequently neither the Unified Unicode nor the Google code would show a preview.

2. If users don’t have the emoji set on their device it could appear in search results as a blank rectangle: I was unable to find a way to alleviate this with the Yoast plugin. My guess is this would take some backend work to detect the device and/or if the emoji appears.

3. Emojis may not appear in desktop browsers and instead show an empty rectangle image. For example the emoji on this page previewed in Yoast, appears in SERPs, and displays fine in mobile browsers – but it’s showing up as a blank rectangle image that means the browser isn’t able to parse the character encoding.

4. When viewing the source code of an Expedia page, it shows the emoji image in the code as an image. However when doing the same with a WordPress page it shows the code. (see below for examples)

An example showing how Expedia’s emoji’s appear in the code as an image when viewing the source html.

An example of a website using WordPress SEO by Yoast and inserting an emoji at the start of the page title

5. If Google decides to stop showing emojis in search, it could lead to showing code instead in the title tag space. I would hope if they stop using these they would just pull out that code, but SEOs would do well to keep an eye on their SERPs just in case.

6. Emojis take up character space in the title tag and therefore require the title tag to be shorter than normal. While Yoast previews the emoji as one image with a space after, in reality it requires 9 characters and a space to insert an emoji in the title. I’m still not certain how this works inside Google, though I’d hope it’s based on the width of the emoji and not the code required to display it.

Note: Want to see how the code looks? Check the source of this post, I used the same emoji in the Title tag and the Meta Description.

Things I know about emojis = They might help out SEO.

Things I don’t know about emojis = Literally everything else.

If I got something wrong about how they work please correct me in the comments, or put me on blast on Twitter.

Hat tip: Mark Bellinger for help on this article.

Featured Image: Created by author for Search Engine Journal

All Screenshots Taken By Author in May 2015

Source:http://www.searchenginejournal.com/add-emojis-title-tags-meta-descriptions-wordpress/131762/