如何在无WordPress的Next.js中实现Yoast风格内容分析

我正在用Next.js构建一款无头CMS，供编辑撰写博客文章，想要为编辑提供类似WordPress中Yoast SEO的实时SEO反馈功能，项目完全不依赖WordPress。

具体需求 #

• 检查focus keyphrase是否出现在标题、元描述、标题标签及正文内容中
• 验证keyphrase密度（既不过低也不过高）
• 检测缺失的H1、错误的标题层级以及缺失的图片alt文本
• 返回score，以便在编辑器UI中显示进度指示器
• 可选：当score过低时阻止发布

已尝试方案 #

我试过手动编写正则表达式进行检查，但这类方法脆弱且扩展性差，示例代码如下：

// Manual keyphrase check — very basic and unreliable
const keyphraseInTitle = title.toLowerCase().includes(focusKeyphrase.toLowerCase());
const keyphraseInMeta = metaDescription.toLowerCase().includes(focusKeyphrase.toLowerCase());

const wordCount = content.replace(/<[^>]*>/g, '').split(/\s+/).length;
if (wordCount < 300) {
  console.warn('Content too short');
}

// No scoring, no per-check feedback, no React UI component

期望实现效果 #

我期望能拥有一个analyzeContent函数，调用示例及返回结果如下：

const result = analyzeContent({
  title: 'Best Running Shoes for Beginners',
  metaDescription: 'Discover the best running shoes for beginners with our expert guide.',
  focusKeyphrase: 'running shoes for beginners',
  content: '<h1>Best Running Shoes</h1><p>Finding the right running shoes...</p>',
  images: [{ src: '/hero.jpg', alt: 'running shoes' }],
  internalLinks: ['/blog', '/category/shoes'],
  externalLinks: ['https://runnersworld.com'],
});

console.log(result.score);    // 38
console.log(result.maxScore); // 55
console.log(result.results);
// [
//   { id: 'title-keyphrase', status: 'good', score: 5, maxScore: 5, description: '...' },
//   { id: 'keyphrase-density', status: 'poor', score: 0, maxScore: 5, description: '...' },
//   { id: 'heading-structure', status: 'ok', score: 3, maxScore: 5, description: '...' },
//   ...
// ]

// Filter only failed checks
const failures = result.results.filter(r => r.status === 'poor');

同时，我还需要适配React编辑器的相关实现。

内容的提问来源于stack exchange，提问作者Al Amin