Daniel Markow

Although I have been dabbling in web development for a while I have never gotten into SEO. I guess I am more of a developer than I am an entrepreneur because once the technical challenge is solved, I tend to lose interest. If you want to earn money however people need to know about your solution in addition to it being useful, fairly priced and excel in many other aspects. It is part of the game.

In our new venture we are performing employee surveys in local government organisations and other state institutions in Middle-Germany. Although this kind of work is usually offered through public tenders it is still helpful to be found by decision makers. The first thing you need is a web page. Since I am not much of a UX designer and have a Gemini subscription I decided to use Google Stitch project which is basically an AI driven Figma. The designs it generates still have that undesirable ai-generated look, but they are a great basis to start from. The individual pages can be exported into html using tailwind classes for styling.

Next step I created an Astro project, added Tailwind and copied the styled pages from Stitch. Astro is a great choice because it generates static pages. With SPAs like client components in React or Angular applications Google can't crawl the pages contents because during initial loading of the page only a bare-bones HTML page is loaded together with the JavaScript bundle. Only after that JavaScript generates all the DOM elements but by then the Google crawlers have already moved on.

I refactored that stitch code into components (header, footer, etc.) then used the Gemini CLI to "make the page mobile ready" which worked ok-ish. In many cases I had to intervene, for example make sure that the large German headings are broken up properly on small viewports. I also added a markdown-based blog section for which there already is a collection in Astro. This was then deployed to a Hetzner webspace. Usually for PHP applications webspaces are great for deploying a static page. You just run npm run build locally and use an FTP client to copy the contents of the _dist folder to the public folder of the webspace. They are privacy friendly hosted in Germany - an important aspect if you are trying to sell to the German government - and super cheap. The smallest one on Hetzner is around 2€ per month. They also come with integrated Email, a database and many other services.

This first version I ran through pagespeed and the results were not great. Especially on mobile which is apparently weighed higher in Googles algorithm. I basically copied and pasted the findings into Gemini CLI and told it to optimize. The biggest culprit where heavy font files (can't reference Google fonts on a privacy focused web page) and it configured the Apache server running on the webspace such that it would cache them which improved the score. There were also a couple of AI generated images from Stitch that slowed things down, so it optimized the settings in the Astro image tag. However, the results were still not that great. One of the heaviest font files was the one containing symbols - like check mark icons for example. So, I decided to replace them with SVG icons which are more lightweight. I also removed some of the AI generated images which sucked anyway.

Another aspect of SEO optimization is a sitemap. It is a small xml file that lists the contents on your page. It is said that it will make it easier for Google to crawl. Fortunately, there is a handy plugin for that in Astro that automatically generates the xml file. It is then part of the _dist folder along with the other assets generated by the build.

As a final optimization step I signed in to Google Search Console that gives you more information how your site is found. To connect the URL to your Google Account you need to add their key to the domains' DNS entries.

And voíla - we are on the top spot on Google.