SCHEMA MARKUP DETAIL GUIDE-Generation & Implementation

Schema Markup: The Hidden Code Your Website Needs : If search engines were people, schema would be like giving them an instruction guide on how to navigate your website.

Schema Markup Structured data

What Is Schema?

In layman’s terms, schema is some code that tells search engine crawlers what your webpage entails. It is a form of structured data, which is an amount of information given in an order so that a computer system can easily understand it.  It would be like trying to explain a webpage to a search engine in a language it is fluent in.

For instance:Without schema: Google takes your page as a document filled with text and pictures.

With schema: Google understands that it is a, “recipe for chocolate cake”, an, “event happening on saturday,” or a, “a product listing for a leather wallet.”

Why is Schema Markup Important for Your Website?

Having schema markup isn’t just about getting it for the sake of doing it, it is about ensuring the content that you have made will be noticed and clicked.

Here’s what you can achieve with markup schema:

Better Understanding: It increases search engine crawlers understanding of quickly processing the content of your webpage.

Improved Visibility: Well structured data increases the chance of appearing in the rich results, which are those eye-drawing search results with ratings, imag,ques, and more.

Higher Click Rates: Listings that have been enhanced in some way are more likely to be clicked on rather than the plain text results.

Indirect SEO Boost: Even though schema on its own isn’t a ranking factor, it does help search engines understand your content and connect it with relevant queries, which increases your chances of ranking higher.

Increased Site Traffic: Improved visibility and a higher click-through rate will lead to additional visitors to your site.

In short, schema enables your site to be “heard” better and cuts through the noise, improving its visibility and presence.

How to Generate Schema For Your Site or Page

Although it may sound complicated, adding schema is much easier than you think if you have the right tools. With this guide, you will be able to create schema with ease using TechnicalSEO.com, a free and reputable schema generator.

Step 1: Look Up Schema Markup Generator

Go to Google using your preferred browser and search “schema markup generator.” Click on TechnicalSEO.com from the results, as it is simple to navigate and is great for beginners.

Step 2:Figure Out What Schema You Need

Visit TechnicalSEO.com to get started with different types of schemas based on your website content.

  • Article: For blogs, news, and editorial publications.
  • Breadcrumbs: For navigation path schemas.
  • Events: For advertising events.
  • FAQ Pages: For question and answer content.
  • Job Posting: For listing job vacancies.
  • Local Business: For listing business information such as address and working hours.
  • Organization: For information regarding the company or a brand.
  • Person: For individual profiles.
  • Product: For products on an online shop.
  • Recipe: For a set of cooking instructions.
    • Make your schema selection based on the intended use of your webpage.

Step 3: Complete the Form

You should have selected your schema type. Now, a form will populate. Complete it with the most accurate data, including: title, description, image, URL, and other pertinent fields.

Step 4: Create a Schema Code

The tool will automatically generate your schema in JSON-LD format after you fill out the form.

Step 5: Validate the Schema

Make sure to validate your schema in the tool itself or in Google Rich Results Test before embedding it into your site. This will ensure your code is error-free.

Implementation of Schema Markup on Your Website

Assuming everything passes the checks, you can paste the generated code to the HTML (preferably in the section) or, if your content management system (CMS) has schema fields, make use of them.

Implementing schema on your website is fairly straightforward. If you generated your schema via TechnicalSEO.com or a similar website, the next step is to upload it to your website for search engines to crawl and utilize.

There are multiple ways to do this, but three common methods are:

Using WordPress (either directly or through a plugin like HFCM – Header Footer Code Manager)

Using GTM (Google Tag Manager)

Using specific WordPress plugins dedicated to certain schemas (for example, FAQ, Product, or Local Business schemas).

You can freely add multiple schema types as long as the page content is relevant. There is no hard limit to the number of schemas you add.

You can place schema in either the head or the body of the page. If you wish to verify if a page is already schema-enabled, press CTRL + U to view the page source and then Search for schema.

Method 1: Adding Schema Directly in WordPress

To add schema, open the WordPress dashboard, and select the page you want to add schema to.

In the page editor, switch to the Custom HTML block.

In the HTML block, paste the schema code you generated from TechnicalSEO.com.

Note: Before you add schema, make sure you test it in TechnicalSEO.com or Google’s Rich Results Test to ensure there are no errors.

Don’t forget to update the page to save your changes.

Note: Visitors will not see the schema code because it’s backend code meant for search engines. If you want to verify implementation, view the page source (CTRL + U) and search for schema.

Method 2: Adding Schema with HFCM (Header Footer Code Manager Plugin)

If you prefer to manage schema separately from your page content, the HFCM plugin is a great option.

Here is a brief overview:

From your WordPress dashboard, install and activate HFCM Plugin.

Now access your dashboard, navigate to HFCM section and click on Add New Snippet.

In the fields given, fill in the following:

Snippet Name: Name of your schema type (e.g. “Organization Schema”).

Snippet Type: HTML.

Snippet Display: Choose Sitewide for all pages, or Specific Pages if you want it to display on a particular page only.

Exclude Pages/Posts: Optional—use this if you want to skip some pages.

Location: Select where to put it: Header, Footer, Before Content, or After Content. (It is better to start with Header for schema purposes).

Device Display: “All Devices” is fine.

Status: Active.

Schema code should be pasted in the snippet box and click on save

3.Schema with Google Tag Manager (GTM)

GTM lets you add schema without needing to change the code of the site directly. This is helpful in case of marketers looking after many tags.

Adding Schema in GTM Steps:

Login to your Google Tag Manager account.

Proceed to Tags → New.

Give your tag a name (e.g. “Organization Schema – About Us Page”).

Under Tag Configuration, select Custom HTML and paste your schema code from TechnicalSEO.com.

Select Triggering to set when this schema should load:

All Page Views: If you want it on every page.

Some Page Views: If you want it on selected pages.

For your About Us page schema for example:

Select Some Page Views.

Set the condition: Page URL → contains → about-us.

Hit save for the tag.

In Tags section you should be able to see your schema is listed under GTM ready to go live anytime you publish your changes.

About us

We focus on the needs of small to middle market businesses to improve and grow their return.

Drop Us a Line

Fill in the form to share more details about you and your requirement. Either way, we’d love to talk.