Task: Configure Open Graph / meta tags for correct page previews in messengers

Enhanced og:image validation following Google errors

Google reported an "Invalid URL in image field" error for some product cards. The suspected cause is that the original image paths contained unencoded Cyrillic characters and spaces, which the previous validation did not catch.

The script agent/scripts/check-page-image/index.ts in the happybaby2000.ru project has been updated:

• the original og:image value is checked prior to any normalization;
• the URL must be an absolute HTTP(S) address with a host;
• unencoded spaces, Cyrillic characters, control characters, and other invalid characters are detected;
• the correctness of %-escape sequences is verified;
• unencoded square brackets in the path/query/fragment and duplicate # characters in the fragment are detected, while IPv6 addresses in square brackets are permitted;
• all og:image tags on the page are checked, not just the first one;
• diagnostics indicate the image number, original URL, and the reason for the error; for invalid characters, the Unicode code and position are also output;
• on errors, the script returns exit code 1, and on success — 0.

A regression test agent/scripts/check-page-image/index.test.ts using Vitest has been added alongside it. The Vitest configuration has been extended to cover scripts/**/*.test.ts. The test suite covers 28 scenarios, including valid and invalid URLs, encoded characters, IPv6, missing images, multiple og:image tags, and diagnostic precision.

The check runs successfully: 28 tests passed, ESLint, Prettier, and git diff --check — no errors.

Test command:

npm run test -- scripts/check-page-image/index.test.ts

Validation limitation: it validates the syntax of the URL from og:image, but does not check the availability of the image itself and does not guarantee that the URL will be accepted by Google services. The script does not perform automatic URL correction.

Progress: First an Executable Check, Then Implementation

Before making any changes, a separate terminal TypeScript script was written first. It makes an HTTP request to the page, parses the HTML via cheerio, and checks for required Open Graph tags. This provided an objective baseline before making edits and a ready-made acceptance criterion for the AI agent.

Verification Script

import * as cheerio from "cheerio";

const REQUIRED_TAGS = [
  "og:title",
  "og:description",
  "og:image",
  "og:url",
  "og:type",
] as const;

function isAbsoluteHttpUrl(value: string): boolean {
  try {
    const url = new URL(value);
    return url.protocol === "http:" || url.protocol === "https:";
  } catch {
    return false;
  }
}

async function main() {
  const targetUrl = process.argv[2];

  if (!targetUrl) {
    console.error("Usage: npx tsx check-open-graph.ts <url>");
    process.exit(2);
  }

  const response = await fetch(targetUrl, {
    redirect: "follow",
    headers: {
      "User-Agent": "OpenGraphChecker/1.0",
    },
  });

  if (!response.ok) {
    console.error(`HTTP ${response.status} ${response.statusText}`);
    process.exit(1);
  }

  const html = await response.text();
  const $ = cheerio.load(html);

  let hasErrors = false;

  console.log(`HTTP: ${response.status}\n`);

  const values = Object.fromEntries(
    REQUIRED_TAGS.map((property) => {
      const value =
        $(`meta[property="${property}"]`).first().attr("content")?.trim() ?? "";

      if (!value) {
        console.log(`✗ ${property}: missing`);
        hasErrors = true;
      } else {
        console.log(`✓ ${property}: ${value}`);
      }

      return [property, value];
    }),
  );

  const image = values["og:image"];
  const ogUrl = values["og:url"];

  if (image && !isAbsoluteHttpUrl(image)) {
    console.log(`✗ og:image is not absolute: ${image}`);
    hasErrors = true;
  }

  if (ogUrl && !isAbsoluteHttpUrl(ogUrl)) {
    console.log(`✗ og:url is not absolute: ${ogUrl}`);
    hasErrors = true;
  }

  console.log(
    hasErrors
      ? "\nRESULT: invalid or incomplete"
      : "\nRESULT: OK",
  );

  process.exit(hasErrors ? 1 : 0);
}

main().catch((error) => {
  console.error(error);
  process.exit(1);
});

State Before Implementation

The first run yielded the expected negative result:

HTTP: 200

✗ og:title: missing
✗ og:description: missing
✗ og:image: missing
✗ og:url: missing
✗ og:type: missing

RESULT: invalid or incomplete

After that, the task was passed to the AI agent not as an abstract formulation like "add Open Graph", but along with a specific verification script and a reproducible way to check the result.

Agent Report

The agent reported the following changes:

Done. Changes:

index.tsx — added props image and ogType, rendering og:title, og:description, og:image, og:url, og:type
index.tsx — computed imageUrl and passed it to SeoHeaders with ogType="product"
You can check with the script:

npx tsx scripts/check-page-image/index.ts "http://localhost:3000/catalog/product.html"

Re-Verification

After the changes, the same verification approach yielded:

HTTP: 200

✓ og:title: Small-sized Playground Korabl
✓ og:description: Size 3.48 x 1.78 x 2.32 m.
✓ og:image: http://localhost:3000/images/resized/middle/images/img.jpg
✓ og:url: http://localhost:3000/catalog/product.html
✓ og:type: product

RESULT: OK

Practical Conclusion

The approach proved useful: first, a small executable check is created that captures the current state and readiness criteria, and then this same check is passed to the executor along with the task. This reduces ambiguity in the task assignment and makes the result verifiable not by the agent's report, but by the actual behavior of the system.

The next step is to strengthen this pattern: if the agent is given a verification script, the assignment should immediately require not only making changes, but also independently running this script after implementation and attaching the actual result. Then the cycle becomes closed-loop: reproduce → implement → verify, and the human is left with control verification rather than primary verification.