Lighthouse Case Study — clebson.cc
Improving Accessibility, Best Practices, and SEO for My Personal Website
Some time ago, I was working on improving my personal branding, and my first goal was to improve the SEO of my webpage where I talk about myself, and I finally achieved a perfect score of 100 in Lighthouse. So today, I’m here to share a little about my experience and how I achieved the 100 status. This article is not intended to be a tutorial, on the contrary, it’s more to encourage you to research what’s written here.
First step — Accessibility
The first and most challenging step for me was working on accessibility, but it was interesting to revisit some concepts that I used to teach to my students.
Working on real-world use cases for Accessible Rich Internet Applications (ARIA) was a bit complex. Our natural question is, “When should we use ARIA?” For me, after this experience, it became simpler. We should use ARIA when we have a non-semantic component. For example, a progress bar created using a div is not very semantic, so we need to make it accessible with ARIA attributes.
After finishing writing ARIA attributes for some components, I could finally move on to a point that I was lacking in my projects, which was alternative text for images, and that’s how I finally achieved a score of 100 in accessibility.
Second step — Best practices
As my website was relatively simple, the “Best practices” score was already high from the beginning. To reach 100%, I only needed to make some simple configurations, such as enabling Strict-Transport-Security header, using a Canonical Tag, and not using target=”_blank” without rel=”noopener”.
Third step — SEO
The third and final step I took was by far the most important for my goal of ranking on Google: SEO. This was the most challenging part to achieve the 100% status. Interestingly, all the previous steps helped improve the SEO, such as the alternative texts for images. So once I started optimizing the SEO, I had to focus on some concepts:
- Distributing the most common keywords across important HTML tags (h1, title, meta description). This helped search engines properly identify the topic of each page.
- Using meta tags for various social media platforms (Open Graph Protocol).
- Using structured data (JSON-LD).
- Having a concise meta description.
And finally, I achieved the long-awaited 100 status in SEO!
Article originally written in Portuguese and translated into English, available at:
Thanks for reading!
If you’re feeling generous, you have the option to buy me to a coffee or a ko-fi for just $1 to show your support as an author. What’s the difference? Well, I’m not sure, as I’ve always been a procrastinator and have never bothered to find out.
