Classy Emojis using Classy Unicode

Summary

Some CMS systems seem to have trouble with inserting Emojis into their content. e.g. their WSYWIG editors don't like them. I believe it is because they can't cope with unicode characters greater than hex FFFF. This inspired me to write a simple script that lets people insert emojis into the webite with basic html that will not get rewritten or stripped out.

The script then inserts the correct emoji characters into the page, so it should work fine with Google.

You can find emojis at Emojipedia and Unicode Full List or just select and copy any you find.

🔍 Can You Display Emojis in Search Results?

Yes, by adding Emojis to your Titles, Meta Descriptions, Content and FAQ’s, Google may choose to display them in certain searches. This adds a visual appeal to your search result that can attract attention to your result amongst your competitors.

❓ What is Classy Emoji/Unicode?

Within some Content Management Systems, certain Unicode characters, including Emojis, cannot be added. Classy Emojis allows users of such systems to instead enter a code that is converted into the desired emoji that can be seen by both people and search engines like Google.

🤷 Why Use Emojis?

Primarily, they can add a visual aesthetic that may attract and appeal to your audience. Additionally, as a picture paints a thousand words, Emojis can also convey complex meanings with a single character, giving you more room in the limited space a search result provides to get your message across.

📵 Why Aren't my Emoji's showing?

Google’s John Mueller has weighed in on their approach previously in this Google Webmaster Central hangout. Basically, Google may choose to omit emojis if considered irrelevant or spammy, especially in the Title or Meta Descriptions. Our research has found the 🤷‍♀‍ emoji to be the most reliable for FAQ Snippets.

Create Classy Unicode

Enter your Emoji, basic text or HTML then press the button to see a version that is editor safe. When you install the Classy Unicode Script the extended characters like Emojis will magically appear. More Emojis can be found at Emojipedia and Unicode Full List.

Quickly add Emojis to the editor below... on Windows: + . on Mac: CTRL + CMD + Space

The Classy Unicode Script

For BigCommerce store owners using our SEO Rich Snippets app, you can enable this script from the dashboard.

The script checks certain parts of a page for a special text sequence that indicates a unicode character (like an emoji) should be placed there. It looks for hex numbers inside two smiley faces. e.g. (:1f3a7:)

By default the script checks the title tag, meta tags, h1 and h2 tags and any content inside a 'classyunicode' class.

Full Length Script

<script>



var webSiteAdvantage = webSiteAdvantage || {};
webSiteAdvantage.classyUnicode = webSiteAdvantage.classyUnicode || {};

// to set default options
// webSiteAdvantage.classyUnicode.options = { querySelector: ".classyunicode, title, h1, h2", processMetaTags: true };

webSiteAdvantage.classyUnicode.run = function (options = webSiteAdvantage.classyUnicode.options) {
    let querySelector = ".classyunicode, title, h1, h2"; // select the elements to process
    let processMetaTags = true; // should the content attributes of meta tags be processed

    // enables customisation via setting webSiteAdvantage.classyUnicode.options or passing options in the run function.
    if (options) {
        if (options.querySelector) {
            querySelector = options.querySelector;
        }

        if (options.processMetaTags) {
            processMetaTags = options.processMetaTags;
        }
    }

    if (querySelector && querySelector.length > 0) {
        // process tags with the classyunicode class and the title tag and some heading tags
        let elements = document.querySelectorAll(querySelector);
        for (let i = 0; i < elements.length; ++i) {
            let element = elements[i];

            //let html = element.innerHTML;
            //if (html) {
            //    element.innerHTML = webSiteAdvantage.classyUnicode.convert(html);
            //}
            let matches = webSiteAdvantage.classyUnicode.processTextNodes(element);

            if (matches > 0) {
                element.setAttribute('data-classyunicode-matches', matches);
            }

            if (element.classList) {
                element.classList.add("classyunicodedone");

                if (matches > 0) {
                    element.classList.add("classyunicodefound");
                }
            }
        }
    }

    if (processMetaTags === true) {
        // process meta tags with a content attribute, like the description
        let elements = document.querySelectorAll("meta[content]");
        for (let i = 0; i < elements.length; ++i) {
            let element = elements[i];
            let c = element.getAttribute("content");
            if (c) {
                element.setAttribute("content", webSiteAdvantage.classyUnicode.convert(c));
            }

            if (element.classList) {
                element.classList.add("classyunicodedone");
            }
        }
    }
};

webSiteAdvantage.classyUnicode.processTextNodes = function (node) {
    let matches = 0;
    for (node = node.firstChild; node; node = node.nextSibling) {
        if (node.nodeType === 3) {
            if (node.nodeValue && /\(:([0-9a-zA-Z ]*):\)/.test(node.nodeValue)) {
                node.nodeValue = webSiteAdvantage.classyUnicode.convert(node.nodeValue);

                matches++;
            }
        }
        else {
            matches += webSiteAdvantage.classyUnicode.processTextNodes(node);
        }
    }
    return matches;
}

webSiteAdvantage.classyUnicode.convert = function (source) {
    // used to convert from html codes to unicode characters 
    let temp = document.createElement('textarea');

    if (!source)
        return source;

    return source.replace(/\(:([0-9a-zA-Z ]*):\)/g, function (match, codesText) {
        let result = "";
        let codes = codesText.split(" ");

        for (let c = 0; c < codes.length; ++c) {
            let code = codes[c];

            result += "&#x" + code + ";";
        }

        temp.innerHTML = result;

        return temp.value;
    });
    
};window.classyRun=function(){if(window.classyRun.classyRunDone)return;window.classyRun.classyRunDone=1;window.webSiteAdvantage.classyUnicode.run();};if(document.readyState !== 'loading'){window.classyRun()}else{window.addEventListener('DOMContentLoaded',function(){window.classyRun()});window.addEventListener('load',function(){window.classyRun()})};
window.addEventListener('load', function () {
  webSiteAdvantage.classyUnicode.run(); // alternate using options:
  // webSiteAdvantage.classyUnicode.run({querySelector:".classyunicode, title, h1, h2", processMetaTags: true });
});</script>

Minified Script

<script>

var webSiteAdvantage=webSiteAdvantage||{};webSiteAdvantage.classyUnicode=webSiteAdvantage.classyUnicode||{},webSiteAdvantage.classyUnicode.run=function(){var options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:webSiteAdvantage.classyUnicode.options,querySelector=".classyunicode, title, h1, h2",processMetaTags=!0;if(options&&(options.querySelector&&(querySelector=options.querySelector),options.processMetaTags&&(processMetaTags=options.processMetaTags)),querySelector&&querySelector.length>0)for(var elements=document.querySelectorAll(querySelector),i=0;i<elements.length;++i){var element=elements[i],matches=webSiteAdvantage.classyUnicode.processTextNodes(element);matches>0&&element.setAttribute("data-classyunicode-matches",matches),element.classList&&(element.classList.add("classyunicodedone"),matches>0&&element.classList.add("classyunicodefound"))}if(!0===processMetaTags)for(var _elements=document.querySelectorAll("meta[content]"),_i=0;_i<_elements.length;++_i){var _element=_elements[_i],c=_element.getAttribute("content");c&&_element.setAttribute("content",webSiteAdvantage.classyUnicode.convert(c)),_element.classList&&_element.classList.add("classyunicodedone")}},webSiteAdvantage.classyUnicode.processTextNodes=function(node){var matches=0;for(node=node.firstChild;node;node=node.nextSibling)3===node.nodeType?node.nodeValue&&/\(:([0-9a-zA-Z ]*):\)/.test(node.nodeValue)&&(node.nodeValue=webSiteAdvantage.classyUnicode.convert(node.nodeValue),matches++):matches+=webSiteAdvantage.classyUnicode.processTextNodes(node);return matches},webSiteAdvantage.classyUnicode.convert=function(source){var temp=document.createElement("textarea");return source?source.replace(/\(:([0-9a-zA-Z ]*):\)/g,(function(match,codesText){for(var result="",codes=codesText.split(" "),c=0;c<codes.length;++c){result+="&#x"+codes[c]+";"}return temp.innerHTML=result,temp.value})):source};window.classyRun=function(){if(window.classyRun.classyRunDone)return;window.classyRun.classyRunDone=1;window.webSiteAdvantage.classyUnicode.run();};if(document.readyState !== 'loading'){window.classyRun()}else{window.addEventListener('DOMContentLoaded',function(){window.classyRun()});window.addEventListener('load',function(){window.classyRun()})};;window.addEventListener('load', function () {
  webSiteAdvantage.classyUnicode.run(); // alternate using options:
  // webSiteAdvantage.classyUnicode.run({querySelector:".classyunicode, title, h1, h2", processMetaTags: true });
});</script>