How I Improved My JavaScript Blog Articles Schema

I use WordPress, but I don’t use a specific SEO plugin. Everything is done inside the theme.

Last week, I improved my blog article schema for my JavaScript tutorials, by adding a targeted article schema.

Google recommends a specific block to be added to all article pages. Because I’m using WordPress, I needed to pass some variables. On my singular.php template I have added this block of code, right inside the loop, above the title:

<?php if ( is_singular( 'post' ) ) { ?>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": {
        "@type": "WebPage",
            "@id": "https://google.com/article"
        },
        "headline": "<?php echo get_the_title(); ?>",
        "image": [
            "<?php echo whiskey_post_thumbnail_uri( get_the_ID() ); ?>"
        ],
        "datePublished": "<?php echo get_the_date( 'c' ); ?>",
        "dateModified": "<?php echo get_the_modified_date( 'c' ); ?>",
        "author": {
            "@type": "Person",
            "name": "Ciprian Popescu"
        },
        "publisher": {
            "@type": "Organization",
            "name": "getButterfly",
            "logo": {
                "@type": "ImageObject",
                "url": "https://getbutterfly.com/wp-content/uploads/2022/03/cropped-gb-logo-512.png"
            }
        }
    }
    </script>
<?php } ?>

Note how some variables are hardcoded, such as the logo, the person, and the organization.

Also note the get_the_date( 'c' ) which will return the date in this format, based on my timezone settings:
2022-03-27T08:00:00+08:00

What I gain here is full control over the code (I can even add an image carousel, as the image elements allows an array of images). I also gain a bit of speed, as the code is not injected automatically at runtime and some variables are hardcoded.