Gridsome – Configure Basic On-Page SEO

Developing any successful website will require developers and Digital Marketing professionals to consider and implement the Search Engine Optimisation (SEO) strategies very early on. This primarily due to the fact a websites only real measure of success is how many users it attracts, engages and converts into loyal repeat customers.

Importance of Organic Search

Organic search is still a very vital mechanism for attracting prospective customers, despite the rise of social media, paid ads and other forms of digital marketing. Personally, I would recommend that most developers should read at least SEO for Dummies and Digital Marketing for Dummies to get a basic grounding and understanding of the subject.

It often amazes me, when I join a project or chat to other developers that very few of them actually have even a basic understanding of SEO or even Digital Marketing as a whole. I admit that I am no expert, but compared to other web developers I am light years ahead. This experience has primarily been gained from running this very blog for the past 5 years !

The concept I have learned from building the traffic to my website, is that the majority of people don’t really care about the aesthetics or design of your website prior to find it. There are no search engines that specialize in presenting Good Looking websites that answer users queries, they only provide search results which closely match the searchers intent. It therefore a primary importance that when developing websites you focus on the establishing the Information Architecture of your website.

Over this period of time, I have learned that it is never early too early to focus on SEO and Digital Marketing, because in reality your website won’t exist without it! So the sooner you pay attention to it the better. When you’re starting a new project, from scratch and you’re the only resource developing your side project its even more important to get a handle on the importance of Organic Search and ensuring you implement whatever you can to get this aspect of your marketing and promotion in place.

To continue our ever evolving series of Getting started Gridsome static website generato tutorials , we are going to take a look at how Gridsome and a few additional plugins can help you address and implement SEO best practices.

All source code and additional information regarding this project is available on Github and the website we’re developing is available https://geekiam.co.uk . We’re developing this website completely out in the open and gradually implementing all features and enhancements as we go while learning and sharing what we learn about Gridsome, Vue and the ecosystem surrounding it.

Implement Analytics in Gridsome

Probably one of the most important aspects when it comes to implementing SEO and Digital Marketing strategies is using some sort of analytics package to review and analysis your website traffic statistics. Monitoring and analysing your your website statistics using some form of Web Analytics software helps to measure the success or failure of your digital strategy.

During the course of your Website development, you are going to have to continually evolve and develop the website, you will also need to measure if the things you attempt to implement have a negative or positive of traffic or user behaviour. I got a real appreciation for this fact while reading Digital Marketing for Dummies

Digital Marketing For Dummies

A guide to a well-rounded, shows you how to use proven digital marketing strategies and tactics to expand the reach of your brand, increase audience engagement, and acquire and monetize customers

Ryan Deiss, Russ Henneberry

Buy Now Read Review

There are a number of great Website Analytics tools available and there are a number of Plugins available for Gridsome to help you easily integrate them into your website. Netlify also provide a paid Website Analytics service for your website, if you are as we are hosting your Gridsome Static Generated Website on Netlify . The netlify analytics package is available as per month subscription basis.

Another great paid for analytics package which has a plugin available in the Gridsome Plugin directory is Fathom Analytics , a powerful yet simple analytics platform. The simplicity is what got me excited about the platform. I actually get to see all my data when visiting my Dashboard. I can even see my goals at a glance. The gridsome-plugin-fathom helps to simplify implementing Fathom Analytics

A key benefit of using a Paid for Analytics package on your website, is that you help to reduce the level of online tracking for your users on your site. All Free Web Analytics tools obviously need some way to generate revenue, and one of those ways free analytics tools make money is by selling browsing data to the highest bidder.

For the purpose for our simple project though, is that we thought we would go ahead and make use of Google Analytics. We’re not expecting a whole load of traffic for our website, my daughter just really wanted to see if anybody really visited the website at all! We simply created a Google Analytics account and created a Tracking ID, which is s a string like UA-000000-2. It must be included in your tracking code to tell Analytics which account and property to send data to.

We installed the Google Analytics plugin for Gridsome using the NPM package manager

Shell

After you have installed the Plugin, then as discussed in Gridsome – Explore plugins to make life easy you will need to configure your plugins to use them. In this case, all we need to do now, is Configure our plugin to make use of our Google Tracking ID. So editing the gridsome.config.js . We just add a new item to the Plugin array

JSON

We have now implemented Google Analytics on our blog post, which simply enables tracking of visitors to our website. This does not actually help with SEO at all, but it does provide guidance and assistance on what we need to improve, enhance or implement for SEO purposes. Google being the most popular search engines, although I personally prefer and made the switch years ago to Duck Duck Go and I also personally use Brave Browser to help protect and preserve my privacy online and curtail the level of tracking online.

When developing websites and implementing SEO strategies and practices it is vitally important that developers are cognisant of the risks and infringement of their users privacy some implementations incur.

SEO Meta Information with Gridsome and Vue Meta

One of the key aspects of On-Page SEO that developers should focus on is ensuring all Pages have the correct Meta Information or more commonly referred to as Meta Tags. SEO for Dummies ( Chapter 7 ) is a great chapter to read to understand the importance of these tags and why they are important for developers and marketers to understand.

Gridsome includes  the Vue Meta library which has become the de-facto standard for updating the <head> tag in Vue based projects. Combining the power of Vue Meta with various aspects of the Gridsome, GraphQL API and Netlify CMS we can easily create relevant page titles, descriptions and rich social media cards for websites and pages.

SEO for Dummies

Up relevance scores, improve page speed, optimize voice search questions, and more! 

shows website owners, developers, and search engine optimizers (SEOs) how to create a website that ranks at the top of search engines and has high-volume traffic, while answering the essential question of “how do I get people to visit my site?”

Adding meta tags to Gridsome pages

All this functionality is available by default in a Gridsome project, it also requires very little code to implement. Gridsome pages are generally static we can use the basic Vue Meta syntax to add a title.

In a previous post, Gridsome – Explore plugins to make life easy we explored add some data and information to our gridsome.config.js.

JS

This information describes our Website by providing a siteName, siteDescription, siteUrl and even provides a titleTemplate that we can use to ensure that the name of our website is included in the Title Tag of each page. So we can get the desired Title Description in search engines similar to those as below.

Duck Duck Go Search Results page

Gridsome comes packaged with some really powerful tools, one of these tools GraphQL we have touched on lightly in Gridsome – Using file system markdown files , which relates to to Querying Data with Gridsome, we are again going to explore this great functionality available to us.

In our first example, we are going to extend our Index.vue which we created in Gridsome – Using file system markdown files to display the contents of our Post Item component. This page currently serves as the main entry page to our website and our Home page.

In our first iteration, we are simply going to provide Home as the title for the home page, which we’ll simply edit the JavaScript of page component like the following.

JS

All we have done is add a new metaInfo method, supply and define a title property and supply a name we want to use. Due to the fact that we have defined a titleTemplate in our gridsome.config.js , Gridsome will automatically use this to define a Page title. Running the application and inspecting the page in a browser we’ll see the result in the browser tab.

This works alright, but really to improve our SEO we really need to add a little more description of our website. So we going to change this for our site now.

JS

It also worth noting, that because we took the time to populate metadata gridsome.config.js Gridsome will automatically populate this data in our head tag. So if we inspect the markup in our Developer Tools we’ll see our details.

Adding Common SEO data

Usually on websites you will want to include a common metadata across all your pages. This data may include your Open Graph Details , which rich object in a social graph. For instance, this is used on Twitter to allow any web page to have the same functionality as any other object on Twitter.

Plain Text

It would get tiresome really quickly inputting this data on each individual page component and as any developer knows anything that needs to be repetitively added is often the root cause of bugs. Fortunately Gridsome makes this easy and provides a mechanism for you to access the Head within main.js , check out Populating head

We’ll access the head object, which enables us to add items to a an array, and we can populate the items we want to add. If you intend to overwrite the values in Metadata in your child pages, you must remember to add key property.

JS

We have added some of the basic tags, which we want to be fairly consistent across our site. We are still able to overwrite these values where we choose too within our site. For Instance, depending on the type of data we’re presenting in our site, we may want to change the og:type value of the media, We also may want to also set additional values on a per page basis. Fortunately, Gridsome makes this easy for us too.

Enhancing On-Page SEO with Gridsome

In our example, we may want to supply some additional information on our blog pages to provide an overview of the contents of the page to search engines and when people share our pages on social media etc.

The script portion of our Post.vue page can now be updated as follows.

JS

In order to get our data we need for the Page will add page-query and static-query

JSX
JSX

Summary

We have successfully used some great features provided by Gridsome to implement some basic on-Page SEO for pages on our website.

Latest posts by Gary Woodfine (see all)