Thomas Bonnet

Posted on Aug 25 Originally published at thomasbnt.dev

A Few Tips for Improving Your SEO

#seo #webdev #beginners #productivity

Over the years I’ve been tinkering with my blog, I’ve spent quite a bit of time looking into SEO. Just to understand why some pages rank high on Google while others remain invisible.

Between that and the experience I’ve gained through my projects and freelance work, here’s what I’ve learned, with the actual benchmarks you need to know, rather than rough estimates.

Content Is Still the Foundation

Even before rolling out a tool, Google’s main goal is to answer a question someone has asked. So, in practical terms:

Text that genuinely answers the question in the title, not just filler to make it look nice.
A structure with proper headings (a single H1, followed by H2/H3 headings to break up the text).
Keywords placed naturally in the title and introduction, without repeating them 15 times like in 2012.
Internal links to other articles, and external links to credible sources.

The Tool to Use from the Start

Before we even talk about thresholds, we need to be able to measure. PageSpeed Insights remains the simplest starting point: you paste in a URL, and it returns the actual LCP, INP, and CLS values, along with a complete Lighthouse audit, with suggestions for improvement ranked by impact.

To troubleshoot locally, right in the browser (Chrome, Edge, Brave, anything based on Chromium): F12 then the Lighthouse tab, it’s the same audit as PageSpeed Insights but without leaving the page. And if you need to dig even deeper into a specific performance issue, use the Performance tab: record a page load and see exactly what’s blocking rendering, which script is taking time, and where the main thread is spending its time.

Speed: Core Web Vitals

Since 2021, Google has been using three metrics measured on real visitors (not in a lab) as ranking signals. As of 2026, the “good” thresholds have not changed:

Metric	What it measures	“Good” threshold
LCP (Largest Contentful Paint)	Page load speed	< 2.5 s
INP (Interaction to Next Paint)	Responsiveness to clicks/taps	< 200 ms
CLS (Cumulative Layout Shift)	Elements shifting around	< 0.1

These figures come from the Chrome UX Report, which tracks metrics from actual visits over a rolling 28-day period.
Google looks at the threshold met by 75% of your visitors, not the average: the slowest 25% still count toward the calculation. So even if your site is slow on 4G in the subway, it still counts.

In real life, this means:

For LCP: preload the main image or font, avoid CSS that blocks rendering, use server-side rendering or SSG (Astro does this very well).
For INP: don’t flood the main thread with unnecessary JS; defer non-critical elements until after the initial render.
For CLS: always specify width and height for images and videos; reserve space for ads or content that loads later.

<img src="photo.webp" width="800" height="450" alt="Description de l'image" />

The browser calculates the aspect ratio as soon as it reads the HTML and reserves the space even before the image is loaded: no more layout shifts when the page is displayed.

Meta Tags and Open Graph

SEO also involves what search engine crawlers and social media platforms see even before the page is displayed:

A unique <title> tag per page, with the main keyword first.
A <meta name="description"> tag that really makes people want to click, between 150 and 160 characters.
A <link rel="canonical"> tag to prevent duplicate content when the same page is accessible via multiple URLs.
Open Graph tags (og:title, og:description, og:image, og:url) for a clean preview on Discord, Slack, LinkedIn, or Facebook.
Twitter Card tags (twitter:card, twitter:image) for the same display on Twitter.

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="twitter:card" content="summary_large_image" />

For the Open Graph image, the recommended size is 1200x630 px (aspect ratio 1.91:1): this is what Facebook, LinkedIn, and X display best without ugly cropping.

A tool like Meta Tags lets you preview how it will look before publishing.

Meta Tags — Preview, Edit and Generate

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, X and more!

metatags.io

Accessibility and Contrast

An accessible website is often one that Google understands better as well. The two overlap more than you might think.

Proper alt attributes on images, not just for SEO, but for screen readers.
Navigation that works entirely with the keyboard, with visible focus.
Semantic HTML (<nav>, <main>, <article>) rather than overusing <div>.
Descriptive links (avoid “click here”), understandable even without surrounding context.
A complete heading hierarchy, with no skipping levels between H1, H2, and H3.
Forms with a proper <label> for each field: a placeholder alone is not enough, it disappears when text is entered and is not always read by screen readers.
Touch targets of at least 44 x 44 px for buttons and links on mobile devices.

To explore each of these points in more detail, the checklist from design-accessible.fr is a good resource: organized by topic (content, colors, forms, navigation, design), with resources for each best practice.

When it comes to colors, the WCAG 2.1 (Level AA) standard specifies precise contrast ratios between text and background:

4.5:1 for normal text.
3:1 for large text (≥ 18px in bold, or ≥ 24px in normal).

/* Example: good contrast, test it before choosing your color palette */
body {
  background-color: #ffffff;
  color: #1d1d1d; /* well above 4.5:1 */
}

To check this without spending three hours on it, there’s the WebAIM Contrast Checker, just paste in your two colors, and it’ll tell you right away if they pass.

Responsive: Mobile-First

Google prioritizes indexing the mobile version of a site (mobile-first indexing). In practice:

The content must be identical on mobile and desktop; there shouldn’t be a “light” version for mobile.
The viewport must be properly configured:

<meta name="viewport" content="width=device-width, initial-scale=1">

Clickable areas must be large enough for a finger, not just for a mouse.

Get Indexed Faster

Writing a good article is great, but Google (and other search engines) still need to discover it quickly.
By default, a search engine crawls your site at its own pace, sometimes several days after publication.
IndexNow lets you notify supported search engines (Bing, Yandex, etc.) directly as soon as a page is published or updated, rather than waiting for them to crawl it.
I explain how to set it up in How to Get Your Web Pages Indexed Quickly with IndexNow.

The tools I use

You don’t need to pay for everything to get a clear picture right away:

Google Search Console (free): what’s indexed, the search queries driving traffic, and the page-by-page Core Web Vitals report.
web.dev (free): Google’s official site with all the documentation on Core Web Vitals, updated whenever thresholds change.
PageSpeed Insights (free): paste a URL, and it shows you the actual LCP/INP/CLS metrics and a complete Lighthouse audit.
Lighthouse in Chrome DevTools (free, built-in): the same as PageSpeed Insights but runs locally, which is handy during development.
WebAIM Contrast Checker (free): to check your colors before implementing them.
design-accessible.fr (free): an accessibility checklist designed for designers, organized by topic with resources for each best practice.
Ahrefs: This is a paid tool that I use for tracking rankings, conducting comprehensive technical audits, and analyzing backlink profiles. There’s also a free version (Ahrefs Webmaster Tools) available once your site is verified, which is more than enough for a personal blog.
Screaming Frog SEO Spider: for crawling your entire site and finding broken links, missing tags, etc.
Squoosh (free): compresses images and converts them to WebP directly in the browser, without installing anything. This provides an immediate improvement in LCP.

Conclusion

There’s nothing revolutionary about this article, but these are the kinds of basics that are easy to overlook, whether you’re deep in the code or letting AI generate too much content for you.

To sum up what really matters: content that answers a real question rather than just stuffing in keywords, a fast site (LCP < 2.5 s, INP < 200 ms, CLS < 0.1) measured regularly with PageSpeed Insights or Lighthouse, an accessible site (minimum 4.5:1 contrast ratio, keyboard navigation, semantic HTML), and one designed with mobile in mind first. Add to that a properly indexed site (use IndexNow so you don’t have to wait for crawlers to visit) and images compressed in WebP, and you’ve already covered 80% of the work.

pagespeed.web.dev

The rest is consistency: republish, correct, and measure again. SEO is never a finished project, it’s more like ongoing maintenance. 👍🏼

DEV Community