Add Google Knowledge Graph Data to Your Shopify or WordPress Site

Adding Google Knowledge Graph Data to Shopify and WordPress

Everyday is a new day with search.  If you aren’t staying on top of SEO, you’re falling behind.  Unfortunately it’s not like rebuilding a car.

When I was growing up, one of my good friends dads was a car fanatic.  Still is actually.  At the time he would work on old antique cars.  He had a couple of projects always going at the same time.

He would putter about in the wee hours of the night working on his cars.  I always remember coming home in the middle of the night from being out.  Sure enough Daves dad was in the garage working on his cars.

SEO Shopify Work Car Knowledge Graph

This is my buddy Daves Dads 1957 Corvette. Love this car. Its one that he was working on at the time.

He loved working on them but admittedly got bored of some projects sometimes.  He wanted to take a break from time to time.  He would leave a car for 6 months and come back and start working on it later.

He could leave a wrench in the engine and come back 6 months later and pick up exactly where he left off.  Nothing had changed and he was still at the same exact place.

SEO Requires Attention

SEO is not like a car.  If you leave a website unattended and take a break from it, your rankings will start to slip.

Its like an orchid.  If you aren’t taking care of it, its going to die.  When you have a lot of online businesses, it can be overwhelming to stay current with all your sites.

A solid SEO campaign requires creating content, sharing, building backlinks, and various other things.  You can’t neglect it.

Google knows and you will slowly start the slippery crawl downwards in search results.

Its not enough to focus on the standard SEO tasks for your online store or online business.  You have to stay current and things continually change.

Googles New SEO Shiny Object Knowledge Graph

The latest addition to Googles growing list of SEO tools for your online store is the Knowledge Graph.

If you are reading this post, chances are, you are familiar with the Knowledge Graph.  For simplicity though lets start from the basics.

About two years ago, you may have started noticing a change in Google search results.  On the right side and some times on the top of search results you may have seen squares of information.

Knowledge Graph Google Local Information

When these boxes first started showing up, they were mostly populated from Google local data.  They often would include a map and maybe a phone number and hours.

These squares take a considerable amount of space on the screen.  They are also visually appealing to internet browsers.

This resulted in impressive click through rates.  People dashed to create Google local profiles.  They wanted to get their information showing up in the search results.

A couple of months ago, Google started expanding the data showing in these Knowledge Graph boxes.  You started seeing logos and other information and you started seeing them more often.

Newer Knowledge Graph Brand Information

This is interchanged with the increased Google Shopping square that they are showing.  The two flip flop based on what Google believes your searching intent is.

Google Shopping Knowledge Graph Box

Well it appears that Google is going full steam forward with their Knowledge Graph initiative.  This is in line with their goal to get you relevant information quicker and more easily.

Here is a video from Google touting the Knowledge Graph and how its going to end world hunger. 🙂

The problem is that the square is taking more and more real estate from the search results.  If you had only focused on organic search, your box is getting smaller and smaller.

Smushed between ads and the knowledge graph, you have to fight for every bit of real estate you can.

shrinking real estate on search results

Tiny in the bottom the first chance of an organic result appears.

IF You Cant Beat Them Join Them

If you have an online store or other online business, you must make sure you are getting on the Knowledge Graph train.

I am going to show you Two separate ways to add the Google Knowledge Graph Information to your online store or online business.

Create Your Knowledge Graph Online Store Logo

The first step is to create your Knowledge Graph Logo.  The logo will be one made specifically for use by Google.  They area in the top right of the Knowledge Graph is where your logo will appear.

You are going to want to create a 151 x 151 pixel logo.  This can be a png or a gif.  Once you have resized and created your image, you are going to upload it to your site.  If you are having trouble resizing you may want to read our post on graphics here.

Adding Google Knowledge Graph To Your Shopify Store

For the first example we are going to look at adding the Google Knowledge Graph tags to your Shopify store.

Now that you have created your logo in the correct proportions you need to upload it.   Lets look at how you upload this image to Shopify so that it can be included in your Knowledge Graph data.

In Shopify you are going to click on “Settings” and then “Files” from the menu.  Once the Files page loads you are going to click on the Upload File button at the top right of the page.

Shopify Knowledge Graph Files Menu

Now you are going to navigate to the logo that you made to upload it to your site.

Once uploaded you should see a thumbnail of the image and next to it a URL box.  You want to copy and paste that URL.

Shopify Logo For Knowledge Graph Box

Your next step is to insert the code.

In Shopify you are going to click on “Online Store” and then “Themes.” From here you are going to click on the three little dots at the top right of the screen.  Then click on “Edit HTML/CSS.”

edit shopify site to add knowledge graph meta

You are going to select theme.liquid from the left under “Layouts.”

Now you are going to enter some code right after your last <meta> tag.  You can scroll down and look for any existing <meta tags>.  Here is a screenshot what you are looking for.

Shopify Knowledge Graph Meta Tags

You want to find the last meta tag and then you are going to insert to following code.

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"WebSite",
"url": "http://www.YOUR_WEBSITE.com",
"name":"YOUR_WEBSITE_NAME",
"potentialAction":{"@type":"SearchAction",
"target":"http://www.YOUR_WEBSITE.com/?s={search_term}",
"query-input":"required name=search_term"}
}
</script>
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Organization",
"name":"YOUR_WEBSITE_NAME",
"url":"http://www.YOUR_WEBSITE.com",
"logo":"THE_LINK_TO_THE_IMAGE_YOU_UPLOADED",
"sameAs":["YOUR_FACEBOOK_PAGE_URL", 
"YOUR_TWITTER_PAGE_URL",
"ANY_ADDITIONAL_SOCIAL_LINK_FROM_LIST",]
}
</script>

You are going to replace the capitalized portions with your specific site information.  Below is a screenshot of how it looks with my wifes sites information in the code.

LD JSON Knowledge Graph for Shopify

Here is how it looks for my wifes actual fashion jewelry site.

The last line of the code, where it shows “SameAs,” is where you will define your social network links.

Social Links in Knowledge Graph Information

Adding your social networks in the “SameAs” tag lets Google know these are your social pages.  This information will show in the lower part of the Google Knowledge Graph box.

Knowledge Graph Social Links

Note that currently Google Knowledge Graph only supports the following social networking sites.

  • Facebook
  • Twitter
  • Google+
  • Instagram
  • YouTube
  • LinkedIn
  • Myspace

Adding Your Phone Number to Knowledge Graph Information

Lastly, if you want to add your phone number to the Knowledge Graph  data you can add the following code.  You would replace the phone number and the department name to your company information.

"contactPoint" : 
[
{ "@type" : "ContactPoint",
"telephone" : "+1-401-555-1212",
"contactType" : "customer service"
} 
]

This code above should be placed between the url line and the logo line.

Google Knowledge Graph Phone Number Shopify WordPress

Save And Update Shopify Knowledge Graph Info

Once you have finished entering the code into your shopify page, you are going to save the page and you should be done.

The last step to making sure you have successfully added the knowledge graph code to your shopify page is to check it.

You can skip the next section about adding the Knowledge Graph Meta Tags to a WordPress site.

Adding Google Knowledge Graph To Your WordPress Site

For lack of redundancy we are going to look at a different way to add your information.  This is the way that I added the new Knowledge Graph tags to my WordPress sites.  This is a little different then the method we used for Shopify.

We have been using Yoasts SEO plugin for years now and I highly recommend this plugin.  If you have a WordPress online store or are using WordPress for your online business, you should be using this plugin.

I have used a lot of SEO plugins over the years and this is superior to all of them.  The good news about using this plugin is that  Knowledge Graph information is now built into the plugin.

As of a couple of weeks ago the new WordPress SEO 2.0 from Yoast was released.  In it, he has added the fields to insert your Knowledge Graph information.  This is all handled with a simple user interface.

Knowledge Graph Meta in WordPress

From the Company Info tab on the main General Settings, you will set your site to a “Company.”  Next you will make sure you company name is correctly filled out.

You then will fill out the last field from the image above that says Company Logo.  This is where you will insert the link to the custom image that we created earlier in the post.  This is the logo that you want to show in the Knowledge Graph box.

The last step of adding your Knowledge Graph data to WordPress are the social links.  If you look above in the Shopify section you will see the social links that you can include in your Knowledge Graph box.

To add these social links in your Knowledge Graph through the SEO plugin, you will go to the “Social” menu item on the left side.

Knowledge Graph Social Links In WordPress

From here you will see the fields for all of the social channels.  Once you add them here and “Save Changes” they are instantly added to your meta information for the Knowledge Graph box.

And that’s it.  With the Yoast SEO plugin, it makes it simple.  In minutes you can add your Knowledge Graph information to your WordPress store or online business.

Adding Google Knowledge Graph to WordPress Without A Plugin

If you’re not currently using the Yoast SEO plugin or don’t want to use it, you can manually enter the Knowledge Graph Tags.

This is done in the same fashion as we did when we were adding the Knowledge Graph code to Shopify.

Your are going to go to “Appearance” and then “Editor.”  From here you are going to chose the Header (header.php) page on the right of the screen under your list of Templates.

Inserting Knowledge Graph info on WordPress Site

Like Shopify you are going to find the last meta tag and add the same code from above to the header file of your WordPress site.

Testing Your Knowledge Graph Data Is Working

Now that you have inserted the code into your site, you need to make sure it’s done properly.  If you spend all that time adding it, you want to make sure its formatted and working correctly.

The best way to do this is by using Googles Structured Data Testing Tool. This site is free and provided by Google so that you can check that the information you have added is properly formatted.

You will want to click on “Fetch Url” and then enter the URL of your website.  Make sure before fetching the data you have actually published the Knowledge Graph Information.

Knowledge Graph Testing Tool Shopify and WordPress

Once you click on “Fetch & Validate” it will return the status information on the right side.  If you see green “All Good” and checkmarks then you are all good.

If there are problems you will need to work through them one by one to try and isolate the problem.   Often times its just a simple typo that you can fix.

You can use this tool as many times as you need to confirm that the information is correct.

When Will My Knowledge Graph Information Show Up?

Unfortunately your Knowledge Graph info for your store or business is not going to show up immediately.   Quite frankly it may never show up.

It’s completely up to Google whether they will include this information in search results.  But if you aren’t providing the information, you are far less likely to ever get the Knowledge Graph box to show.

Larger companies have Wikipedia pages and Google gets a lot of information from there.  They use that to populate the Knowledge Graph box.  If you are a smaller online store or online business, you need to provide it yourself.

Insert it today and forget about it.  This is one more step in the ever-changing SEO game for online stores and online businesses.

On to the next SEO change.

Are You Ready To Start Your Own Online Business?

Start An Online Store Crash Course

Sign up now to receive our 5 Step FREE Crash Course to starting your own online store. Learn the tricks we have used with clients for years. Get started building your future now.

  • FREE 5 Step Crash Course
  • Designed For Beginners
  • Receive our Resource Guide Instanlty
  • Start Now By Entering Your Email Below