If you’re an agency or business with search engine optimization (SEO) on the brain, we’ll do you a favour and introduce you to SEOmonitor. It’s an SEO platform that encompasses a whole suite of SEO tools; think Adobe Creative suite, but for SEO. It includes a research tool that instantly generates search and competitive overviews for any topic, an SEO timeline that tracks changes and, most recently, Signals, an app for SEO insights.

SEOmonitor approached us for the Signals project. As you might expect of a service that requires a continuous deployment of new content, they needed a tech stack that could keep up. We were thrilled to help a well-known brand and SEO tool meet their goals, and thrilled to learn from the best SEO platform on the block.

Bejamas loves working with people who strive toward a better understanding of technical problems. People who are keen on following the current tech trends and always put their customers above profit. More often than not those kinds of people are the best in their industries.

SEOmonitor wanted every marketing material to stand out and communicate how easy it is to manage an SEO agency’s day-to-day activities straight from Signals.

In order to do that, Bejamas decided to go with a new tech stack:

• The site is built with Gatsby and styled-components

• Contentful as content platform

• Netlify for hosting

SEOmonitor old page review

SEOmonitor’s old website was built on Wordpress with a mess of plugins and CSS overwrites. Loading times were incredibly long and the constant trial-and-error approach to WordPress, themes and plugin updates made the work even more difficult.

With Gatsby as their proposed static site generator and short timeframe for the project, we needed a content management tool that we knew would work well with Gatsby and was a proved hosting solution.

Overcoming the challenges SEOmonitor faced

The biggest challenge in this project was its design. Because the project required the use of many SVG files, most of which had to be in a particular position on the site. We decided to divide the background of each section on the page into "fragments" and properly positioned them in CSS. This, in turn, forced us to use many CSS pseudo-elements. Due to the multitude of these pseudo-elements, there were a lot of problems with the z-index property.
One other curiosity about the project was the implementation of a website translation into two languages.

Bejamas used i18n-react library for this purpose. In addition to having an "attach" to the context of the file with the appropriate translation, each page on SEOmonitor’s website during the construction was cloned due to the uniqueness of the URL under which it occurred. This allowed us to translate the content of a given page based on the URL under which it appeared.

Each of our projects contains a linter that orders the code while working in a development environment, as well as checks it and formats it when committing changes to the repository. For this purpose, we used a well-known library called "husky."

Choosing Contentful as our content platform

We needed a fast and developer-friendly solution for our content. Together with Alen and the rest of his marketing team, we picked Contentful for this project. There were a couple of reasons behind this choice:

• the modularity of content models

• multi-language support backed-in from the start

• permission management

• as an API driven solution, it allowed us to develop custom data relationships and data structures

• marvelous ease of integration with Gatsby

• Alen’s team loved it’s UI!

“Non-technical members needed to be able to update the website without the hassle of setting up git or writing markdown files. Luckily, we found out about Netlify and Contentful and it seemed like a perfect fit for our existing publishing flows.” Alen-Jelco Todorov, Growth & Marketing, SEOmonitor.com.

With it, they are empowered to craft beautiful pieces of content effortlessly. First of all, everything is laid out clearly making it easy to sort and edit. Finally, with one click of the “publish” button, they’re letting Netlify know, that there’s something new to show to the world.

The Results

The digital world values speed and simplicity above all else. With the proposed stack setup we’ve managed to improve loading times (from 5 to 6 seconds to 400ms) while implementing design that is pixel-perfect.

In Alen’s words: “The hassle of not having to care about security, because everything is static or solving the idiosyncrasies of conflicting plugins, makes it worth a lot.”

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.