惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

宝玉的分享
宝玉的分享
J
Java Code Geeks
S
SegmentFault 最新的问题
L
LangChain Blog
M
MIT News - Artificial intelligence
Stack Overflow Blog
Stack Overflow Blog
IT之家
IT之家
量子位
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
雷峰网
雷峰网
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
MongoDB | Blog
MongoDB | Blog
Microsoft Security Blog
Microsoft Security Blog
腾讯CDC
H
Help Net Security
阮一峰的网络日志
阮一峰的网络日志
Jina AI
Jina AI
N
Netflix TechBlog - Medium
A
About on SuperTechFans
博客园 - 叶小钗
美团技术团队
人人都是产品经理
人人都是产品经理
D
DataBreaches.Net

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
The og:type Bug Three of My Astro Sites Quietly Shipped
Ken Imoto · 2026-05-08 · via DEV Community

Ken Imoto

I run four Astro sites. Three of them shipped the same SEO bug for months. Every blog post on those sites told Twitter, Facebook, and LinkedIn that it was a website — not an article.

Here is what happened, why I did not catch it sooner, and the one-line build check that would have caught it on day one.

What "og:type" actually does

When you paste a URL into Twitter or LinkedIn, the platform fetches the page and reads the Open Graph meta tags to decide what card to show. The most consequential of those tags is og:type. It tells the platform whether the URL is a website, an article, a book, a video, or a profile.

Twitter shows different rich cards for article than for website. Facebook surfaces published date and author for article. LinkedIn formats the snippet differently. Search engines also consume og:type as a hint about content classification.

The contract is simple: emit it once per page, with the correct value for the page.

The bug

In a typical Astro project, the meta tags live in a BaseLayout.astro that wraps every page. My BaseLayout had this line:

<meta property="og:type" content="website" />

Enter fullscreen mode Exit fullscreen mode

That was correct for the home page, the about page, the blog index. Fine.

For blog posts I had a BlogLayout.astro that wrapped BaseLayout and added article-specific tags through Astro's named slot:

<BaseLayout {title} {description} {ogUrl}>
  <Fragment slot="head">
    <meta property="og:type" content="article" />
    <meta property="article:published_time" content={date.toISOString()} />
  </Fragment>
  <slot />
</BaseLayout>

Enter fullscreen mode Exit fullscreen mode

Both pieces in isolation look right. The blog layout adds the article tag for blog posts. Run a blog post through the build and inspect the rendered HTML:

<meta property="og:type" content="website" />
<!-- ...other meta from BaseLayout... -->
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-30T00:00:00.000Z" />

Enter fullscreen mode Exit fullscreen mode

Two og:type tags. The first one, website, is the one social platforms read. The article tag is silently ignored.

Why this is invisible without checking

You will never see this bug in normal use:

  • The page renders fine. Visitors do not notice.
  • The build succeeds. No warnings.
  • Astro does not flag duplicate meta tags. They are valid HTML.
  • Open Graph parsers do not throw an error for duplicates — they just take the first match.
  • Even when you share the URL on Twitter, the card kind of works because the title, description, and image are still correct.

The only thing that breaks is the type signal. Your articles look like landing pages to every machine that consumes them, including Google's structured-data understanding.

I caught this on the third site only because I started running a small validation script during my SEO audit. The first two sites had been running for weeks.

How three sites all got it

The mechanism is identical across the three repos. Two cooperating layouts each emit one og:type, neither one knows about the other, and the result is two emissions. Once you build a site this way, every variant you start later from the same template inherits the bug.

I copied the layout structure from kenimoto.dev to a PC selection site, then to a whisky media site, then to the LLMO Framework documentation site. The bug rode along every time.

The fix: lift og:type into a prop

The right shape is for BaseLayout to own og:type exclusively, with a default of website and a prop override for pages that need a different value.

BaseLayout.astro:

---
interface Props {
  title: "string;"
  description: "string;"
  ogUrl: string;
  ogType?: 'website' | 'article' | 'book' | 'profile' | 'video.other';
}

const { title, description, ogUrl, ogType = 'website' } = Astro.props;
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:url" content={ogUrl} />
  <meta property="og:type" content={ogType} />
</head>

Enter fullscreen mode Exit fullscreen mode

BlogLayout.astro then passes ogType="article" and removes its own emission:

---
import BaseLayout from './BaseLayout.astro';
const { title, description, canonicalUrl, date, tags } = Astro.props;
---

<BaseLayout
  title={title}
  description={description}
  ogUrl={canonicalUrl}
  ogType="article"
>
  <Fragment slot="head">
    <meta property="article:published_time" content={date.toISOString()} />
    {tags.map(tag => <meta property="article:tag" content={tag} />)}
  </Fragment>
  <slot />
</BaseLayout>

Enter fullscreen mode Exit fullscreen mode

A BookLayout.astro does the same with ogType="book".

Now og:type is emitted exactly once, and the value matches the page subject.

The build-time check that would have caught it

After the fix I added a small script to the build pipeline that walks every generated HTML file in dist/ and counts how many og:type tags each has.

// scripts/verify-meta.mjs
import { readdir, readFile } from 'node:fs/promises';
import { join } from 'node:path';

async function* walk(dir) {
  for (const entry of await readdir(dir, { withFileTypes: true })) {
    const path = join(dir, entry.name);
    if (entry.isDirectory()) yield* walk(path);
    else if (entry.name.endsWith('.html')) yield path;
  }
}

const failures = [];
for await (const file of walk('dist')) {
  const html = await readFile(file, 'utf8');
  const count = (html.match(/property="og:type"/g) || []).length;
  if (count !== 1) failures.push(`${file}: ${count} og:type tags`);
}

if (failures.length > 0) {
  console.error('og:type duplication detected:');
  failures.forEach((f) => console.error('  ' + f));
  process.exit(1);
}
console.log('og:type check passed.');

Enter fullscreen mode Exit fullscreen mode

Hook it into the build:

// package.json
{
  "scripts": {
    "build": "astro build && node scripts/verify-meta.mjs"
  }
}

Enter fullscreen mode Exit fullscreen mode

This runs in well under a second on a 70-page site. If a future layout change re-introduces a second og:type, the build fails with the offending file paths. No more silent emissions.

You can extend the same idea to other meta tags that should appear exactly once: title, meta[name=description], link[rel=canonical], meta[property="og:url"]. Two-on-one duplication is a common shape for this class of bug.

What I would do differently

A few things, looking back:

The bug existed because two layouts both could emit og:type. The convention should be that exactly one layer in the stack owns each meta tag. Lift each tag to the layer that knows the right value, and forbid the lower layers from touching it. In Astro that means BaseLayout takes a typed prop, and there is no override path through the head slot for that specific tag.

I should have written the build check at the same time as the layout, not weeks later as part of an audit. Verifying that N of something appears in the output is a tiny script. Doing it later means living with whatever drift accumulated in between.

Sharing layout code between sites was the right call. Sharing the bug across sites was the cost. Centralized templates work for me only if I have automated checks that run on every site that uses them — otherwise the next site I spin up inherits whatever defects are sitting in the template.

What to do next

If you have an Astro site (or any SSG site with layered layouts), run this in your dist/ after your next build:

grep -c 'property="og:type"' dist/blog/*/index.html | grep -v ':1$'

Enter fullscreen mode Exit fullscreen mode

Anything that comes back is a page emitting two or more og:type tags. If the list is empty, you are clean. If not, you just found three sites' worth of silent SEO drift in your own repo.