Four Google SERP features for ecommerce SEO

30-second summary:

  • Holiday season shopping is on and your ecommerce store whether a local shop or an international ecommerce brand needs visibility for sales
  • How do you jump right in front of your potential customers and drive sales in a highly competitive space?
  • SEO pioneer, former Pepperjam founder, and serial entrepreneur, Kris Jones shares a practical ecommerce SEO guide

There is perhaps no type of business that is more primed for SEO than ecommerce companies. Think about it: where a local law firm can put up a billboard or buy ad space in a regional newspaper in addition to doing SEO, ecommerce businesses essentially have one resource available to them, the internet.

That’s where they do 100 percent of their business, and it’s where they’re going to reach the customers they want. So, ecommerce companies should spend a lot of time getting their SEO just right. One crucial way of doing that is to optimize your site to appear in Google’s various SERP features.

There are so many ways you can tell users about your business just from the SERP even before they get onto your website. And the information you present could mean all the difference between capturing your ideal traffic and losing it to competition.

Therefore, to market yourself in the best light to all potential customers searching for your products, you have to optimize your website specifically for the SERP features that drive conversions.

How do you do it? Here are four of the most vital Google SERP features for which you should be optimizing your ecommerce business’ SEO.

1. Rich cards

Back in 2016, Google introduced a new mobile SERP feature called rich cards. By using structured data, SEOs could make a business’s results “richer,” that is, more visually appealing, clickable, and therefore more likely to generate an organic click.

If you search for a certain type of product, results marked up with the proper language tell Google to show the product along with an image that can help users know if they want to explore more. Users simply swipe to see more items.

Now, why am I recommending a SERP feature from 2016?

It’s because in the first quarter of 2021, mobile traffic accounted for almost 55 percent of online traffic worldwide, and that number is only going to increase. Basically, mobile search results are even more relevant today than they were in 2016.

With that in mind, how can you optimize your ecommerce products for rich cards?

You need to use the JSON-LD method of marking up your products. You can then test your work with the various free rich results tools on offer from Google.

2. Google Images results

Somewhat related to rich cards is the need for ecommerce businesses to optimize their content for Google Images results. Relevant images will appear at the top of a SERP, before any organic results.

A good product description does indeed go a long way, but don’t forget to think simply, as well: if customers can see clear, high-quality images of your products, that will help your credibility along, and hence drive conversions.

How do optimize for Google Images results? Well, Google doesn’t read images like it reads text, so it’s all going to come down to how you prepare your images on the back end.

First of all, ensure your images are originally yours. You don’t stand much of a chance trying to rank for stock photos.

Next, give your photos descriptive file names that tie into the pages where they will be placed. In the case of ecommerce, since you’ll probably have a series of photos for each product, give the image files titles that reflect the product, with words separated by hyphens.

Here’s an example: unisex-sneakers-blue-brandname-yoursitename

And don’t forget to provide descriptive alt text to each image in case it can’t load and be seen.

Finally, be sure you’re not uploading huge image files that will weigh down a website. Compress them down as small as you can to give your site enough breathing room while still ensuring the images show what you need them to show. Check out this comprehensive guide on image optimization.

3. Rich snippets

Wait a minute, you might say, why are you talking about both rich cards and rich snippets?

With ecommerce products, rich cards will stop you at the images. You can choose to go a step further for appropriate products by optimizing for rich snippets.

Rich snippets add in extra details about your products. These get placed inside your search results, under the meta title, and above the meta description.

To get rich snippets on your product results, you’ll use structured data just like you did for rich cards. You can choose which information to enter based on what specifically can grab your potential customer’s attention and satisfy their search query.

For ecommerce companies, it makes the most sense to optimize your rich-snippet products for prices, in-stock status, sales, different brands, customer reviews, and star ratings.

Think about each of these features. Doesn’t it make sense that a customer searching for this type of product would want to see this information from your online store?

Rich snippets are one great way of reaching users with extra information without the need for the users actually to click on your result. You’re taking the most concentrated bits of data about your product offerings and jumping right out onto the SERPs at the user.

Sure, you can choose not to do this for your products. But if your competitors are, who do you think stands the better chance of getting a click and making a sale?

Rich snippets are just good ecommerce SEO, plain and simple.

4. Sitelinks

Finally, you should attempt to optimize your site for SERP sitelinks.

I say “attempt” to optimize because this isn’t a SERP feature you can just click on and off, like alt text or structured data.

So we’re all on the same page here, sitelinks are the clickable buttons below your result’s metadata on a SERP. They typically offer opportunities for users to navigate directly to sections of your website.

In the case of ecommerce, the most logical sitelinks you would want to get listed in your result would be for your most popular product categories.

But again, I’m saying “would want” because sitelinks are chosen by Google’s algorithm. That doesn’t mean you can’t influence which sitelinks Google places there. Which pages Google links in your results is based primarily on your site’s navigation.

As SEOs, we always recommend having a direct and easy-to-navigate website structure. It helps the user experience, supports navigation, and prompts Google to crawl your pages.

Other things that help Google crawl your site include keyword-optimized content, smart internal linking, and simple, intuitive menus.

It is through these elements that you stand your best chance of defining what your SERP sitelinks will be. When you tell Google which pages are most important to you and your customers, the search engine will respond in kind by generating helpful sitelinks.

This is yet another example of having your SEO jump right to the SERP at users without them having to do anything.

And when you’re in the competitive ecommerce space, that really matters.

Go forth and optimize

Businesses always have it tough when going up against the competition. Whether you’re a local shop or an international ecommerce brand, there’s always someone else trying to beat you at your own game.

While SEO can never make anyone do anything, we put ourselves on the best possible footing when we take the above steps to optimize our websites for the SERP features.

If you’re not doing these things already, you’ll want to get started as soon as you can! And then sit back and watch what happens.


Kris Jones is the founder and former CEO of digital marketing and affiliate network Pepperjam, which he sold to eBay Enterprises in 2009. Most recently Kris founded SEO services and software company LSEO.com and has previously invested in numerous successful technology companies. Kris is an experienced public speaker and is the author of one of the best-selling SEO books of all time called, ‘Search-Engine Optimization – Your Visual Blueprint to Effective Internet Marketing’, which has sold nearly 100,000 copies.

Subscribe to the Search Engine Watch newsletter for insights on SEO, the search landscape, search marketing, digital marketing, leadership, podcasts, and more.

Join the conversation with us on LinkedIn and Twitter.

The post Four Google SERP features for ecommerce SEO appeared first on Search Engine Watch.

https://www.searchenginewatch.com/2021/11/18/four-google-serp-features-for-ecommerce-seo/




How to win at SEO with FAQ schema markup

30-second summary:

  • According to Neil Patel, less than one percent of businesses take advantage of FAQ schema markups. 
  • There are several benefits schema markups provide to your overall SEO rankings. 
  • Implemented correctly, the FAQ schema markup can get your site into the featured snippets section of Google’s first page. 
  • Google has outlined which pages are eligible and which are prohibited from showing up as featured snippets in Google. 
  • FAQ schema markup added to quality, in-depth content can help to quickly improve your SEO score. 
  • Co-founder of Ally digital media, Abhishek Shah guides you through the process of setting up and implementing the FAQ schema markup to help improve your SEO. 

By implementing schema markup for your FAQ page, you can improve your website’s visibility as well as increase your website’s authority. 

Very few websites seem to be taking advantage of this easy, yet incredibly, effective SEO hack. According to Neil Patel, less than 1% of businesses online seem to be implementing this. So, now’s the time to get on board and ensure the schema markup is set up on your FAQ page. 

But first, let’s look at exactly what it is, and why it will improve your SEO. 

What is FAQ schema markup?

Schema markup is a powerful yet underused piece of code for SEO to help increase your website’s presence in the SERPs. 

This piece of code is placed on your website to help Google, and other search engines, to return better results for consumers. 

Search engines crawl your site, it gets indexed, and then when someone makes a relevant search your content may show up. What schema markup does is provides context to the content.  

Essentially, it removes some of the guessing search engines do when they crawl your site. A markup is able to provide context by telling the search engines what the content means. 

Schema.org explains it this way

“Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string “Avatar” in a heading 1 format. However, the HTML tag doesn’t give any information about what that text string means — “Avatar” could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.”

This is why the context provided by adding schema markup to your FAQ page, can help increase your presence in the search results. 

How an FAQ schema markup can help you win at SEO?

Having your FAQs in the featured snippets on Google can generate a huge lift in organic traffic. By adding the schema markup, you improve your chances of this happening. 

An important metric in SEO is CTR (click-through-rate). This is measured by the number of clicks divided by the number of impressions a result gets. For example, if you had 50 clicks and 800 impressions, your CTR would be 6.25%. 

If you can increase your CTR, it shows search engines that the page is relevant for that search term and it can help your website’s overall search ranking. 

Here’s one such example of Nestedbean’s learn page that talks about sleep regression, implementation of FAQ schema helped them in doubling the CTR from 6.5% to 14%. 

Stats showing success of FAQ schema markup implementationSource: Google Search Console

By using an FAQ schema markup, you are increasing your website’s visibility by showing up for a wider variety of keywords. Which means more traffic to be potentially turned into paying customers. 

How to implement FAQ Schema?

The FAQ schema can be implemented in one of two ways: Microdata or JSON-LD. Whichever one you choose we strongly recommend you stick to that one. It’s not a good idea to mix them on a webpage. 

1. Microdata

This is the more complex of the two options. To implement schema markup with Microdata involves coding elements into your website. If you don’t have a web developer in your team this can be a rather tedious and challenging process where the code is added to the body section of your page. 

Here’s a microdata example for the FAQ page schema

<html itemscope itemtype=”https://schema.org/FAQPage”> 

<head> 

<title>Search Engine Marketing Frequently Asked Questions (FAQ) – Search Engine Watch</title> 

</head> 

<body> 

<div itemscope itemprop=”mainEntity” itemtype=”https://schema.org/Question”> 

<h3 itemprop=”name”>What is search engine marketing?</h3> 

<div itemscope itemprop=”acceptedAnswer” itemtype=”https://schema.org/Answer”> 

<div itemprop=”text”> 

<p>Search Engine Marketing helps put get your website onto page one of search engines when someone searches for something related to your industry.</p> 

</div> 

</div> 

</div> 

</body> 

</html> 

2. JSON-LD

Google recommends JSON-LD as “Google can read JSON-LD data when it’s dynamically injected into the page’s contents, such as by JavaScript code or embedded widgets in your content management system.” JSON-LD is certainly the easier of the two options, as this code is added to the header section of a page. 

Here’s a JSON-LD example for the FAQ page schema

<html>

<head> 

<title>Search Engine Marketing Frequently Asked Questions (FAQ) – Search Engine Watch</title> 

</head> 

<body> 

<script type=”application/ld+json”> 

{ 

“@context”: “https://schema.org”, 

“@type”: “FAQPage”, 

“mainEntity”: [ 

{ 

“@type”: “Question”, 

“name”: “What is Search Engine Marketing”, 

“acceptedAnswer”: { 

“@type”: “Answer”, 

“text”:”Search Engine Marketing helps put get your website onto page one of search engines when someone searches for something related to your industry.”} 

}] 

} 

</script> 

</body> 

</html> 

You can either write the code out from scratch, or you can copy the above code and use it as a template. Just be sure to remember to change out the content for your own. 

The outcome will look like this: 

Snippet example FAQ schema markupSource: Google 

How to validate FAQ schema implementation?

Validating your FAQ schema implementation is a simple three-step process. 

1. Test

To ensure you have implemented the code correctly on your page, you should use Google’s Structured Data Testing Tool. You can add your code snippet here, or the page URL and the testing tool will let you know if you’ve done it correctly or not. There is the added bonus that it will also provide any necessary feedback. 

2. Preview with Google’s Rich Result Tester

This tester will not only let you know if your page is eligible for rich results, but it will also show how the data will look in the SERPs. 

3. Recrawl the page

Once the code is added, and you have run the tests and the page is good to go there is one final step – requesting Google to re-index the page. 

To do this, you will need to log into Google Search Console and enter the modified URL in the top search bar and hit enter. Then you will want to select the option to request indexing. 

In some cases, you can see the effects kick in pretty quickly. Well, pretty quickly for search engines. If you’ve done this for a page that’s already ranking on page one, you should see the results update on the SERPS inside of 20 minutes. 

Which pages can the schema markup be applied to?

When considering adding the FAQ schema markup, it’s important to understand Google’s content guidelines. The first and most obvious guideline is that the page must have a list of questions with their answers attached. 

If your page has questions that users can submit their answers to, you want to use a different type of markup. Instead of using FAQPage, you would want to use QAPage: which is a different type of schema markup. 

Some valid uses of the FAQ schema markup are:

  • A page of FAQs written on the website. These pages have no way for users to submit alternative answers. 
  • Product support pages which list FAQs, that also have no way for users to submit different answers. 

 Some invalid uses of the FAQ schema markup are: 

  • Product support pages where users are able to submit their own answers to questions. 
  • Product pages that allow users to submit many questions and answers on a single page. 
  • Forum pages where users are able to answer questions themselves. 

You want to use the FAQ Schema markup for pages that are not time-sensitive. Also, Google’s guidelines strictly stipulate that you cannot use the FAQPage schema markup for advertising reasons. 

Other times when question and answer content won’t be displayed include if the following types of content are on the page: 

  • Profane 
  • Graphically violent 
  • Obscene 
  • Sexually explicit 
  • Hateful 
  • Illegal activities 

And finally, it is necessary for the FAQ content to be visible to the user on the FAQ page. All this means is you don’t want the content hidden from the user, or for the page to have a brief summary that links off to another page. 

What to include in the FAQ content on your page?

The FAQ schema markup code is quite easy to implement as we’ve shown above. Keep in mind, your FAQ content needs to meet all the usual SEO factors to work in concert with the schema markup. 

This includes aspects such as:

  • How relevant the content is to the topic
  • The page layout
  • How easy it is to read the content 

When you hear the phrase “readability”, it’s referring to a few things. The first is how easy is it to read? That is, are you varying your sentence lengths and using short paragraphs? 

The second is the font choice, as well as its color and size. When it comes to writing for an audience you want an easy font to read that’s a good size and color that doesn’t cause readers to strain their eyes. 

And finally, are you saying something? The best ranking FAQs are the ones that provide in-depth, useful answers. In-depth doesn’t always mean lots of words. If you can successfully (and meaningfully) answer a question in 50 words, that’s fine. 

It’s not about how many words you can write, it’s about how well you can answer a question and provide value.  

The advantage of good SEO-driven content with the right schema markup

By creating informative, well-written content that provides value to your website’s users, and then adding the correct schema markup, you can get yourself on page one of Google. And the more content you get on page one, the more traffic you drive to your site. 

The benefit of more traffic to your site is an increase in sales and subscriptions. 

Win at SEO with FAQ schema

If you want to give your website “the competitive advantage”, all you have to do is follow these simple steps. We recommend starting off with pages that are already ranking well to help get them either onto page one or to increase their real estate on page one. 

Good SEO has a snowball effect. The more content that drives quality traffic to your site, the better your overall SEO score. That is why it’s so important to boost your content efforts with schema markups. 

If you would like to know more about FAQ schema markup, just hit the comment button. 

Abhishek Shah is the co-founder of Ally Digital Media, a leading voice in digital media and marketing. He advocates for evidence-based marketing strategies to fuel the businesses. He can be found on Twitter @abiishek. 

How to win at SEO with FAQ schema markup




Why businesses should implement structured data

Why businesses should implement structured data

It goes without saying that the world of SEO is becoming ever more technical, and over the past decade, webmasters, SEOs, and in-house teams have been widening their knowledge and skillsets to help their sites compete in search engine results pages.

One of these areas, which has seen the most development since its launch in 2011, is, of course, schema.org markup.

Although it has been eight years since the data schema was introduced, whether due to lack of development capability or technical knowledge, many popular brands are still to implement structured data to their websites.

In this article, we’re going to take a look at what structured data is, and the benefits that the markup can provide for websites.

A brief introduction to structured data

Put simply, structured data is a form of markup that is implemented in the code of a website and provides search engines with specific pieces of information about a page, site, or organization.

By improving the knowledge that a search engine has about a particular page or site, it can, therefore, provide users with the information that they need when conducting a search.

It also means that if a business invests in structured data throughout its site, it could enjoy higher and more relevant levels of traffic.

But how does this happen?

Structured data can enhance AMP pages

Despite structured data not being a direct ranking factor, it can, however, influence other elements of your website which are ranking factors.

In a world where a lot of searches (even the biggest part) are made through mobile devices, site speed has never been more important, especially when you consider that users will leave a page that takes longer than three seconds to load.

For this reason, many businesses have implemented Accelerated Mobile Pages (AMP) on their site (read more about them here), which can help overcome critical mobile speed issues and improve the usability of pages.

But most people don’t realize that AMPs can actually be enhanced via structured data markup.

Google states that by implementing structured data to AMPs, they can enhance the appearance of the page in mobile search results while offering the ability to appear within rich results.

If a site gains the opportunity to appear within rich results for an important search term, the site could gain a great amount of search traffic as a result.

You can learn a little more about how structured data enhances AMP pages in this handy Google guide.

Structured data helps sites appear in Google’s Knowledge Graph

For sites that appear in highly competitive verticals, getting the edge over your competition is critical, and one way to do this is by establishing your site presence with Google and appearing in the Knowledge Graph.

Knowledge Graph cards appear on the right-hand side of search results and they provide users with functional and visual elements of your site; making it far easier for users to familiarise themselves with it.

To enable your business Knowledge Graph card, you need to add the necessary Corporate Contact markup on the homepage of your website.

Structured data knowledge graph

Like all types of markup however, there are important guidelines and rules that you must follow, such as ensuring that markup is not blocked from crawling by robots.txt directives.

You can find more information on how to properly implement Corporate Contact markup in this Google Developers Guide.

Structured data can be vital for improving a site’s click-through rates

CTR of a website is rather important for its rankings. And according to Neil Patel, the best way to increase it is to research and use keywords, especially long-tail keywords. Serpstat can help you make deep and useful keyword research and improve your rankings as well.

Also, the whole point of structured data is to provide clean and concise parcels of information to search engines so that you can clarify the purpose of your site and its pages to quickly provide users with the accurate information that they require.

This means that by implementing well-written and relevant structured data into your pages, your site should be shown to a more relevant audience base, meaning that your click-through rates will inevitably improve.

In fact, sites that implemented structured data found that their CTRs improved by at least 10%.

How to implement structured data

We’ve already learned the meaning and value of structured data on the site. Now, we’ll explore two of the main approaches for adding schema markup to your website.

How to add Schema.org micro-markup with Schema plugin

The easiest way to add a micro-markup to the site is to use the Schema plugin. It works with any available schema options and is embedded in the Yoast SEO plugin.

To install, go to Plugins – Add New in the WordPress console and find “Schema.” Activate it and go to Settings.

Structured data schema plugin

Fill in basic information, such as the location of your About Us page, Contacts, upload your website logo.

By filling out additional information, content, knowledge graph, and search results, you can optimize your site for each of the areas.

Then, you can go to Schema – Types and add the selected schema type or publication category.

Types of schema plugins

If the above-mentioned plugin doesn’t suit you, you can choose from a large number of WordPress plugins alternatives for schema markup. Here are some of them:

How to add Schema.org markup manually

Here, you should work more with the code, but you can add your schema markup individually to any page or post.

With arbitrary schema markup, you can include several different types of markup on the same page. For example, if you have an event page, and you also want to place a feedback schema on it, you can easily do it.

The most efficient way to manually add schema to your site is JSON-LD. This method is also recommended by Google. It’s based on JavaScript. You’ll add schema markup to your site as a script, so it’ll be much easier to read and debug.

Remember to follow all Google structured data guidelines while creating the code for your markup.

If you don’t know how to write markup code, you can use the Structured Data Markup Wizard from Google or JSON-LD Generator to create your code.

To use this approach, go to any post or page where you want to put the markup. Click Screen Settings at the top of the page and check the “Custom Fields” box. Now, scroll down to the “Custom Fields” settings and press “Enter new” to create a new field. Name it “Schema” and enter the code. For example, local businesses data type:

Custom fields box

Please provide the source and a possible caption for the above image

Next, you’ll need to edit your header.php file. Open it and paste the following code before the closing </head> tag:

Header.php file

Thanks to these actions, your schema code will load separately with metadata. You can add any kind of custom schema markup to your WordPress website with the above-described approach.

Just remember to run your page or post in the Google structured data testing tool to check your markup for errors. This validator understands the following formats:

  • Schema.org
  • Microdata
  • RDFa
  • JSON-LD

Using it, you can check the page in two ways:

  • Copy in HTML format
  • Specify a link to the page

If the site is being developed on a PC or if you need to test some options, you need to use the first method. The second one is suitable for the final verification of the finished markup. Also, here you can check the site pages when using ready-made CMS templates. They may contain some errors in markups.

For example, let’s check the Phase 5 Analytics page. After copying the URL and clicking the “Run test” button, the result of the verification appeared on the screen. There was the HTML code on the left, and markup on the right with errors if they were found.

Google structured data testing tool

Final word

Adding structured data to the site will not take a lot of time. This action will help improve the look of the snippet in the search engine and increase traffic to the site.

The process may seem a little technically complicated, but you’ll discover that even the option to manually add it is not as hard as you’d assume. In addition, many available plugins will make developing structured data very simple.

Inna Yatsyna is a Brand and Community Development Specialist at Serpstat. She can be found on Twitter .

Whitepapers

Related reading

how to fix top UX mistakes for better SEO

Differences between B2B and B2C link building tactics

siddharth taparia SAP on embarking on search transformation projects

From SEO to CMO: Self driving technology and the path to C-Suite

Why businesses should implement structured data




How to implement semantic markup using Google Tag Manager

Structured data is, at this point, a core SEO tactic.

Not only does it remove a layer of ambiguity for search engines (they don’t have to infer what a piece of data is; you’re telling them outright), it’s also the engine that drives rich results, which are taking up an increasing amount of real estate in the SERPs.

The advent of voice-enabled search is making structured data an even more important part of the search marketer’s toolset. In much the same way that structured data enables search engines to extract and reproduce rich data in the SERP, that same entity extraction and reproduction is at the core of voice search results.

Unfortunately, implementing structured data via semantic markup can be time-consuming and frustrating. Until relatively recently, the only way to implement semantic markup was to do so inline, by adding HTML attributes from Schema.org to the existing HTML of a page.

To do so at scale, this historically required making changes to page themes or templates, which could be a big development ask depending on the site’s setup.

Plus, inline markup is by its very nature bound to the presentation layer: you couldn’t mark up pieces of data that weren’t on the page (with the exception of judicious meta tag use), and if two pieces of information weren’t close together on the page, it could be difficult, if not impossible, to link them together within a single itemScope tag.

Happily, the days of struggling to wrangle our data into easily-marked-up forms are behind us: it is now possible to add structured data in mere minutes using JSON-LD. This markup is now fully supported by Google and Bing; in fact, Google recommends adding structured data via JSON-LD instead of inline for Merchant Center accounts.

In the interest of clear and effective illustration, we’ll be using a fairly simple use-case in this first “Static JSON-LD section”. We’ll get more advanced once we arrive at “Dynamic JSON-LD”.

Know that even the more advanced example is just the tip of the iceberg; almost nothing is off limits when it comes to the level of complexity that Google Tag Manager-injected structured data can support.

Static JSON-LD

Static JSON-LD can be added to the <head> of the relevant page, or inserted using a plugin, but the easiest (and most flexible) way to implement it, in my opinion, is through Google Tag Manager (GTM).

Step one: Write the JSON-LD

If you’re unfamiliar with JSON-LD, you may want to do some reading or take a quick tutorial to familiarize yourself with the basic concepts. Google’s Introduction to Structured Data is a good place to start. Depending on the schema type you’re using, schema.org may also have examples of JSON-LD markup for that item type.

Example JSON-LD for the Event item type on schema.org

After the initial script tag, which tells the browser “this is a JSON-LD script”, you can see the hierarchy of our script:

  • “@context” specifies what semantic vocabulary (this of it as a shared dictionary for machines) we’re linking our data to – in this case, to the schema.org vocabulary.
  • “@type” is the specific schema, or entity type, within schema.org that we’re referencing. It’s the equivalent of “itemtype” in inline markup.
  • From there, we can directly reference specific properties within the schema by name. This is the equivalent of “itemprop” in inline markup.

Note that when we’re referencing sub-types such as Place, we need to call that @type separately, and put that sub-type in its own set of brackets to indicate which nested properties belong to said sub-type.

Don’t forget to put a comma after each property except the last one before an end bracket, or your code won’t parse properly (and it’s annoying to hunt through your code to find the missing comma)!

Once you have your code written, test it in Google’s Structured Data Testing Tool to make sure everything looks good and you don’t have any missing required properties.

Step two: Create a trigger

In Google Tag Manager, we want to create a trigger so that our JSON-LD markup tag will fire on the page we want it to fire on – in the example above, it would be on the page for the Typhoon with Radiation City event.

Create the trigger:

  • Type: Page View
  • Fire on: Some page views
  • Fire this trigger when: Page path equals the URL of your target page

Here’s what the trigger setup should look like

Step three: Create the tag

Now it’s time to create the tag that will fire on our target page and inject our JSON-LD structured data.

Create the tag:

  • Type: Custom HTML
  • HTML: Paste in the JSON-LD code, making sure to include the opening and closing script tags.
  • Triggering: Use the trigger from step 2.

Here’s what the tag setup should look like

Step four: Publish and test

Once you’ve published the tag, put the page URL back through the Structured Data Testing Tool to verify that Google can parse and understand it.

Voila, you’re done!

Dynamic JSON-LD

If you’re not adding new pages to your site every day, and the pages that are there don’t change that often, structured data via static JSON-LD may be all you need.

For sites like e-commerce sites, which may have thousands of products whose price and availability may be subject to change, however, static JSON-LD just isn’t scalable. We need to get a little bit fancy.

Step one: Create variables by CSS selector

Since we want this script to be dynamic, we’ll need to make use of GTM variables to find the pieces of data we need and give them names our script can understand.

Create a new (user-defined) variable. In this example, we’re creating a variable to grab the product name:

  • Give the variable a distinctive name, like “dataPoint – Product Name”; you’ll refer back to it later by this name.
  • Type: DOM Element
  • Selection Method: CSS Selector
  • Element Selector: The unique CSS selector for the element. In this example, the element’s class is product-name, so the selector is .product-name.

Repeat this step for each property you need to pull in to make your structured data validate.

Step two: Pull together in a function expression

Unfortunately, we can’t just pop our variables into our JSON-LD code and call it a day. Google Tag Manager inserts JavaScript to return its variables, and that JavaScript will invalidate our code.

Instead, we need to wrap our JSON-LD IN a function expression that will pull out our variables first, then merge theminto a JavaScript object, and finally insert a completed JSON-LD script tag into the head of the page.

The finished script in the Custom HTML tag (in GTM) should look something like this:

It may take a bit of tweaking and fiddling to get this to pull out your data exactly the way you want it; fortunately GTM’s Preview functionality will let you test as much as you need to before you deploy.

JSON-LD markup and AMP

Unfortunately, you can’t use GTM to inject JSON-LD structured data into AMP pages. GTM containers for AMP, like most things for AMP, are stripped-down versions of themselves. They don’t support the Custom HTML tag, or custom JavaScript variables, because they can take too long to load.

If your site is using  AMP, you may want to consider inline markup after all.

Once you get this methodology under your belt, you’ll find that implementing structured data has gone from a time-consuming slog of adding inline markup and bothering your developers, to something you can create and deploy in minutes.

Best of all, markup with JSON-LD fully validates, earns rich snippets, and is now supported by Bing as well as Google – so if you think it will work for your site, there’s no reason not to try it.

Related reading

https://searchenginewatch.com/2018/03/20/how-to-implement-semantic-markup-using-google-tag-manager/