Xagio Knowledge Base | Schema Editor

Schema Editor – The basics

A brief manual on Schema Editor basics

Aleksandar Stamenkovski

Last Update 3 jaar geleden

Introduction

In this article, I will try to help you understand the process behind creating schemas using the powerful module inside of Panel, called Schema Editor. Schema Editor is a object orientated builder for popular Schema.org JSON-LD (JavaScript Object Notation for Linked Data) structured data. Unlike all other Schema Generators (let's call it that way, this is actually a builder) you've ever seen, this one gives you total control of how your Schemas will look like and what they'll have. Meaning, that you have all the possible Schemas and their Properties at your disposal. Using these properly could potentially have a really sweet effect on rankings and rich text snippets in Google SERPs (search engine result pages) for your website.

First Looks

Let's start by talking about what are you going to see the first time you navigate to the Schema Editor page. You'll see a huge editor area with loads of buttons and text boxes. Looks a bit complicated at the first sight, but once you get used to it, it isn't actually. See the screenshot from below for reference and legend that explains what is what in there.

Schema Editor – Legend

1. Manage Groups (since we're going to be working with a lot of potential websites, we need groups, so we can differentiate which Schema belongs to which website and so on)

2. Templates (these are here to help you with early beginning with Schema editor, until you figure out properly how it works. using these will generate pre-loaded and configured LocalBusiness Schema example)

3. Saved Schemas (all the Schemas that you've previously worked on and added will appear in the sidebar here)

4. Available Schemas (when you want to start working on a new Schema, you will search it in this bottom sidebar and select it so you can start working with it)

5. Current Schema name (shows the Schema name of the currently loaded Schema, we use this to again differentiate 6. Schemas one from another, for example if you have a Homepage Schema and Page #1 Schema)

7. Current Schema group (shows the Schema group of the currently loaded Schema)

Button for saving Schema changes (you will be using this button whether you are adding (saving) a new schema or editing an existing one)

8. Render current Schema – Export Schema (this will open up a new window where you will see the rendered version of the currently loaded Schema. can be also used to export the currently loaded Schema so you can put it into the HTML based website)

9. Current Schema container (an area where all the properties of the currently loaded Schema will be displayed)

Now that you're familiar with the basics of Schema Editor interface, we can move on to creating your own first Schema that you'll use on your homepage.

Creating the Schema Group

Alright, before we actually dive in and start creating your own Schema, we would first need to create a new schema group, so in future, you'll know what schema belongs to which website. Of course, this step is optional as all ungrouped schemas will be put to Miscellaneous group, but it's advisable to have your website schemas divided by groups.

When you click on the #1 button Manage Groups on the Screenshot #1, a window from above will be opened. In this window, you will be able to add/remove your schema groups. As you can see in the image above, I have two groups, my website and xagio.codeandplay.xyz. Depending of your choice, you can name the group anything you want, but best practise is to name them by domain names of your websites (see xagio.codeandplay.xyz). Adding a new schema group is simple, just hit the Add New Schema Group and insert the desired group name.

P.S. Group names are unique and you can't have more than one schema group with the same name.

Creating a new Schema

Now that we have a new group that's ready, we can start creating your very first schema. To start doing that, in the bottom left sidebar named Add New Schemas, type in LocalBusiness and once you see it in search results, click once on it to have it loaded in Current Schema container (seen on #9 in the Screenshot #1).

Add New Schemas sidebar

Now that your first schema is successfully loaded inside of the Current Schema container, we can start analyzing what are we currently seeing on your screen. Check the screenshot from below and legend below it.

Currently Loaded Schema Container – Legend

1. Current Schema Type (shows what type of schema is currently loaded)

2. Current Schema Type Description (shows the info about when this schema should be used – for what websites)

3. Remove last Property Value (will remove the last value in the selected property)

4. Add new Property Value (will add a new property value row for the selected property)

5. Change Property Type (this will let you choose which type of property you want to use in this property)

As you probably noticed, there are some things not marked by numbers on the screenshot. Those that have the description in the screenshot are Properties. Each Property consists of it's Name, Description & Values. Basically, all Schemas are made of their respective Properties, and those are the fields that you're going to be editing while creating Schemas. All properties can have multiple values that can be added by clicking on the button [+] (#4 in the screenshot) and removed by button with the trash can icon (#3 in the screenshot). Properties can also have different types, meaning that one property can have URL value while the other can have Text and even some other can have a totally different Schema as a value. All of these fields and properties are configured in the way that Schema.org provides it's data on schemas.

So, now that you've seen all those properties that are inside of a single Schema, you're probably wondering if all those are required to be filled out in order to create a valid schema?

No, not at all. Usually, it will be required to fill out only the descriptive properties such as Name, Description, Logo, Image, E-mail Adress, Location, Address, URL, Price Range, Opening Hours and so on. Basically, everything that provides basic relevant information about your website (business). Any other properties is optional and is to be used if you want to give more details to search engines about your website. Easiest way to check if your schema is valid is to press the Render Schema button and paste it inside of the Structured Data Testing Tool by Google in order to make sure all the required properties have been set. If some are missing, simple add values for them and test it again in Structured Data Testing Tool.

Okay, now that you have basic understanding of what Schema is and of what it's consisted, we're ready to start filling up some values inside of those LocalBusiness properties.

Filling out the Schema Properties

In the video below, we're navigating through the properties that we're going to filling our for this LocalBusiness schema.

Since the video from above is going rather fast, I'll let you know here which properties you need to fill out.

- Description

- Image

- Name

- Same As (Facebook, Twitter & other social links)

- URL

- Address

- Email

- Legal Name

- Logo

- Telephone

- Currencies Accepted

- Opening Hours

- Payment Accepted

- Price Range

These properties from above are the absolute minimum of what you must have to create a valid LocalBusiness schema.

Once you're done with filling up these essential properties, we can go ahead and save your schema with the previously created schema group.

Saving and validating Schemas

Now that we have your schema properties properly filled out, we're ready to save that schema and see if it's valid on Google's Structured Data Testing Tool.

Before setting up this schema's group and saving it, we need a name for it, right? Set up a name of your choice based on where you're going to use this schema (Homepage maybe?). As I'm just making examples here, my schema will be called test123.

Then lets set this schema's group by selecting the group dropdown (#6 in Screenshot #1) and then picking the group name that you've created in first step of this article.

After the group has been set, we're ready to finally save your schema into the database. You can do that by pressing the Save Schema button that's next to the group dropdown as seen in the screenshot below.

If you completed all the steps from above correctly, your schema should now be saved and accessible in the Available Schemas sidebar (#3 in Screenshot #1).

Now in order to validate this newly generated schema, we're going to render it and then copy the provided code and paste it into the Structured Data Testing Tool. First, start by pressing the Render Schema button to get the code output of your schema.

Soon after you've clicked on Render Schema a new window will appear with the schema code inside of it:

Now that you have all that schema code copied, navigate to Structured Data Testing Tool and select in the window there CODE SNIPPET. Paste your schema code and press RUN TEST and that tool will start validating your schema.

After the successful validation, you will see the output on your right side of the screen. If all is properly filled out in your schema, it should look like this:

Aaaaand, that's it! You've just created your very own first schema! Good job!

Conclusion

Schema Editor seems a bit difficult to use, but with proper training and guidelines, you'll be able to create beautiful schemas quickly without too much hassle.

Stay tuned for more articles where we will go even deeper inside of Schema Editor's capabilities.

Was this article helpful?

1 out of 1 liked this article

Still need help? Message Us