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.io . 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.

https://github.com/garywoodfine/geekiam

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

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

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

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.

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.

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.

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.

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.

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.

Obviously some pages in our app, will require a common set of Meta Information data and others will require additional individual properties that will change on page to page. Fortunately Gridsome makes this easy and provides a mechanism for you to access the Head within main.js , check out Populating head, which will apply this data on each page, then we can override data on each individual page should we need to.

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.

We have previously entered some data in our gridsome.config file, which contains data relating to our site. To save ourselves re-entering this data, which could potentially change as the project evolves and then we have to search for occurrences of that data to change it. We can simply import the Configuration file into our main.js and use the data.

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.

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

Adding Keywords

You may notice that within the code I am implementing functionality to implement a Meta Keywords functionality. I thought this may need some explaining, because the for those with an SEO background may question why?

Meta keywords were devalued by Google because they were being abused by site owners and marketers. Developers would “stuff” the code full of high-volume keywords and phrases, so that low-quality pages would rank for those search terms, considerably diluting the accuracy and value of the search results.

However, it is still very unclear if Keywords have been removed entirely from not only Googles algorithm entirely or other search engines. While it certainly is true that to a certain extent Google may rule the world of search, it is still not the only search engine.

Personally, I only ever use DuckDuckGo as my default search engine, and have do so for several years , this primarily based on privacy concerns and the fact that I honestly feel I get a far better search results.

Judging by the data I receive on this blog, the use of alternate search engines is also increasing within the software development community and my blog is frequently indexed by a vast array of different search engines. Which may or may not make use of the Meta Keywords. So in order to try an maximise the chances of improving the index possibilities for Geek.I.Am in the future, I thought I would include the keywords meta tags.

Incorporating Meta Keywords in your content

The most important aspect to including keywords meta is to ensure you only select the relevant keywords for your page in question. As a general rule of thumb, try not to use more than 10 meta keywords for a single page and make sure that the keywords you include in your meta keywords are actually used within your page more 3 or 4 times.

There may be a couple other ideas to think about:

• Common Misspellings: An often cited best practice, may be to include misspellings in your meta tags to indicate to search engines that your page is relevant for an often misspelled search query, without your having to include the misspellings in your webpage copy.
• Long-Tail Keywords:  Keyword variations and plurals are both useful to keep in mind, as well as the more extensive and more specific phrases known as long-tailed keywords.
• Real Searches: The real search terms that brought users to your page in the past can be your best friend when creating lists of meta keywords. Check your analytics or log files to find those keywords, and use keyword tools to back up your data. What words do people tend naturally to use when describing your business? And what words are your competitors using?

Obviously I want you to bear in mind, that I am not an actual SEO expert, I am just a software developer learning the ropes of SEO and have actually achieved what I believe to be a modicum of success with it, in that I am able to get a steady flow of traffic to my blog by implementing these tactics. However, I am fully aware that those who specialise in SEO may think my tactics to be somewhat naieve.

All my knowledge about SEO and implementing it have either been derived from reading SEO for Dummies and trial and error.

Summary

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