The Easiest Way to Insert Schema Into Your Website

UPDATE:  2021-09-23.  I’ve written a short update to this article with some additional information and tips.  Give it a read here.

One of the tasks I get called upon to complete quite often is that of inserting address or location or contact schema / schema markup / microschema / microdata / whateveryouwanttocallit into client’s websites. If you’re unfamiliar with schema, I’ll give you a quick rundown.

(For those of you who are well-versed in schema and don’t care about the background, skip down to the heading “How To Implement Schema Easily, Flawlessly, and With No Headaches.”)

Schema, which sometimes goes by all those names I mentioned in the first sentence of this article, is a small bit of code that provides more information about the text it surrounds. When a human reads a web page and he or she sees:

Netvantage Marketing
435 E. Grand River Ave., Suite 211
East Lansing, MI, 48823

the human can probably make a pretty strong assumption that they’re looking at the mailing address of the company’s offices. Despite huge advances in all different manner of technologies, computers still sometimes have trouble with this kind of thing. Enter schema.

Schema is a way of adding additional information to that address block so that Google and other search engines can better categorize the data they gather. The markup is not displayed on the web page so the user doesn’t see it–it’s only displayed in the HTML code that the web crawlers analyze.

So how does schema look? Well, for a full rundown of mind-numbing detail, I suggest you visit schema.org to learn all about it. Call me when your brains are fully melted out of your ears. But, to keep things simple, the schema code for the address in our example above would look like this:

<div itemscope itemtype="http://schema.org/LocalBusiness">
    <div itemprop="name">Netvantage Marketing</div>

    <div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
        <div itemprop="streetAddress">435 E. Grand River Ave., Suite 211</div>
        <div><span itemprop="addressLocality">East Lansing</span>, <span itemprop="addressRegion">MI</span> <span itemprop="postalCode">48823</span></div>
    </div>
</div>

Notice that there’s a lot more “stuff” in there for to helpify The Googles to understands more betterful.

There’s a ton more schema data that be included in a basic contact block. Things like phone number, fax number, email address, URL, hours of operation, geographic coordinates, and a bunch of other things can provide a much richer picture of the organization being profiled.

There are a bunch of free schema creators online–I’ve even created one myself (which is undoubtedly the best schema creator out there). I’m not going to link to my own generator but you can find it with a quick search if you are so motivated. If you don’t like mine, Google for others and you’ll come up with a handful.

…but you didn’t come here to learn about schema, you came here to figure out how to implement it easily, flawlessly, and with no headaches.  So here we go…

How To Implement Schema Easily, Flawlessly, and With No Headaches

It all boils down to two things. First, the entire bit of schema needs to be wrapped in one main <div>. You should already be doing this because your schema should start with something like <div itemscope itemtype=”http://schema.org/LocalBusiness”>.

The next thing is a small bit of CSS called the “display” property. When “display” is set to “none” the content is included in the code but the web browser ignores it and does not draw that content in the displayed web page. So, the main <div> changes from what you see above to this:

<div itemscope itemtype=”http://schema.org/LocalBusiness” style=”display: none;”>

Now you can copy an entire block of code from your favorite schema generator, drop it into the footer of a site with no regard to placement or formatting, and your schema is implemented with zero headache.

Make sure your main wrapper <div> has that style=”display: none;” bit in it or something will be drawn to the screen.  Here’s the example from before with the display property properly set:

<div itemscope itemtype="http://schema.org/LocalBusiness" style="display:none;">
    <div itemprop="name">Netvantage Marketing</div>

    <div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
        <div itemprop="streetAddress">435 E. Grand River Ave., Suite 211</div>
        <div><span itemprop="addressLocality">East Lansing</span>, <span itemprop="addressRegion">MI</span> <span itemprop="postalCode">48823</span></div>
    </div>
</div>

Initially we had a concern about whether or not Google would appreciate the hidden code and give us credit for it…or even ding the website for placing things in the code that don’t display on screen. Up to this point, we have used this trick on a few dozen websites over the course of the last several months and we’ve seen no ill effects or penalties from the implementation.

Pro Tip

Some may ask, “Why are you using the display CSS property instead of the visibility CSS property?” I’m very glad you asked this question…and the answer is quite simple. When you use style=”visibility: hidden;” the browser will hold a small space on the web page in reserve for that content. The web browser is expecting content to be drawn there at some point through an AJAX call or whatever else.

When you use style=”display: none;” the web browser holds no space in reserve and the code is completely ignored.

So the visibility property actually does draw something–albeit an invisible something–to the user’s screen whereas the display property does not.

UPDATE:  2021-09-23.  I’ve written a short update to this article with some additional information and tips.  Give it a read here.