Select Page

How to add schema markup to Divi without a plugin

How to add schema markup to Divi without plugin

June 29, 2020

If you are using Divi as your WordPress theme you can use this hook in your Divi Child Theme in order to add any Schema Markup you like into any page.

Why would you want to add schema to your pages? Because is another way to provide Search Engines with information about your website including your opening hours, location and recently to add review information and recipe steps that help you rank better in the Search Results.

If you want a boost in SEO, you must be using Schema.

I must warn you though, adding the Schema is fairly easy but creating the schema you want is the most complicated part, not a rocket science but you must be willing to learn a bit about structured data. The good thing is that Google provides a very easy to use tool that can help you create a schema for the most common types which are the ones Google cares about.

Follow this 4 step process and you will be on your way to adding great SEO value to your pages:

  1. Create your JSON Schema Markup
  2. Add your JSON Schema Markup to a Custom Field in the page you want it.
  3. Add a PHP Action in your Child theme’s functions.php
  4. Verify your Schema

Create the Schema Markup for you web page

There is a great tool from Google that can help you create your Schema. It is called the Structured Data Markup Helper. Just select the kind of schema you want to create and input your web page.

Here is an example of a Local Business Schema markup.


{
  "@context" : "http://schema.org",
  "@type" : "MedicalBusiness",
  "name" : "Dra. Tania Adabache Guel - Cirujano Oftalmólogo",
  "@id": "https://retinavitreo.com",
  "image" : [
    "https://retinavitreo.com/wp-content/uploads/2018/01/logo-retina.png",
    "https://retinavitreo.com/wp-content/uploads/2018/01/tania-abadache2.jpg"
  ],
  "telephone" : "449 153 2801",
  "email" : "info@retinavitreo.com",
  "url" : "https://retinavitreo.com/contacto/",
  "address" : {
    "@type" : "PostalAddress",
    "streetAddress" : "Avenida Universidad 103, Consultorio planta baja 03 Villas de la Universidad",
    "addressLocality" : "Aguascalientes",
    "addressRegion" : "Aguascalientes",
    "postalCode" : "20029",
    "addressCountry" : "MX"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 21.897971,
    "longitude": -102.304643
  },
  "openingHoursSpecification" : [ 
    {
      "@type" : "OpeningHoursSpecification",
      "dayOfWeek" : [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday"
      ],
      "opens" : "10:00",
      "closes" : "14:00"
    },
    {
      "@type" : "OpeningHoursSpecification",
      "dayOfWeek" : [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday"
      ],
      "opens" : "16:00",
      "closes" : "20:00"
    },
    {
      "@type" : "OpeningHoursSpecification",
      "dayOfWeek" : [
        "Saturday"
      ],
      "opens" : "10:00",
      "closes" : "14:00"
    }
  ],
  "priceRange" : "$$"
}

 

Add the schema markup to a custom page in your web page

Then you must add the schema into a custom field. The field name must be unique and must match the custom field you will use in the step 3 of this process.

Schema custom field in wordpress

Add the divi schema markup snippet to your child theme’s

Add the following snippet of code into your Divi Child’s theme. It is an Action Hook that will add the data you set in the “custom_schema_json” field for each page if the custom field exists.


add_action('et_head_meta', 'custom_schema_json');
function custom_schema_json () {
  $schema = get_post_meta(get_the_ID(), 'schema_field', true);
  if(!empty($schema)) {
    echo $schema;
  }
}

Verify your schema with Google’s Structured Data Testing Tool

Visit the Google Structured Data Testing Tool and input the webpage you want to verify and the tool will fetch the web page and show you the data or any error within so you can fix it.

You May Also Like…

Share This