Automate image creation with JSON-LD BlogPosting from Plausible.io

Plausible is an open source web traffic analysis solution. It is positioned as a direct competitor to Google Analytics, which can be less respectful of cookies and user data.

This alternative is simple to install, with a very light script to place on your site, which will not impact the performance of your platform. This script will allow you to retrieve important and essential information about your users, without violating the rules related to the retrieval of personal data.

Plausible, one of whose founders and main author of articles is Marko SARIC (whom I thank for allowing us to use his articles as examples), regularly writes blog posts in order to share the adventure of the product around subjects such as Open source, the creation of a SaaS or even current events.

In this use case, we will illustrate the case of a newsletter for which we want to be able to generate illustrations, which will encourage clicks to our article when reading the email.

For this we have chosen different articles such as :

• https://plausible.io/blog/universal-google-analytics-is-dead
• https://plausible.io/blog/open-source-funding
• https://plausible.io/blog/remove-google-analytics

In our use case, we will start with the article Google Analytics will stop tracking stats on July 1st 2023 (and there's no import to GA4), which discusses the latest news about Google Analytics and its evolution.

The first step in accessing the functionality of the Content-LD Studio is to retrieve the information in the JSON-LD format from the page. The data for the BlogPostings content type is rather concise.

{
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "author": {
            "@type": "Person",
            "name": "Marko Saric"
      },
      "dateModified": "2022-03-16T12:13:33-05:00",
      "datePublished": "2022-03-16T12:13:33-05:00",
      "description": "Universal Google Analytics, the current version of Google Analytics, will stop counting stats on July 1st 2023. The new Google Analytics 4 will be replacing Universal Analytics.",
      "headline": "Google Analytics will stop tracking stats on July 1st 2023 (and there’s no import to GA4)",
      "image": "https://plausible.io/uploads/universal-google-analytics-is-dead.png",
      "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https://plausible.io/blog/universal-google-analytics-is-dead"
      },
      "url": "https://plausible.io/blog/universal-google-analytics-is-dead"
}

Once the information on the original page has been processed and formatted, the Studio allows you to select the fields you wish to display or not. In the case of our page there are two entities:

• Root, which contains all the basic information of the BlogPosting type
• Author, which is a linked entity, describing an Author type

The next step is an important one that is closely related to our need. The definition of the size of the wrapper we want to use can vary if you want to use the image in a newsletter, on a post for a social network or to illustrate your words in an article.

In today's use case, the image will be used to illustrate a newsletter, promoting the article for example. We will therefore choose a 2:1 format, 500 x 250px.

The following step is just as important as the previous one, it is the choice of information that we want to display and highlight afterwards. The BlogPosting type is a very condensed type in information and summarizes from a few fields the content of the blog post.

In our case we will choose the most important information:

• The title of the article, which is essential to understand the theme of the blog post
• The summary, to give a first overview to the readers, and potentially convert the internet user into a reader
• The image illustrating the content of the article, an essential graphic element to attract the eye and the reader
• And finally, the source of the article and its link, to cite the origin of the article (even if it is not clickable).

Following the choice of data displayed, the customisation stage is essential in order to shape our image to the colours of our company or our project. In this use case I won't detail all the design steps, but you can follow me directly on Twitter where I regularly share tips to format your data.

I took the opportunity to add an important data, the author of the article. Finally, once our design is finalized, it is now possible to generate the image (obviously without the dotted areas) in different formats (depending on your subscription). You can choose between JPG, PNG, JPEG or GIF.

The real advantage of using Content-LD to generate your content from your structured data in JSON-LD format is the template saving system. Imagine on all the last steps performed, if you only have to copy and paste the link of your article.

The time saving for you, your company or your project is considerable.

You will then find all your templates in the manager, but you have already seen that in the features presented here.

But in the end, what does all our work look like? For the article we covered in detail the final rendering, generated in JPG looks like this image:

And the strength of the Studio is that in a few seconds we will be able to generate the images of the other links that we selected at the beginning of the use case.

and for the article "Why you should stop using Google Analytics on your website":

To conclude this use case, it took me less than 5 minutes to format the first image format, and then less than 10 seconds (watch in hand) to generate the next 2 images. We can now share our images, which include the referencing information of our articles to promote them.