How I Improved My JavaScript Blog Articles Schema

πŸ™‚ Like
πŸ™‚Like πŸ₯°Love 🧐Watching this 🀨Suspicious πŸ˜’Meh 😑Angry

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/2015/08/cropped-gb-logo-512.png"
            }
        }
    }
    </script>
<?php } ?>

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

Also not the get_the_date('c') which will return the date in this format, based on my timezone settings:
2020-07-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 of the variables are hardcoded.

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Monday, July 27, 2020 in Blog, JavaScript

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles

%d bloggers like this:
Privacy Policy