Adding Schema Markup to WordPress Blog

So, you’ve decided to boost your website’s SEO by adding schema markup?  Here is a great article on how to do it https://blog.kissmetrics.com/get-started-using-schema/

After spending some time marking up your post, you may find that your schema markup tags were stripped by TinyMCE editor that is used by WordPress.  In order to solve this problem you need to add a code below to your functions.php file


// Prevent TinyMCE from stripping out html
function schema_TinyMCE_init($in)
{
    /**
     *   Edit extended_valid_elements as needed. For syntax, see
     *   http://www.tinymce.com/wiki.php/Configuration:valid_elements
     *   https://www.tinymce.com/docs/configure/content-filtering/
     *
     *   NOTE: Adding an element to extended_valid_elements will cause TinyMCE to ignore
     *   default attributes for that element.
     *   Eg. a[title] would remove href unless included in new rule: a[title|href]
     */
    if(!empty($in['extended_valid_elements']))
        $in['extended_valid_elements'] .= ',';

    $in['extended_valid_elements'] .= 'div[id|style|title|itemscope|itemtype],';
    $in['extended_valid_elements'] .= 'img[class|src|alt|width|height|itemprop],';
    $in['extended_valid_elements'] .= 'span[itemprop],';
    $in['extended_valid_elements'] .= 'meta[itemprop]';

    return $in;
}
add_filter('tiny_mce_before_init', 'schema_TinyMCE_init' );

There are two things to keep in mind about this code snippet. This snippet is a sample one: in your case you may want to define some other elements. When adding a new attribute by specifying an existing element rule (e.g. img), the entire rule for that element is over-ridden so be sure to include all valid attributes not just the one you wish to add. That is why, in order to add itemprop attributes to img tag, I had to specify all other attributes I would like to have for img tag.