Sesam.hu — Engineering Manager & Trail Runner

Sesam.hu

Personal blog by Péter Szilágyi — Engineering Manager and trail runner based in Stockholm.
Writing on leadership, running, and life in the north.

English

Small improvements

These past days I’ve been working on mostly under-the-hood improvements to the site in small increments.

Post URLs had a different format under WP and Jekyll following a /<year>/<month>/<day>/<slug>|.html pattern. I implemented redirects so these legacy links are forwarded to their current /post/<slug> address. While doing so Lovable recommended to further improve the function by using a calculation of Levenshtein distance between strings so that slugs would be properly matched even though the current implementation sanitizes special characters. (For example fästing becomes fsting.)

Additionally, the same URL forwarding needed to be done for pagination. /page/<number> URLs now point to /?page=<number>.

With the redirection completed I also wanted to improve SEO by providing a sitemap for search engines. It proved to be a little more complex than I expected. Lovable’s original solution was to have an edge function serve a sitemap that is later served through React Router. Other than the fact that the sitemap was being served as text/html (a React app), not application/xml or text/xml that search engines expect, the routing proved to also be problematic. Meaning that in case of a curl https://sesam.hu/sitemap.xml Google Search Console would look for /sitemap.xml as a static file which doesn't exist (404), and the React app/SitemapProxy component is never reached. So I’ve had to have the sitemap generation create an actual static public/sitemap.xml file that gets deployed with the app. Also, I added a pre-build step in package.json so that every deployment automatically generates a fresh sitemap.

To make the writing of posts easier I added a modal to the post editor backend that shows a searchable grid of uploaded images and inserts the relevant embed code in posts for me.

Finally, for sharing purposes I tried to create better OpenGraph social images for the site and posts. Lovable’s default is a screenshot of the page, which unfortunately very often captured the loading wheel only. I had to give up my original idea that if a page has images, have the first one as an OpenGraph social image, because the way the app is deployed through Lovable’s infra, which kept interfering with my SEO component. For an easy enough solution I opted for simply having a static image for every page:

sesam.hu OpenGraph image showing the site logo with pine woods as a background

Comments