DEV Community: Sander de Snaijer

From 0 to 27K Search Impressions on a Developer Portfolio in 90 Days

Sander de Snaijer — Sun, 31 May 2026 09:31:53 +0000

I rebuilt my portfolio site earlier this year. Three months later, Google Search Console showed 27,000 impressions and 46 clicks. Not viral numbers, but for a personal dev portfolio it's not bad.

The data I tracked was Search Console data, git commits, and content publish dates. Here's what I found when I overlaid them. Your numbers and timeline will look different, but the patterns might not.

The setup

My site runs on Next.js with Sanity CMS. Before February 2026, I had a basic portfolio with projects and blog posts imported from Medium. They have been living there for a while because it was easy to write there: good editor, built-in audience, nice formatting out of the box. But that meant all the SEO value was going to Medium, not to my own site. The site was getting maybe 1-2 impressions per day, mostly from branded searches like "snaijer" or "de snaijer."

So the plan was: make my own site the primary home for my content. I rebuilt the blog infrastructure in Sanity CMS with the same features that made Medium comfortable to write on (code blocks with syntax highlighting, copy buttons, embedded demos). Then I set up canonical links on the Medium versions pointing back to my site. That tells Google "the original lives here, not on Medium."

This turned out to be one of the most impactful decisions in the whole timeline.

Three data sources, one timeline

To figure out what actually worked, I combined three things:

Search Console (Feb 1 - Apr 30, 2026): daily impressions, clicks, queries, and positions
*Git commit history *: every change I shipped, with dates
Site content: blog post and project publish dates, page structure, and metadata

Laying these on top of each other makes the cause-and-effect surprisingly clear.

What happened, phase by phase

February: the foundation (0-11 impressions/day)

In late January and February, I shipped a bunch of structural changes. The kind of work that doesn't show up in traffic immediately, but sets the stage for Google to understand your site.

What I shipped:

<meta> tags so Google had proper titles and descriptions to show
Video support for project pages
Tag page infrastructure and "related projects" sections to improve internal linking

During this entire month, I got exactly 1 click. Total. But looking back, none of this was wasted. Google was indexing the site structure, and the internal linking gave it more pages to crawl.

Early March: the blog migration (6-22 impressions/day)

On March 7, I merged the blog migration. This was the real upgrade: proper meta tags, structured URLs, tag pages, and all the SEO infrastructure that the old import was missing. Likely the single biggest change I made, and the growth that followed strongly correlates with this deploy.

The same day, I also fixed the XML sitemap parser so it wouldn't choke on special characters. After that deploy, the blog went from bare-bones imports to fully structured technical articles, including one about MediaPipe hand tracking and face detection in JavaScript. That one post would go on to generate 85% of all my search impressions.

The next day I shipped Open Graph images for every blog post (so links look good when shared), "related posts" suggestions at the bottom of each article, and security headers.

Impressions went from ~3/day to ~15/day within a week. Modest, but the trend was clearly moving up.

Mid-to-late March: making content discoverable (15-47 impressions/day)

This phase was about making the content easier for both Google and visitors to find.

Redirect fixes: Made sure old URLs pointed to the right pages. Critical if you're migrating content and don't want to lose whatever link equity exists.
Browsable tags overview page: Built out tags/mediapipe and similar pages so visitors (and Google) could explore content by topic. That MediaPipe tag page alone picked up 40 impressions and a click.
Code block styling and cross-links: Cleaner formatting likely helped visitors navigate the content more easily, and linking between related posts keeps people on the site longer.
Copy code button Small UX improvement, but it makes technical content more useful and shareable.

By the end of March, I was hitting 47 impressions/day. Still no hockey stick, but steady growth.

March 31: the Medium boost

On March 31, Level Up Coding published my MediaPipe face tracking tutorial on Medium. This is where the canonical link strategy from the setup starts paying off. The Medium version links back to my site as the original, so Google sends the ranking power my way while I get the reach of Medium's audience.

The timing lines up: the article went live on March 31, and the big impression jump started about a week later on April 6-7. External backlinks from established publications are one of the strongest ranking signals there is. If you can get your technical content picked up by a publication, do it.

Early April: the re-indexing wave (78 to 1,288 impressions/day)

Around April 6-7, impressions jumped from 78 to 873 in 2 days. No single change caused this. It was the cumulative effect of everything shipped in March, finally hitting Google's index.

Google's documentation states that crawling can take a few days to a few weeks, and ranking takes longer still. Ahrefs found that most SEO changes take three to six months to show results, though low-competition long-tail keywords can rank much faster.

Everything from March reached critical mass right here, about 4 weeks after the first deploy.

Late April: FAQ schema and the 6K spike (500-6,335 impressions/day)

Traffic settled into a plateau of 600-1,300 impressions/day through mid-April. Then on April 29, it spiked to 6,335 impressions in a single day.

That spike lines up with two changes from April 28-29:

FAQ schema: Added structured FAQ data to blog posts
New content type support: Expanded what kinds of content blocks the blog could render (tables, embeds, internal links)

Did the FAQ schema cause the spike? Probably not. Google had already limited FAQ rich results to authoritative government and health sites back in 2023, and while writing this post, they dropped FAQ rich results entirely. The markup won't hurt anything, but it's not earning visible rich results anymore.

More likely, Google re-crawled the pages after the structural changes and picked up more queries. I don't have a definitive answer for what caused this one.

What the data actually says

One blog post drove almost everything

The MediaPipe hand tracking post accounts for 23,340 of the total impressions (84.8%). The top queries are almost entirely mediapipe-related: facemesh landmarks, hand tracking CDN URLs, JavaScript examples.

This is not surprising. The post targets very specific long-tail developer queries with little competition. Someone searching for "mediapipe facemesh landmark 61 291 mouth corner" wants something very particular, and few pages answer that.

Traffic is almost all desktop

97.8% of impressions came from desktop (26,590 out of 27,188). That makes sense for developer content. People search for code solutions while they're coding, and they're at their desk when they do it.

Good positions, low CTR

The site's average position is 6.9 (first page of Google), but the CTR is just 0.17%. For the main blog post, it's even lower: 0.07% CTR at position 6.6. That means the content is ranking well, but the title and meta description aren't compelling enough to get clicks. This is probably the highest-leverage thing to fix next.

The "resin stained glass" opportunity

One query stands out: "resin stained glass alternative technique" got 1,388 impressions with zero clicks at position 6.55. That's a lot of people seeing the result and scrolling past it. A better meta description or a more specific title could turn some of those impressions into actual visitors.

Four takeaways for other devs

Your blog is your SEO engine, not your portfolio page. My projects page got 68 impressions. A single blog post got 23,340. If you want organic traffic, write about what you built, not just list it.
Infrastructure work pays off weeks later. None of the individual changes moved the needle immediately. But they compound. The April traffic surge was strongly correlated with March infrastructure work.
Long-tail technical content works. Nobody is competing for "mediapipe facemesh landmark 61 291 mouth corner left right." But people are searching for it. Write the content that answers specific questions, and you'll rank.
Structured data is a moving target. I added FAQ schema expecting rich results, then Google dropped support for it entirely. The lesson isn't "don't bother with structured data." It's that you should keep up with what Google actually supports and not assume any single markup type will keep working forever.

What's next

The obvious next step is improving CTR. I'm ranking on page one for hundreds of queries but barely getting clicks. Better titles and meta descriptions are the lowest-hanging fruit.

I'm also looking at the queries where I'm ranking position 8-15. With a bit of content improvement, some of those could move onto page one.

One thing I completely missed: Bing Webmaster Tools. I never submitted my site to Bing, which means I was invisible to Bing, DuckDuckGo, and everything else that relies on Bing's index. Three months of traffic left on the table. I've since set it up and plan to cover the impact in a follow-up post.

If you're building a dev portfolio and wondering whether blogging is worth the effort: yes. One good technical post did more for my visibility than a year of project pages.

The full implementation timeline and all commits mentioned in this post are available on GitHub.

Originally posted on sanderdesnaijer.com

MediaPipe Face Mesh: All 478 Landmark Points

Sander de Snaijer — Fri, 15 May 2026 13:43:43 +0000

If you have ever worked with MediaPipe Face Mesh, you know the feeling: you need the index for the left eye corner, you know it exists somewhere in those 478 points, but finding it means scrolling through documentation or guessing until something looks right.

This page is the reference I wish existed when I started building face-controlled browser games. Every facemesh landmark number, grouped by region, with code you can copy straight into your project. Consider it a complete face mesh indices cheat sheet.

Quick Lookup: Most Searched Landmarks

These are the indices developers search for most often. If you came here from Google, this is probably what you need.

Landmark	Index	Common Use
Left eye outer corner	33	Blink detection, eye tracking
Right eye outer corner	263	Blink detection, eye tracking
Left eye inner corner	133	Eye width calculation
Right eye inner corner	362	Eye width calculation
Mouth left corner	61	Smile detection
Mouth right corner	291	Smile detection
Upper lip center	13	Mouth open detection
Lower lip center	14	Mouth open detection
Nose tip	4	Face direction, head pose
Chin	152	Jaw tracking, face height
Left eyebrow outer	70	Eyebrow raise detection
Right eyebrow outer	300	Eyebrow raise detection
Forehead center	10	Face bounding, head tilt
Left cheek	234	Face width calculation
Right cheek	454	Face width calculation

// Quick access to the most-used landmarks
const landmarks = results.faceLandmarks[0];

const leftEyeOuter  = landmarks[33];
const rightEyeOuter = landmarks[263];
const mouthLeft      = landmarks[61];
const mouthRight     = landmarks[291];
const upperLip       = landmarks[13];
const lowerLip       = landmarks[14];
const noseTip        = landmarks[4];
const chin           = landmarks[152];

Try It: Interactive Landmark Explorer

Want to see these landmarks on your own face? The explorer below lets you hover over any of the 478 points, filter by region, and copy indices straight from the interface.

MediaPipe Face Mesh Explorer - 478 Point Demo

Interactive tool to explore all 478 MediaPipe Face Mesh landmark indices on your own face. Hover to inspect, click to pin, search by index or region.

demos.sanderdesnaijer.com

Open Face Mesh Explorer in Fullscreen

All 478 Landmarks by Face Region

MediaPipe Face Mesh divides the face into 478 landmark points. Below they are grouped by region so you can find what you need without scanning the entire mesh.

Eyes (Landmarks for Eye Tracking and Blink Detection)

The eye region uses the most landmarks of any area because of the detail needed for iris and eyelid tracking.

Left Eye Contour

Part	Indices
Upper eyelid	246, 161, 160, 159, 158, 157, 173
Lower eyelid	33, 7, 163, 144, 145, 153, 154, 155, 133
Outer corner	33
Inner corner	133

Right Eye Contour

Part	Indices
Upper eyelid	466, 388, 387, 386, 385, 384, 398
Lower eyelid	263, 249, 390, 373, 374, 380, 381, 382, 362
Outer corner	263
Inner corner	362

Left Iris

Part	Indices
Center	468
Ring	469, 470, 471, 472

Right Iris

Part	Indices
Center	473
Ring	474, 475, 476, 477

// Blink detection using eye aspect ratio
function getEyeAspectRatio(landmarks, side) {
  if (side === 'left') {
    const upper = landmarks[159]; // upper eyelid center
    const lower = landmarks[145]; // lower eyelid center
    const outer = landmarks[33];  // outer corner
    const inner = landmarks[133]; // inner corner

    const vertical = Math.abs(upper.y - lower.y);
    const horizontal = Math.abs(outer.x - inner.x);
    return vertical / horizontal;
  }
  // Right eye: 386 (upper), 374 (lower), 263 (outer), 362 (inner)
  const upper = landmarks[386];
  const lower = landmarks[374];
  const outer = landmarks[263];
  const inner = landmarks[362];

  const vertical = Math.abs(upper.y - lower.y);
  const horizontal = Math.abs(outer.x - inner.x);
  return vertical / horizontal;
}

// EAR below ~0.2 typically means the eye is closed
const leftEAR = getEyeAspectRatio(landmarks, 'left');
const isBlinking = leftEAR < 0.2;

Eyebrows

Left Eyebrow

Part	Indices
Full contour	70, 63, 105, 66, 107, 55, 65, 52, 53, 46
Outer point	70
Inner point	107
Peak (highest)	52

Right Eyebrow

Part	Indices
Full contour	300, 293, 334, 296, 336, 285, 295, 282, 283, 276
Outer point	300
Inner point	336
Peak (highest)	282

// Eyebrow raise detection
function isEyebrowRaised(landmarks, side) {
  const eyebrowPeak = side === 'left' ? landmarks[52] : landmarks[282];
  const eyeTop = side === 'left' ? landmarks[159] : landmarks[386];

  const distance = Math.abs(eyebrowPeak.y - eyeTop.y);
  return distance > 0.04; // threshold varies per face
}

Nose

Part	Indices
Tip (pronasale)	4
Bridge	6, 197, 195, 5, 168
Columella	1
Left nostril	102, 49, 48, 115
Right nostril	331, 279, 278, 344
Left alar (wing)	129, 198, 217, 209, 131
Right alar (wing)	358, 429, 437, 420, 360
Subnasale (bottom center)	2, 326, 97

// Head direction estimation using nose tip vs face center
const noseTip = landmarks[4];
const foreheadCenter = landmarks[10];

// Horizontal: negative = looking left, positive = looking right
const horizontalAngle = noseTip.x - foreheadCenter.x;

// Vertical: negative = looking up, positive = looking down
const verticalAngle = noseTip.y - foreheadCenter.y;

Mouth and Lips

Part	Indices
Upper lip outer	61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291
Upper lip inner	78, 191, 80, 81, 82, 13, 312, 311, 310, 415, 308
Lower lip outer	61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291
Lower lip inner	78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308
Left corner	61
Right corner	291
Upper center	13
Lower center	14
Center of lips (closed)	0

// Mouth open detection
function isMouthOpen(landmarks, threshold = 0.02) {
  const upperLip = landmarks[13];
  const lowerLip = landmarks[14];
  const mouthHeight = Math.abs(upperLip.y - lowerLip.y);
  return mouthHeight > threshold;
}

// Smile detection using mouth corner positions
function isSmiling(landmarks) {
  const leftCorner = landmarks[61];
  const rightCorner = landmarks[291];
  const mouthCenter = landmarks[13];

  // Corners rise above center when smiling
  const leftRise = mouthCenter.y - leftCorner.y;
  const rightRise = mouthCenter.y - rightCorner.y;

  return (leftRise + rightRise) / 2 > 0.01;
}

Jawline and Face Oval

The face oval defines the outer boundary of the face mesh. These landmarks trace the contour from the right temple, down the jaw, and up to the left temple.

Part	Indices
Face oval (full)	10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288, 397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136, 172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109
Chin point	152
Left jaw	234, 93, 132, 58, 172, 136, 150, 149, 176, 148
Right jaw	454, 323, 361, 288, 397, 365, 379, 378, 400, 377
Left temple	21, 54, 103, 67, 109, 10
Right temple	251, 284, 332, 297, 338, 10

Forehead

MediaPipe Face Mesh does not have dense forehead coverage. The available points sit along the hairline and between the eyebrows.

**Note: **The forehead has the sparsest landmark coverage of any face region. If your application needs precise forehead tracking (for example, measuring wrinkles or placing virtual accessories), consider interpolating between the available points or combining face mesh data with a separate detection model.

Part	Indices
Center top	10
Between eyebrows (glabella)	9, 151
Left side	21, 54, 67, 68, 69, 71, 103, 104, 108, 109
Right side	251, 284, 297, 298, 299, 301, 332, 333, 337, 338

Cheeks

**Note: **Cheek landmarks primarily trace the surface contour and cheekbone ridge. The interior cheek area has limited coverage. For applications like blush placement or cheek-puff detection, you may need to interpolate between the listed surface points and the mouth/jaw landmarks.

Part	Indices
Left cheek surface	36, 205, 206, 207, 187, 123, 116, 117, 118, 119, 100, 47
Right cheek surface	266, 425, 426, 427, 411, 352, 345, 346, 347, 348, 329, 277
Left cheek bone	234, 127, 162
Right cheek bone	454, 356, 389

Landmark Distribution by Face Region

Understanding how the 478 landmarks are distributed helps you know where the mesh is most and least detailed.

Region	Approximate Count	Detail Level
Eyes + Iris	~90	Very high
Mouth + Lips	~60	Very high
Nose	~30	High
Eyebrows	~22	Medium
Jawline + Face oval	~36	Medium
Cheeks	~24	Medium
Forehead	~23	Low
Tessellation (mesh fill)	~193	Internal mesh

Interactive component: faceMeshChart - Landmark count per face region out of 478 total points

The eyes and mouth have the densest coverage because they carry the most expression data. The forehead is sparse, which matters if you are trying to detect forehead wrinkles or headband-style accessory placement.

How to Access Landmarks in JavaScript

If you are setting up MediaPipe Face Mesh for the first time, check out my step-by-step tutorial on MediaPipe hand and face tracking. The code below assumes you already have the detection pipeline running.

Using the MediaPipe Tasks API (recommended)

import { FaceLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';

async function setupFaceLandmarker() {
  const vision = await FilesetResolver.forVisionTasks(
    'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
  );

  const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
      delegate: 'GPU',
    },
    runningMode: 'VIDEO',
    numFaces: 1,
    outputFaceBlendshapes: true,
  });

  return faceLandmarker;
}

function detectLandmarks(faceLandmarker, video) {
  const result = faceLandmarker.detectForVideo(video, performance.now());

  if (result.faceLandmarks.length > 0) {
    const landmarks = result.faceLandmarks[0];

    // Each landmark has x, y, z (normalized 0-1)
    const noseTip = landmarks[4];
    console.log(`Nose tip: x=${noseTip.x}, y=${noseTip.y}, z=${noseTip.z}`);
  }
}

Drawing Landmarks on Canvas

function drawLandmarks(ctx, landmarks, width, height) {
  ctx.clearRect(0, 0, width, height);

  landmarks.forEach((point, index) => {
    const x = point.x * width;
    const y = point.y * height;

    ctx.beginPath();
    ctx.arc(x, y, 1.5, 0, 2 * Math.PI);
    ctx.fillStyle = '#00ff00';
    ctx.fill();
  });
}

// Draw specific region with different color
function drawRegion(ctx, landmarks, indices, color, width, height) {
  indices.forEach((index) => {
    const point = landmarks[index];
    const x = point.x * width;
    const y = point.y * height;

    ctx.beginPath();
    ctx.arc(x, y, 3, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
  });
}

Practical Examples

Detect if Someone is Looking Left or Right

function getHeadDirection(landmarks) {
  const noseTip = landmarks[4];
  const leftCheek = landmarks[234];
  const rightCheek = landmarks[454];

  const leftDist = Math.abs(noseTip.x - leftCheek.x);
  const rightDist = Math.abs(noseTip.x - rightCheek.x);

  const ratio = leftDist / rightDist;

  if (ratio > 1.4) return 'looking right';
  if (ratio < 0.6) return 'looking left';
  return 'looking forward';
}

Calculate Face Tilt Angle

function getFaceTilt(landmarks) {
  const leftEye = landmarks[33];
  const rightEye = landmarks[263];

  const deltaY = rightEye.y - leftEye.y;
  const deltaX = rightEye.x - leftEye.x;

  const angleRad = Math.atan2(deltaY, deltaX);
  const angleDeg = angleRad * (180 / Math.PI);

  return angleDeg; // 0 = level, positive = tilted right
}

Measure Distance Between Any Two Landmarks

function landmarkDistance(landmarks, indexA, indexB) {
  const a = landmarks[indexA];
  const b = landmarks[indexB];

  return Math.sqrt(
    (a.x - b.x) ** 2 +
    (a.y - b.y) ** 2 +
    (a.z - b.z) ** 2
  );
}

// Example: eye width
const leftEyeWidth = landmarkDistance(landmarks, 33, 133);

Real-World Example: Face-Controlled Browser Games

I use these exact landmarks in several browser projects where your face and hands become the controller:

Eyebrow Tetris - Raising your eyebrows (landmarks 52 and 282) rotates the pieces, and tilting your head (landmarks 33 and 263) moves them left and right.
Map Gesture Controls - Hand tracking to pan and zoom OpenLayers maps without touching the screen. I wrote about the implementation in Gesture Controls with OpenLayers and MediaPipe.
Pug's Hunt - A webcam-controlled Duck Hunt clone using MediaPipe hand tracking to aim and shoot.

You can also try the interactive landmark explorer I built to go with this article. It lets you hover over any point on your own face to see its index, region, and coordinates.

The key insight: you do not need all 478 landmarks for most applications. Pick 5 to 10 strategic points and build your interaction from there.

Tips for Working with Face Mesh Landmarks

Coordinate system: All coordinates are normalized between 0 and 1. Multiply by your canvas width and height to get pixel positions. The z coordinate represents depth relative to the face center, with negative values meaning the point is closer to the camera.

Performance: Reading all 478 landmarks every frame is cheap. The expensive part is the model inference, not the data access. Once you have the landmarks array, index lookups are essentially free.

Mirroring: Webcam feeds are typically mirrored. If your landmark positions seem flipped, check whether your video element or canvas has a CSS transform: scaleX(-1). The landmark data itself is based on the raw video, not the mirrored display.

Threshold tuning: Every threshold in this article (0.02 for mouth open, 0.2 for blink, etc.) is a starting point. Faces vary. Build in a calibration step or let users adjust sensitivity.

Multiple faces: Set numFaces in the FaceLandmarker options to detect more than one face. Each face gets its own landmark array in the results.

FAQ

How many landmarks does MediaPipe Face Mesh have?

MediaPipe Face Mesh detects 478 landmarks on each face. This includes 468 face surface points and 10 additional iris points (5 per eye). The iris landmarks were added in a later update to the original 468-point model.

What are landmarks 33 and 263 in MediaPipe Face Mesh?

Landmark 33 is the outer corner of the left eye and landmark 263 is the outer corner of the right eye. These two points are commonly used for blink detection, eye tracking, and calculating face tilt angle.

What are landmarks 13 and 14 used for?

Landmark 13 is the center of the upper lip and landmark 14 is the center of the lower lip. The vertical distance between these two points is the simplest way to detect whether someone's mouth is open. A distance greater than roughly 0.02 (in normalized coordinates) usually indicates an open mouth.

What are landmarks 61 and 291?

Landmark 61 is the left mouth corner and landmark 291 is the right mouth corner. Together they define the width of the mouth and are used for smile detection by measuring whether the corners rise above the center of the lips.

What coordinate system does MediaPipe Face Mesh use?

All landmark coordinates are normalized between 0 and 1 relative to the image dimensions. The x axis runs left to right, y runs top to bottom, and z represents depth relative to the center of the face. To convert to pixel coordinates, multiply x by image width and y by image height.

Can MediaPipe Face Mesh track multiple faces?

Yes. Set the numFaces option to the number of faces you want to detect (up to 4 is practical for real-time performance). Each detected face returns its own separate array of 478 landmarks.

Is MediaPipe Face Mesh free to use?

Yes. MediaPipe is open source under the Apache 2.0 license. It runs entirely in the browser using WebAssembly and WebGL, so no data is sent to any server. This makes it suitable for privacy-sensitive applications.

Originally posted on sanderdesnaijer.com