UGC Microdata Setup

The Viafoura API's return the data needed for SEO optimization. See the steps below as an example of how to add Conversations data for SEO.

To create schema.org data using the Viafoura Conversations API and incorporate it into a script tag with type application/ld+json of an article with the vf-conversations widget, follow these steps:

Step 1: Retrieve Article Information
Retrieve the necessary information for the article from your client's source. Here's an example for this page of our demo site:

const articleData = {
  "headline": "Here Are What Media Companies Are Doing to Deal With COVID-19 Information Overload",
  "thumbnailUrl": "https://www.datocms-assets.com/55856/1671212216-information-overload.webp",
  "description": "With COVID-19 disrupting the world, the demand for news has never been greater. Newsrooms are being pushed to their limits as they test the most time-saving yet effective methods to sift through an infinite amount of coronavirus information, craft story after story and keep their teams safe.",
  "url": "https://demo.viafoura.com/posts/here-are-what-media-companies-are-doing-with-covid-19-overload",
  "image": {
    "@context": "http://schema.org/",
    "@type": "ImageObject",
    "url": "https://www.datocms-assets.com/55856/1671212216-information-overload.webp",
    "width": "1778",
    "height": "1000"
  }
};

Step 2: Retrieve Comments from Viafoura API
Use the Viafoura API to fetch comments. Replace <SITE_UUID> with the value provided by Viafoura, and <CONTAINER_ID> with the value used in vf-conversations or the meta tag vf:container_id.

📘
Live Blog Implementation
For getting live blog data you would use the Viafoura API to fetch live blog posts. And then add the live blog data to your schema.

fetch(`https://livecomments.viafoura.co/v4/livecomments/<SITE_UUID>?limit=10&container_id=<CONTAINER_ID>&reply_limit=2&sorted_by=newest`, {
  method: 'GET',
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  }
})
.then(response => response.json())
.then(data => {
  const comments = data.map(comment => ({
    "@context": "http://schema.org/",
    "@type": "Comment",
    "datePublished": new Date(comment.date_created).toISOString().split("T")[0],
    "text": comment.content,
    "upvoteCount": comment.total_likes,
    "downvoteCount": comment.total_dislikes
  }));

  // Combine article data and comments into one object
  const schemaOrgData = {
    "@context": "http://schema.org/",
    "@type": "Article",
    "headline": articleData.headline,
    "name": articleData.headline,
    "thumbnailUrl": articleData.thumbnailUrl,
    "description": articleData.description,
    "url": articleData.url,
    "image": articleData.image,
    "commentCount": comments.length,
    "comment": comments
  };

  // Embed schema.org data into <script> tag
  const scriptTag = document.createElement('script');
  scriptTag.type = 'application/ld+json';
  scriptTag.text = JSON.stringify(schemaOrgData);
  document.head.appendChild(scriptTag);
})
.catch(error => console.error('Error fetching comments:', error));

Step 3: Embed Schema.org Data
Finally, the schema.org data including both the article information and the comments will be embedded within a

<head>
  <!-- Other meta tags, styles, and scripts -->
  <script type="application/ld+json">
    {/* The schema.org data generated in Step 2 will be inserted here */}
  </script>
</head>

Ensure that the script is executed at a time when you have at least 10 comments. In terms of performance, it's generally more efficient to create the JSON on the server side, where it can be cached to reduce the need for repeated generation of the same data.

Step 4: Verify your Schema.org
Once this is published on your site, you can verify that this is working as expected by checking the URL of an article in the Rich Results Test site provided by Google. For this tutorial, you can check the end result in this link.

📘Live Blog Implementation

📘
Live Blog Implementation