Best practices for Vue.js e-commerce websites

Many companies and individuals use content management systems (CMS) like WordPress, Joomla, and Drupal when creating websites. These platforms provide a straightforward approach to building and administering a website without requiring a comprehensive knowledge of web development and SEO. Instead of utilizing a CMS, there are advantages to building a website from the ground up.

Greater control over a website’s appearance and functionality are one of the key advantages of building one from scratch. With a CMS, your options are restricted to the plugins and templates designed for that platform. The code and server settings can be optimized for maximum efficiency when building a website from the ground up, leading to quicker load times and a better user experience in appearance and performance.

Furthermore, building a website from scratch can lead to better performance. CMSs can often be resource-intensive and slow to load, especially with a lot of content or plugins. When you develop a website from scratch, you can optimize the code and server settings for optimal performance, resulting in faster load times and a better user experience.

Better security is an additional advantage of building a website from scratch. CMSs are a top target for hackers even though they are frequently updated to fix security flaws. It is less likely for your website to be hacked when you build it from the ground up since you have control over the security measures implemented.

For better performance, maintainability, and flexibility, most major companies prefer to develop their own platform (which can be several web services and websites). As you probably know, developing a website can cost you more than utilizing a free CMS like WordPress.

As mentioned above, as a technical SEO expert, we should increase our knowledge about technical aspects of the crawling and indexing process instead of installing a bunch of plugins on WordPress to do technical SEO.

Using JavaScript to develop an e-commerce website from scratch

JavaScript has been a popular programming language for years and its popularity continues to grow thanks to its ability to create dynamic and interactive user interfaces. JavaScript can be used for both front-end and back-end development, making it a versatile choice for building websites from scratch.

On the front-end, JavaScript can be used to manipulate the Document Object Model (DOM) in real-time, allowing for seamless user interactions and dynamic updates to the website. JavaScript frameworks such as React, Angular and Vue.js, make it easier to create complex UI structures and handle the state management.

Choosing the best JavaScript framework for development

Choosing the best JavaScript framework for development is not a task that a technical SEO specialist should be concerned about, at least not until the tech team wants some advice. As a technical SEO specialist we should be able to differ from JavaScript frameworks for SEO purposes and project scale.

Thanks to the community and developers, there are a lot of JavaScript frameworks out there, but few of them are suitable to drive a scaled e-commerce website. Below, we will examine the three that can be used and the factors to determine when and where to use them.

ReactJs

One of the biggest advantages of React is the usage of the virtual DOM which in turn re-loads only the parts of HTML that previously changed. Contrary to Angular, this significantly reduces the loading times. Also, with React you handle the logic and markup in the same file. It is also simple to start and relatively easy to learn, and it works smoothly – even with a lot of database queries and complex operations. While developing large scale websites, React requires the use of other libraries and complex logic.

Angular

AngularJS was developed by Google in 2009 and its first version was AngularJS. As it was developed by Google, all Google projects have been developed with it. Angular web applications have good overall performance but it has complexity in development and critical SEO compatibility issues. So, for SEO based projects, I do not recommend using this framework because it needs lots of customization on implementing SSR.

Vue.js

Vue.js’s fast learning structure is what makes this framework special. It is also more flexible than React and Angular and it can also be used for large web applications. Vue.js is a combination of Angular and React’s useful principles and presents them in a modern style. Also it is more compatible with SEO tasks.

Developing e-commerce websites with Vue.js

For e-commerce websites, scalability is essential because it helps them to manage the increasing volume of users, items, transactions, and metadata, like comments, without experiencing performance issues.

Here are some ideas you may utilize when creating and deploying JavaScript to enhance performance and SEO.

Think first, code last

Plan and design your e-commerce website first. Before starting to code, it’s important to have a clear understanding of your users requirements and user flows. This will help you determine the necessary components, features, and overall architecture of your e-commerce website.

Implement and design mobile first

Creating a mobile-first e-commerce website is crucial in today’s digital world as more and more users are accessing the internet through their mobile devices. So, it’s important to design and consider responsive implementations such as above the fold architecture and content delivery best practices.

Mobile first implementations are crucial due to the high percentage of mobile users. By this fact, product pages, listings and checkout processes should be pleasant for mobile users.

Try to implement your project based on component architecture

Vue.js uses a component-based architecture, which means that your application will consist of multiple components. It’s important to create a clear and organized project structure to make it easy to manage and maintain your code.

Use state management systems

Vuex is a state management library that is specifically designed for Vue.js. It allows you to manage and share the state of your application between different components. Vuex is especially useful for large-scale applications where you need to share data and actions between different parts of the application.

Consider performance first

Large-scale e-commerce websites can be resource-intensive and may require optimization to ensure good performance. One way to optimize performance is to use the Vue.js devtools to profile and debug your application. Additionally, you can also use techniques such as:

• Lazy load
• Code splitting
• Tree-shaking
• Caching
• CDN
• Manage component importing (delete unnecessary component imports)
• Virtual scrolling (for long lists)
• Detect and optimize slow components
• Reduce dependencies and consider managing values with Vuex
• Remove comments and compress files for production using webpack
• Use the Vue.js async component
• Optimize hard-coded assets delivery like images and fonts
• Reduce unnecessary DOM manipulation

Vue.js and SEO

One of the most profitable marketing channels for e-commerce businesses is SEO. An essential component of an e-commerce funnel is SEO, which can draw in new customers, raise the possibility that they will find the specific products they are looking for, and enhance user experience in general.

E-commerce websites may struggle to attract visitors and convert them into paid customers without effective SEO.

As we have mentioned, Vue.js is one of the most widely used JavaScript libraries, however because it utilizes client-side rendering, SEO improvement can be challenging.

There are some libraries and techniques used for Vue.js e-commerce websites that can be SEO friendly and in turn rank high in the search results. We’ll go through them one by one and try to introduce some best practices that you can leverage for ranking better.

Client-side rendering(CSR) vs server-side rendering(SSR)

Client-side rendering (CSR) is a technique used in web development where the rendering of a web page is done by the client’s web browser, rather than by the server.

In a client-side rendered website or web-application, the browser requests an initial HTML document from the server, and then JavaScript is used to dynamically update the page as the user interacts with it.

The JavaScript code runs in the browser, making API calls to the server for the required data and then updates the page with the new data. This technique allows for a more dynamic user experience as changes to the page can happen quickly without requiring a full page reload.

However, it can present challenges for SEO as search engines may have difficulty crawling and indexing the dynamically generated content. Additionally, it can also have an impact on the load time of the website as the browser needs to download all of the JavaScript packages and execute the code before the page can be fully rendered.

Using server-side rendering (SSR), the browser receives HTML generated by the server for a web page. Finally, the page is rendered by the browser.

Since the browser doesn’t have to run JavaScript to render the page, this makes it simple for search engines to crawl and index the website. It can also speed up page loading.

As a result of the HTML being fully displayed on the server, this strategy improves SEO as search engines can quickly crawl and index the website. The fact that the browser doesn’t need to run JavaScript in order to render the page might also speed up loading time.

However, server-side rendering can also have drawbacks. For example, it can be more complex to set up and maintain as the server needs to handle generating the HTML and handling dynamic updates. Additionally, it can also lead to a less dynamic user experience as changes to the page require a full page reload.

As we discussed above, for better SEO, Vue.js projects should be rendered server-side. But, there is one another solution that might come in handy on large scale e-commerce projects: dynamic rendering.

Dynamic rendering in a glance

Think about if you want to have both CSR and SSR benefits while also avoiding the less attractive aspects. Well, then dynamic rendering can be a life saver.

With dynamic rendering, when the crawler requests for a page to be rendered, the SSR version is loaded. When a user sends a request to render a page, the CSR version is loaded. The Googlebot (or other search engine bots) can be detected by their user agent and IPs.

This solution allows you to conserve your resources because it saves on server side rendering which costs you more resources. With this option, if thousands of users/day visits your website, there are less crawl requests sent for the server. To implement this solution, we have to set up SSR in the Vue project first.

Introducing Nuxt.js

There are several ways to implement server-side rendering for a Vue.js website. One popular method is to use the Vue.js-specific Nuxt.js framework. Nuxt.js is built on top of Vue.js and makes it easy to create server-rendered Vue.js websites.

For the purposes of this article, we’re going to assume that SEO is our main funnel by default. So, starting the project with Nuxt.js is highly advised rather than developing using the Vue.js architecture and adding Nuxt.js as a library.

Here is a general overview of how you can implement SSR in a Vue.js application using Nuxt.js:

First you need to make sure that node is installed on your device, then open the directory in which you want to start your Nuxt.js project by using cmd or terminal.

1. Install Nuxt.js by running the command: “npx create-nuxt-app”.
2. In your Vue components, make sure you are using the proper Nuxt-specific component options such as asyncData and fetch.
3. In your nuxt.config.js file, configure the server and the build settings.
4. In your server file (e.g. server.js), create an instance of Nuxt and have it listen to a specific port.
5. Start your server by running “npm run dev” or “npm start”.

Test your application to make sure that the server is correctly rendering your Vue components. Instead of Nuxt.js, you can also use other libraries such as vue-server-renderer to implement SSR in your Vue.js application.

Nuxt.js project’s architecture is created to be modular and flexible, much like Vue.js itself, making it simple to create and manage a complex Vue.js application.

At a high level, a Nuxt.js project has the following structure:

1. Pages: the pages directory contains the main view components of your application. Each directory in the pages directory corresponds to a route in your application.
2. Components: the components directory contains your reusable Vue components.
3. Layout: the layout directory contains the main layout components of your application, which determine how your pages are structured.
4. Plugins: the plugins directory contains any Vue.js plugins that you want to use in your application.
5. Middleware: the middleware directory contains the middleware functions for your application. Middleware functions are used to execute code before or after a route is executed.
6. Store: the store directory contains the Vuex store for your application.
7. Static: the static directory is used to store static files, such as images and stylesheets.
8. Nuxt.js config file: the nuxt.config.js file is used to configure your Nuxt.js application.

In addition to the directories and files listed above, a Nuxt.js project may also have additional directories, such as a services directory, that contain helper functions or other application-specific logic.

Overall, the Nuxt.js project architecture is designed to be intuitive and flexible, making it easy to build and maintain a large-scale Vue.js application. It is important to know that Nuxt.js is able to create universal apps, PWAs and SPAs.

The header section in Nuxt.js

You can use Nuxt.js as a solution for improving crawlability and rendering for search engine bots by using SSR. The Nuxt structure has its own router and pages structure, so managing each page’s metadata, canonical, title and header property will be much easier to do in the header section of your html document.

In Nuxt.js, there are two ways to implement the header section of HTML:

1. Implement it by using nuxt.config.js as the global header section.
2. Implement the header section for each page and overwrite the global header section.

The same as simple an HTML file, we can add any type of file in the header section such as:

• Scripts
• Css files
• Fonts
• Title
• Meta description
• Og:graph
• Schema markups
• Canonical
• And anything necessary for SEO

Let’s take a look at adding a title, different types of meta and some rel attributes for a Nuxt.js project as a global header section in the nuxt.config.js.

export default {
  head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

Reminder: everything that is implemented above, will be shown in every page that doesn’t rewrite these rules. In addition, it’s possible to use place holders with “%s” for overwriting values in the header section in components.

Nuxt.js, update header section in pages

Below, let’s suppose that all of the variables that will be used in the header section will come from an API response and we want to update the title and header section with fresh data.

<template>
<h1>{{ title }}</h1>
</template>

<script>
export default {
data () {
return {
title: 'Hello World!that will update with API response'

description:'Hello World! Description that will update with API response'

}
},
head () {
return {
title: this.title,
meta: [
// hid is used as a unique identifier. Do not use `vmid` for it as it will not work
{ hid: 'description', name: 'description', content: this.description }
]
}
}
}
</script>

There is no need to worry about data manipulation as a SEO, what you should consider is that bots will render and index titles and header sections properly. As a developer who considers technical SEO, you should make your API calls before the page is fully loaded with Async or Fetch methods.

Async method:

export default{
 name: 'App',
  components: {
    HelloWorld
  },
 async asyncData() {
    const {data} = await  axios.get('https://apiurl.com/testing.json')
    return { setTitle:data} // without defining data option
  },
  head() {
    return {
      title: `${this.setTitle.product_name} product name`,
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta"
        }
      ]
    }
  }
}

Fetch method using typescript:

<script setup lang="ts">
const data = useFetch(() => $fetch('/api/example'))
useServerSeoMeta({
  ogTitle: () => `${data.value?.title} - My Site`,
  description: () => data.value?.description,
  ogDescription: () => data.value?.description,
})
</script>

Schema markups in Nuxt.js e-commerce websites

In order to assist search engines in understanding the content on a page, schema markups are types of structured data that is added to the HTML code of a webpage. It gives websites a uniform means of describing the data on a page, making it simpler for search engines to precisely index and classify the content.

Schema markup, for example, can be used to present details about a product, such as its name, cost, availability, and customer reviews. Search engines can use this data to show rich snippets in the search results, which make it simpler for consumers to find the information they’re looking for.

There are three types of schema markup, including schema.org, microdata, and RDFa, which can be used to describe different types of information, such as articles, events, products, and more.

If we want to add “website” schema jsonLd in Nuxt.js v2.1+ , we can use metaInfo property in the page or nuxt.config.js file to implement.

{
  metaInfo: {
    script: [{
      type: 'application/ld+json',
      json: {
        "@context": "http://schema.org",
        "@type": "WebSite",
        "name": "My Website Name",
        "url": "https://example.com"}
    }]
  }
}

Much like with the title and meta description, Nuxt.js is able to use variables such as jsonLd key:value.

For e-commerce websites, it is important to implement the following schema markups:

• Local Business
• Product (for product pages)
• Review (for product pages)
• How To (for blog posts or product pages)
• FAQ Page (for products and blog posts)
• Breadcrumb List (for products and listing pages)
• VideoObject (for products that have video review)
• WebSit

Here is a sample code of how to implement a product schema in the product page. Consider all of the parameters that have (this.+{value}) should be filled in like we discussed above.

{
  metaInfo: {
    script: [{
      type: 'application/ld+json',
      json: {
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": this.productName,
  "image": this.productImage, 
  "description": this.productDescription,
  "mpn": this.productMpn,
  "brand": {
	"@type": "Thing",
	"name": this.brandName
  },
  "aggregateRating": {
	"@type": "AggregateRating",
	"ratingValue": this.productRatingValue,
	"reviewCount": this.productReviewCount
  },
  "offers": {
	"@type": "Offer",
	"priceCurrency": "USD",
	"price": this.productPrice,
	"priceValidUntil": this.productOfferValidationTime,
	"itemCondition": "http://schema.org/NewCondition",
	"availability": "http://schema.org/InStock",
	"seller": {
  	"@type": "Organization",
  	"name": this.productSeller	}
  }
}
]
  }
}

Improving semantic HTML in a Nuxt.js project

Semantic HTML refers to using HTML elements in a meaningful and descriptive way to structure the content of a web page. Improving the use of semantic HTML in a Nuxt.js project can have several benefits.

Improved accessibility: Semantic HTML makes it easier for assistive technologies, such as screen readers, to understand the structure and content of a web page, which can improve accessibility for users with disabilities.

Technical SEO: Search engines use the structure and content of a web page to determine its relevance and ranking, so using semantic HTML can help improve your website’s SEO.

Better maintainability: Using semantic HTML makes it easier to maintain and update your website, as it provides a clear structure for the content that can be easily understood by both humans and machines.

To improve the semantic HTML structure in Nuxt.js e-commerce on non e-commerce websites, you need to make changes in the <template></template> part of your components such as the:

• Header
• Footer
• Sidebar
• Content section
• Article content body section
• Tables
• Navigation

To improve the use of semantic HTML in a Nuxt.js project, you can:

1. Use appropriate HTML elements for the content. For example, use <header> for the header, <nav> for the navigation, <main> for the main content, and so on.
2. Use semantic HTML5 elements: HTML5 introduces several new semantic elements, that can be used to improve the structure and meaning of your content such as:
   • <article>
   • <aside>
   • <details>
   • <figcaption>
   • <figure>
   • <footer>
   • <header>
   • <main>
   • <mark>
   • <nav>
   • <section>
   • <summary>
   • <time>

Use ARIA attributes: ARIA (Accessible Rich Internet Applications) attributes can be added to HTML elements to provide additional information to assistive technologies.

There is a pseudo code in the Nuxt.js structure that you can leverage to understand better:

<template>
  <header>
	<h1>My Website</h1>
	<nav>
  	<ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Contact</a></li>
  	</ul>
	</nav>
  </header>
  <main>
	<article>
  	<h2>My Article</h2>
  	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor libero non libero bibendum, in congue nibh ullamcorper.</p>
	</article>
  </main>
  <aside>
	<h3>Related Articles</h3>
	<ul>
  	<li><a href="#">Article 1</a></li>
  	<li><a href="#">Article 2</a></li>
  	<li><a href="#">Article 3</a></li>
	</ul>
  </aside>
  <footer>
	<p>© My Website</p>
  </footer>
</template>

Improving the overall speed of a Nuxt.js Project

Improving the speed of a Nuxt.js project can have a significant impact on user experience and can help improve your website’s ranking on search engines. Here are some best practices for improving the speed of a Nuxt.js project:

Preload requests and preconnect to origins

In this method, we declare preload links so the browser understands that these are key requests and it catches them as soon as possible.

<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="critical.js" as="script">

<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">.

Third party usage improvement

Third-party codes can have a big impact on overall performance, so it is important to modify requests for them in the right way.

• Loading scripts by using async – defer attribute.
• Self hosting for resources as much as we can and deliver them by CDN.
• Using preload and prefetch that we discussed above.
• Putting less valuable third-party scripts in the footer.

[Ebook] 5 KPIs that reveal top strategies for successful ecommerce SEO

Discover the five essential e-commerce metrics to track and measure.

Read the ebook

Minimize and remove unnecessary CSS and JS

Thanks to the Nuxt.js default packages, Terser is included by default when you utilize a Nuxt.js project.Terser uses tree-shaking to remove unused codes before building the project.

Scan components for duplication

Before building the project, scan for extra components and module imports, try to remove duplicate imports from child components to parent hierarchy. Also you can use a webpack-bundle-analyzer to detect large sized bundles in your project with which you can interact with visually.

Use code splitting

Nuxt.js provides a way to split your code into smaller chunks that can be loaded on demand, which can significantly improve the loading speed of your website. Code splitting means that you can break your codes into smaller sizes of code and request for these smaller parts when required.

export default {
  components: {
	MyComponent: () => import('./MyComponent.vue')
  }
}

Also you can use the asyncData({params}) method for making DOM changes asynchronously by value of a parameter. This method is a little bit complicated and needs further development.

Try to avoid layout shifting

Layout shifts can be frustrating for users, as they can cause elements to jump around on the page, making it difficult to read or interact with the content.

Imagine that you want to click on an element and suddenly it changes the position vertically or horizontally. This can be caused by resource (image, font, css, and JavaScript) delivery issues.

These are things you can do to prevent layout shifting from happening:

• Specify the size of images and other resources: specifying the width and height of images and other resources like content boxes in your HTML can help prevent layout shifts as the browser will know how much space to allocate for the resource before it loads.
• Reserve space for advertisement and assets before they are loaded. You can use a static image placeholder or animation with the specified width and height.
• Use the ‘transform’ property in css.

Image performance in a Nuxt.js project

There are techniques for improving asset delivery like images in development process that you can leverage to increase the overall performance of Nuxt.js project:

• Image elements that have explicit width and height: set explicit image width and height to reduce CLS, notice that the original image should have the same width and height that you declare in your HTML as an explicit value.
• Serve images in webp or Avif format that have better compression compared to webp/jpeg formats.
• Use a CDN for image delivery.
• Implement lazy loading by using the v-lazy attribute in Nuxt.js.
• If an image increases your LCP (Largest Contentful Paint) you can easily preload it with the header section method that we discussed above.
• Serve images that are appropriately-sized to save cellular data.

<img src="cat-large.jpg" srcset="cat-small.jpg 480w, cat-large.jpg 1080w" sizes="50vw">

Internal link building for e-commerce websites built on Nuxt.js

One of the key factors for ranking higher in search results is internal linking and how to implement the structure and strategy based on your sales and SEO requirements.

There are many structures that you can leverage to create robust internal linking structures. We are going to discuss it in technical and UX aspects.

• Use <nuxt-link> for internal linking instead of using JavaScript functions for changing the directory or URL.
• Use descriptive anchor text for internal linking; i.e. products with valuable attributes should be considered as productName+attribute structure.
• Try to implement aggregator modules like “People also interested” or “You might like” components to increase crawling priority and probability.
• If you have a blog for your e-commerce website, you should consider internal link building for new posts on the home page.

Conclusion

In examining the new JavaScript technologies, we chose Vue.js as the best solution for our e-commerce SEO needs. For better performance, we decided to implement the Nuxt.js project for SSR requirements. After detailed explanations, we introduced all of the technical aspects that should be done in a Nuxt.js project for an e-commerce or non e-commerce website for better crawlability, readability and indexability for search engines and users.