Localhost SEO - test & fix pages locally with Landing Friend

direct link to repo for the impatient: https://github.com/aexol-studio/landing-friend

If you're involved with SEO I can bet your usual workflow is probably similar to mine - there's a new project and it needs some SEO done. You then probably also do the usual error-checking on Google Search Console for indexing issues and via Ahrefs crawl to check for on-page errors. While I do like gradually fixing all that, I can't help but wonder how much better it would be to solve at least some of those issues while the website is still in development, instead of dealing with it after it goes live and the errors pile up causing any number of issues.

The generic approach

Doing the customary Ahrefs crawl for a new project usually shows numerous errors and issues ranging from relatively minor stuff like: missing alt text, incomplete og tags, schema.org validation errors, to some more complicated stuff like: 404s, duplicate content or issues with canonicals or redirects.

Regardless most of that will require fixing in code (or maybe some CMS for the most basic stuff if that is more your thing) after which it needs rechecking in Ahrefs leading to the usual cycle:

• use Ahrefs crawl
• detect issues
• fix issues & push fixes to prod
• use Ahrefs crawl to check if issues were fixed
• rinse and repeat until all issues are fixed

While it gets the job done fixing stuff locally before the website gets deployed would be miles better. It would be way faster as Ahrefs takes a good 15 minutes or so to crawl even a simple website, throw in a few minutes for merging changes to main and build time and you're usually looking for a half hour of twiddling your thumbs while waiting to see if your metadescription fix works like it should. Time is one thing, the more important aspect is SEO itself - errors on the live version on the website can cause lingering indexing issues or in worst cases even a penalization by Google. What if instead you could fix a bunch of stuff before the website goes live and ensure it has a great start fighting for those search engine rankings?

Landing Friend

So without further ado that's exactly what we've been working on - Landing Friend (fyi: its a working title we might change it to something more SEO friendly down the line). The basic idea is to create a simple CLI tool that will enable localhost SEO issue detection and fixing. Here's what it currently does:

• creates an easily customizable json config file that fits the specifics of your project
• generates sitemap.xml and robots.txt according to the rules set in the config and the html content of the project
• analyzes the html content for potential SEO issues like:
  • missing or duplicate h1s, titles and metadescriptions
  • too long or too short titles and metadescriptions
  • keyword presence in title, metadesc, h1 and last sentence
  • URL status (ie. potential 404s)

Initialize

First we need to install it using the following commands:

• npm i -g @landing-friend/cli@latest to install it globally
• npm i -D @landing-friend/core@latest to then install it locally as a dependency

After that we just need to run landing-friend init or the alias lf init - this will start the config creation process via a number of questions about your domain, locale structure and location of your html files. If you want to use the analyzer you'll then get asked about what SEO stuff you want checked (just say yes to all if you want a thorough analysis). Altogether the setup is really simple and takes a minute or maybe two if you need to look up some info on your project. Don't worry about getting something wrong, you can easily change it anytime by editing the json config file.

Generate

After finishing the setup process we can now use the lf generate command to have our tool create sitemap.xml and robots.txt for our website. The created sitemap will be based on html file content from the directory set in the config. It will also include hreflang alternate versions of localized pages if the project has those (and that option was selected in the config). Pages set as excluded in the config will not appear in the sitemap and are also added to robots.txt as disallowed to block crawlers. The priority is set to decrease with each nested subfolder:

• example.com will have a priority of 1.0
• example.com/blog will have a priority of 0.9
• example.com/blog/post will have a priority of 0.8

Analyze

Though I haven't seen any other generator that makes localized SEO sitemaps with hreflang alternates, that's still pretty basic stuff. The main feature is the analyzer which we can run using lf analyze (provided that the appropriate option was enabled in the config). This can run for a little while depending on the size of the project, though it will take a few minutes at most even for a website with tons of pages. When it's done it will create a report in two formats: json and html, opening the latter one in your browser. You'll get an outline of each page in the project and the issues it has. Here's what it will check for on each page:

• presence and length of title, metadescription and h1 tags
• presence of a keyword in title, metadescription, h1 and last sentence
• presence of a canonical url and if it's matching the address of the page
• presence and correct structure of the og tags
• presence and correct structure of the twitter card
• status of the included urls (checking for possible 404s)

Work in progress

While we have a lot of plans for the tool and it's still in the initial phases of development it has been tested on a number of our projects and I can say that it has simplified my work tremendously. I no longer have to wait an hour for a page crawl on Ahrefs to see if my fixes solved the problem. I can check that locally before I even merge them to the develop branch, which enables gradual work without worrying about causing more issues. So far it only works for projects with a structure that outputs html files to some folder like /out/ (ie. Nextjs) so if you're working on something else - tough luck (maybe we'll come up with something for that down the line) But you're free to check it out as the project is on the MIT license and readily available on github. Oh and if you're happy with the sitemap it has generated just add it to the postbuild in your package.json file like this: "postbuild": "landing-friend generate" and it will automatically update the sitemap with each build. Obviously if you find any bugs - let us know!