How I optimised my JAMstack site for search engines
SEO isnāt my strongest suit, so I decided to learn more about it by optimising my JAMstack site Sweet Jam Sites. Iām usually more familiar with content marketing. I write daily on Lifelog, and coming up with content isnāt difficult. But my worry is that writing out content might be an abortive exercise, as Iām still experimenting with my target audience for Sweet Jam Sites. I know JAMstack is great, but itās a key to unlock a door that Iām still searching for. So when Martins Sulcs from Uprankd.com offered a free SEO audit consultation on Indie Hackers, I took it. I seriously didnāt know what to expect. I didnāt even know if I have the development skill to fix any of the suggested recommendations. But Iām pleasantly surprised at the depth and breadth of the report, and Martins was really helpful, even checking back to see if I had any problems fixing my site.
So after an SEO day, my Lighthouse score went from the 60-70 range to the 90s range! So awesome! Hereās what I did:
Meta tags
I added meta tags some time ago, but canonical tag was something recommended in the report. Which is true because I had many different landing pages for different audiences, and much of the content overlapped. So telling search engines which is the main home page is important. And a word about JAMstack ā itās not immediately clear where to inject the meta tags in Gatsby because of the file structure. Initially I did it via via gatsby-ssr file, but later on discovered a simpler solution - via the snippet feature in Netlify itself.
Nofollow outgoing links
I changed relevant outgoing links to ānofollowā, so that Google wouldnāt penalise me too much. In fact, before starting this, I didnāt think I had many outgoing links to start with, but I ended up spending the most time on this as there were a lot more outgoing links than I realised.
Added SEO.js component for SEO on all blog posts
The thing about adding meta tags in point #1 is that it adds it globally to the site. But I want specific meta tags for my blog posts. So adding this piece of Javascript code is important. I followed this tutorial since I used a Stackbit site.
Added a sitemap
I wasnāt sure how to create a sitemap. The Stackbit tutorial recommended using a Gatsby plugin, but it involves using the command line (which is a hassle, and for non-technical folks, just plain scary). Initially I went with the old school way ā just creating a xml file and uploading it directly to my root folder (which is the /static folder in Stackbit sites). I googled for a sitemap generator site, keyed in my siteās URL, and then download the auto-generated sitemap file. I proceeded to upload the sitemap into my Github repository, and was happy with it as a short term hack (the problem is that you need to manually update the xml file whenever you updated your file, which is a pain). But later on when I was experimenting with Netlify Build plugins, I found plugins for sitemaps! The plugins would auto-generate a new sitemap on each build on Netlify, and another plugin auto-submitted to search engines. Just. Freaking. Amazing. So impressed with Netlify.
Google Search Console
I submitted my domain and sitemap to Google Search Console so that Google would start indexing my site properly. But subsequently, because of the sitemap plugins on Netlify, I probably no longer need to manually update anything on Google Search Console.
Netlify Build plugins
Lastly, I went into Netlify UI and installed Netlify Build plugins for optimisation of images, inline source, font loading, sitemap generation and submission. Netlify also has native features for CSS, JS bundling and more image optimisation, which I switched on. Thereās also a Gatsby Cache plugin to persist the cache in between builds, so that build times are shorter. And do you know they are all free?! Amazing!
Thereās still loads of recommendation in the SEO audit report that I had yet to touch. Using new image formats is another thing Iām keen to work on. But after a hard dayās work on it, a Lighthouse score in the 90s is pretty motivating!
What other SEO hacks and tips would you recommend?
Follow my daily writings on Lifelog, where I write about learning to code, goals, productivity, indie hacking and tech for good.
Top comments (1)
Hey there! š If you're not too familiar with SEO, I recently had a fantastic experience working with SF SEO Company sfseocompany.com . They are truly the best in the business when it comes to optimizing your online presence. Their expertise and dedication helped my website rank higher in search results, driving more traffic and boosting my online visibility. I highly recommend collaborating with them for all your SEO needs. Give them a try and watch your online presence soar!