Schema App Tutorial: Contact Page Schema Markup

How To

Transcript of audio:

In this tutorial, we’re going to show you how you can optimize your contact page with markup. Let’s go ahead and get started by going to the structured data editor.

Once in the editor you’re going to want to pick what type of data item that you want to optimize for a contact page. There’s actually a defined data item called contact page we’re going to go ahead and search for that. Once it’s selected you can go ahead and click on the create button to get started. Schema is going to prompt you to name this data item. You want to name it something that’s easy to find, usually the name of the client and then what you’re optimizing so in this case, it’s going to be the Hanley Mortgage Group contact page. The URI is the identifier that our WordPress plugin, Google Tag Manager, as well as the JavaScript API will use to identify what it is updating so that it can pull in the appropriate markup. It’s usually the URL of the page that you’re optimizing.

Now Schema App is going to pull up all the different properties associated to contact page. If there are required and recommended fields for the Google features, it will highlight those in the page. In this case, there’s no required fields for Google so we’ll just go ahead and start with the basic properties. So you can fill into the description to a contact page for Hanley Mortgage Group. The image you can take off the page, in this case we’ll use the the logo image since it’s the only one that’s displayed on this page. We’ll copy the image address and go ahead and paste that directly in Schema App. For same as, if you go over the question mark, it says that you can use it to reference webpages that sort of articulate what it is and so it highlights Wikipedia but you can also put social media. So on this contact page, we highlight the different social media accounts and i’ll just show you for example we can go ahead and add in the URL for Facebook, if you had multiple different social media accounts referenced on the contact page you could also list those there or delete them using the X. The URL is the URL of the page, and so you can just go ahead and and copy that in.

Now for the contact page, the most important thing you want to do is call out what it’s about and in this case it’s about contact information, and for contact information defines a contact point. So in Schema App, in order to link two things together so in this case a contact page and a contact point, you go ahead and create a related data item. So you see this little down arrow? You click on it and say create data item. This data item is then connected to the contact page. Similarly to what we did when we created the data item for the contact page, it’s going to prompt me to to name this so we’re going to call it a Hanley Mortgage Group sales contact. And then for the identifier or URI, what you can do is go ahead and put in the URL that you used previously and then if you have multiple numbers or multiple departments you want to list, you can use this hashtag and then some type of an identifier so in this case we’ll use sales number. And we’re not quite done because you also want to go ahead and type in the thing and that the type of thing that we’re describing here as a contact point you can go ahead and type in contact and then select contact point. Again contact point is what is defined for phone numbers and contact information, and go ahead and click OK so you’ll notice now that that related data item is created but it doesn’t have any detail on it. We’re going to go ahead and save this page and what we’re going to do now is click into what this is about to the Hanley Mortgage Group sales contact, and add some details there.

So we click on it and then click on edit and now we’re going to enter additional information about the contact point. Now, why creating this contact makes your life easier is because it could also be reused in different places, so if you’re doing a service mark up and you want to identify how people can get in touch with you for that service, you can re use this data item called contact point across those different avenues. So the first thing we do is contact type, now Google is very clear here around like what the different contact types they’re looking for and so sales is one of the ones that they’re looking for and so we’re going to go ahead and enter sales here. This list will be available in future in Schema App so you won’t have to reference Google for that the next is the telephone number so we’ll go ahead and copy and paste that directly off our webpage and remove the brackets and add a 1 for the international code. Area served is we look on the question says the geographic area where the service or offer is provided and so in this case it’s in Toronto and I’ve previously entered Toronto so I can enter that there. If it serves multiple areas you can again create a related data type and enter the name so in this case we’ll enter King City maybe, and King City what we want to do is use a definition for King City so if we go to Wikipedia and we put in King City, Ontario we can use the Wikipedia definition in order to define what we are describing as a city here.

We’ll go back to Schema App and as this identifier will put in the Wikipedia definition for King City and then you have to make sure that you pick the types so here Schema App telling you it’s an administrative area or geographic shape or place this is a city so we’ll go ahead and pick city. Again in the type you want to be as specific as possible, and so go ahead and click OK. Available languages i’ll put in English. If you have other languages and you want to add those you can just do exactly what we just did for the city by creating a data item and then using the Wikipedia definition as that identifier.

The contact option then is is being able to identify whether there is an additional option for this contact point such as toll-free number or hearing-impaired callers, or you can just leave it blank. And then feel free to add basic properties if those are helpful so you know sales phone number for Hanley Mortgage Group and then there’s other additional contact point properties here and we do have a fax number so i’m going to go ahead and look at my contact page and see that there is a fax number I haven’t defined anywhere, so i’m going to go ahead and add that in and again clean it up with my international code and removing those brackets. And then you can see there’s also hours available email product supported and then service area. Again for Google you want to make sure you fill out those required and recommended properties, and then again make sure that the information that’s on the page is reflected somewhere in the markup. So we’re gonna go ahead and click on save, it’s telling me that I haven’t put in an option for the contact option and that’s OK because I don’t have one so we’ll go ahead and click OK.

And so now the details that I’ve entered are listed here and then I can go ahead and click on about and it goes back to the related or connected page for the contact page. So now that I’ve saved both of those, the markup is generated automatically so that JSON-LD. If you want to take it manually you can click on actions and get the JSON-LD and it will list it there for you, or if you’ve gone ahead and set up the WordPress plugin the Google Tag Manager or JavaScript API, that code will now be automatically deployed to that page. So that’s how you go ahead and optimize your contact page using Schema App.

Previous Post
Schema App Tutorial: Organization (Homepage) Markup
Next Post
Schema App Tutorial: Service Page Markup