How SEOmonitor aced their app launch (with a little help from Bejamas and Contentful)
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.”
