Here is how to embed JSON-LD in WordPress to give more information to search engine bots including Google bots. JSON-LD is not a visual element. We have talked about JSON-LD before through different articles – you can read these articles before reading this current one – JSON-LD in details and JSON-LD and Google Site Search. In this short guide, we will learn how to embed JSON-LD in WordPress to give more information to the search engines which can be difficult or not needed to present as HMTL text with schema markup. JSON-LD has W3C Recommendation :
1 | http://www.w3.org/TR/json-ld/ |
What We Need To Embed JSON-LD in WordPress?
First and foremost important point is to make your WordPress installation fully free of red marked errors on Google’s new micro data testing tool. We talked about how to resolve some errors. Warning is not that important, errors are bad. The bots will ignore more data.
Second step is obvious – you need to validate the JSON-LD. Third is to use some Plugin like Header and Footer to insert it on proper pages – posts or homepage or on other condition.
---
You can embed multiple instances of JSON-LD in one webpage.
How To Embed JSON-LD in WordPress and Test?
Testing is on Google micro data testing tool. For example, we have used this one for representing the person Dr. Abhishek Ghosh :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "name": "Abhishek Ghosh", "jobTitle": "Orthopedic Surgeon", "additionalName": "Dr. Abhishek Ghosh", "url": "http://dr.abhishekghosh.net", "address": { "@type": "PostalAddress", "streetAddress": "29F B.T. Road, Panihati", "addressLocality": "Kolkata", "addressRegion": "West-Bengal" } } </script> |
We can represent patient’s vitals in most complex form. We can represent a product :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script type="application/ld+json"> "@context": "http://schema.org", "@type": "Product", "productID": "mpn:ABCD", "description": "This laptops are the tools you need. .....", "url": "https://thecustomizewindows.com/does-not-exist/", "name": "Core i5-4200m / 4GB 500GB 15.6in 1080p Dvdrw Debian Linux", "image": "https://thecustomizewindows.com/does-not-exist/does-not-exist.jpg", "model": "911 scam laptop", "manufacturer": { "name": "Ponzi Company", "url": "https://example.com/" }, "offers": { "@type": "Offer", "availability": "http://schema.org/OutOfStock", "price": "1706.99", "priceCurrency": "USD" } } </script> |
On Google’s tool you can check our URL of suppose on QUIC protocol :
If you see somewhere JSON-LD prototype in this format :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { "@context": "http://schema.org", "@type": "Person", "name": "Abhishek Ghosh", "jobTitle": "Orthopedic Surgeon", "additionalName": "Dr. Abhishek Ghosh", "url": "http://dr.abhishekghosh.net", "address": { "@type": "PostalAddress", "streetAddress": "29F B.T. Road, Panihati", "addressLocality": "Kolkata", "addressRegion": "West-Bengal" } } |
It means you need to wrap it with :
1 2 3 4 5 | <script type="application/ld+json"> ... </script> |
Bonus For The Genesis Users : Clean The Article Markup
If you add this thing on your child theme’s functions.php file, you’ll get a after post widget on posts :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | genesis_register_sidebar( array( 'id' => 'after-entry', 'name' => __( 'After Entry', 'theme-prefix' ), 'description' => __( 'This is the after entry section.', 'theme-prefix' ), ) ); add_action( 'genesis_entry_footer', 'my_after_entry_widget' ); function my_after_entry_widget() { if ( ! is_singular( 'post' ) ) return; genesis_widget_area( 'after-entry', array( 'before' => '<div class="after-entry widget-area"><div class="wrap">', 'after' => '</div></div>', ) ); } |
You can use PHP Widget to add any stuffs which are not of the Post – very important – like those HTML markups of social share buttons should not get included inside the article wrap. By default these will not work any Genesis child themes.
