A Guide to Using JSON-LD and Nuxt to Improve SEO and CTR

SEO is an important part of creating an online presence as it gives an advantage of your website appearing as one of the top results in search results; thereby increasing the probability of it being visited. There are a couple of techniques that help search engine crawlers find out what is on your webpage as this knowledge is important in knowing whether your webpage is a fit response to a search. One of these techniques is by defining a JSON-LD. This article will learn how to use JSON-LD to improve the visibility of a website in search engines.

SEO

What is SEO?

SEO means Search Engine Optimization, it is the process of improving the visibility of a website by making it easily readable or crawlable to search engines thereby increasing web traffic. The easier it is for search engines to read a website, the better the chances that the website will appear as one of the top results in relevant searches.

What is CTR?

CTR stands for Click-Through Rate; a digital marketing metric used to measure the number of times an ad or product listing is clicked in relation to the number of times it appears on the “clicker’s” screen. A good CTR is dependent on what is being advertised and how well it offers to cater to a need of the “clicker” at a point in time.

Benefits of SEO

Considering a report that a search engine like Google handles about 5.4 billion searches every day, a website that is properly optimized can take advantage of this digital real estate by appearing among the top results in a search page thereby increasing chances of a click-through and ultimately improving web traffic. Appearing higher in search ranking than business competitors can also improve the chances of being the first point of contact. While a website owner can pay for advertisement, and use other tools of publicity like social media, and other online platforms, An analysis of the click-through rate of organic (SEO) and paid clicks has shown that SEO provides 20 times more traffic opportunity on mobile and desktop.

How CTR Can Affect Search Ranking and SEO

The click-through rate of a website can also affect its ranking in the order of search results as Rand Fishkin CEO of Moz said in a blog post, search result snippets that have high CTR tend to rise to the top of the search results as it is assumed that users find it more interesting than the other results.

There are a couple of techniques that can make your website more presentable on the search results page thereby attracting more attention and credibility.

1. Sitelinks
2. Rich snippets: These are typical Google search results with extra data about the web page. This extra data is gotten from structured data sourced from the page’s HTML.

A study carried out by Search Engine Land found that having structured markup like Schema Microdata, GoodRelations, Google Rich Snippets, and JSON-LD can provide a 30% increase in CTR.

SEO in Nuxt

What is Nuxt?

Nuxt is an intuitive Vue framework for building optimized web applications faster and easier. It comes packed with awesome packages and features like automatically creating routing configurations based on the Vue files in the pages directory, out of the box provision for state management with vuex, and many more

One of the features which we’ll be focusing on in this article is centered on meta tags and SEO.

Meta tags in a site affect CTRs since meta descriptions show in the search results (if the description is compelling enough) which eventually affects the site’s search result ranking.

Nuxt exposes a head method where we can set a title, meta tags, links and more tags that can be found in the vue-meta documentation. The properties of each object in the meta property will be mapped to meta tag attributes.

Nuxt provides 3 ways by which we can add metadata to websites.

1. Global level in the nuxt.config.js file; taking this approach sets a default metadata for all the pages in the application which will if none is set at the page level.
2. Locally using the head as an object: The head object will be added to the page and will set the head for just that page.
3. Locally using head as a function: In case there is a need to have dynamic values in the head of the web page, the head should be used as a function. If you want to use data from a server in the head, the data should be fetched with the asyncData hook and returned as an object.

Structured Data & JSON-LD

The Use of Having Structured Data

Google search tries to understand web pages before returning it as a search result, one way to help with this understanding is to provide contextual metadata about the webpage through the use of structured data. Google then finds it easy to present useful data about the webpage in search results.

Search result of Amazon’s 2020 MacBook Air from Google

A Tool for Implementing Structuring Data

JSON-LD stands for JavaScript Object Notation for Linked Data, it is a W3C standard method for implementing structured data on a webpage leveraging the schema.org vocabulary. Thereby making a web page easier to index by search crawlers. Major search engines like Google and Bing can understand JSON-LD in web pages.

It aims to bridge the gap between what the user is searching for and what is being returned as a search result by providing contextual metadata about the webpage.

Here is how a JSON-LD snippet looks like:

What JSON-LD offers

• Compared to analogous technologies for implementing structured data like Microdata and RDF, it provides simpler syntax and is easier to maintain since it is located in a section of the HTML; as opposed to wrapping the markup around or in the HTML elements as it is done in Microdata.
• Being similar to JSON, it provides a familiar syntax and developers can easily transform their JSON data to JSON-LD. Note that they are not the same; JSON-LD provides more benefits leveraging schema.
• As we’ve seen in this article, It can improve the SEO and CTR of your website.

Understanding the JSON-LD syntax

It’s included in a HTML file using <script> tags;

<script type="application/ld+json">
{...}
</script>

Note the value of the type attribute; that tells the browser what to expect within the script tags.

Within the curly braces in the script tag, the first property should be:

"@context": "https://schema.org/",

The @context property tells the browser the vocabulary on which the rest of the properties is based, giving it a clue on how to interpret them.

The next property should be @type which tells the browser the item being marked up, schema.org provides a list of possible types. Hint: you may want to click on “Open hierarchy”, and use your browser’s search function to find types faster.

"@type": "Recipe",

In the code snippet above, the Recipe type is being used. The @type property also defines the properties that should be in the curly braces. The properties can be found in the type’s schema.org page

Nesting

This is the organization of Information in layers; where one object contains another. When creating a JSON-LD, you may encounter properties that need a nested value. For example, in the Recipe type, there is an aggregateRating property, the value of this property is of type AggregateValue and this type defines a set of properties.

{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "7462",
    "bestRating": "5",
    "worstRating": "1"
  }
}

When nesting, the type of the value should be specified first within the curly braces like the 5th line in the code snippet above.

How can I add JSON-LD to a Nuxt application?

Adding JSON-LD to a Nuxt application is very easy;

• Add a script property to the head object (If head is a method, add the script property to the object being returned)

• Add a type for the script, as well as a JSON object which will have the conventional @context and @type properties

• Based on the schema type, you can now populate the json object with recommended properties. The values of these properties can have dynamic values but be sure the values are returned from the asyncData hook.

Conclusion

In this article, we have been introduced to SEO, CTR, the benefits of SEO, how a Site’s CTR can affect its search ranking and SEO, Using meta tags in Nuxt, What JSON-LD is, and how it can be used in a Nuxt application.