@ourines/seo-dev-buddy NPM

SEO Dev Buddy

一个框架无关的 SEO 诊断插件，专为开发阶段设计，遵循 Google Search 最佳实践。

特性

🔍 实时 SEO 分析 - 在开发过程中实时检测 SEO 问题
🎯 Google 最佳实践 - 基于 Google Search 官方指南
🚀 React 支持 - 完整的 React 组件和 Hook 支持
📱 响应式界面 - 美观的浮动面板，不影响开发体验
⚡ 零配置 - 开箱即用，自动检测页面 SEO 元素
🎨 内联样式 - 无需外部 CSS 依赖，避免样式冲突

安装

npm install @ourines/seo-dev-buddy
# 或
yarn add @ourines/seo-dev-buddy
# 或
pnpm add @ourines/seo-dev-buddy

快速开始

React 应用

import { SeoDevBuddy } from '@ourines/seo-dev-buddy';

function App() {
  return (
    <div>
      {/* 你的应用内容 */}
      <h1>我的网站</h1>
      <p>网站内容...</p>
      
      {/* SEO Dev Buddy 组件 - 仅在开发环境显示 */}
      {process.env.NODE_ENV === 'development' && <SeoDevBuddy />}
    </div>
  );
}

Astro 应用

---
// src/components/SeoDevBuddy.astro
import { SeoDevBuddy } from '@ourines/seo-dev-buddy';
---

<!-- 在页面底部添加 -->
<SeoDevBuddy client:load />

其他框架

SEO Dev Buddy 是一个 React 组件，但可以通过以下方式在其他框架中使用：

作为独立的微前端组件
通过 iframe 嵌入
使用 Web Components 包装器（计划中）

功能特性

实时 SEO 检查

SEO Dev Buddy 会自动检查以下 SEO 要素：

基础要素

✅ Title 标签 - 检查存在性和长度 (30-60 字符)
✅ Meta Description - 检查存在性和长度 (120-160 字符)
✅ H1 标签 - 检查数量和内容
✅ Canonical URL - 检查规范链接设置
✅ Meta Robots - 检查爬虫指令
✅ HTML Lang - 检查语言声明

内容和可访问性

✅ 图片 Alt 属性 - 统计缺失的 alt 文本
✅ 标题结构 - 检查 H2-H6 标签层级
✅ 内部链接 - 统计站内链接数量
✅ 外部链接 - 统计站外链接数量
✅ 字数统计 - 检查页面内容长度

Open Graph

✅ OG Title - 社交媒体标题
✅ OG Description - 社交媒体描述
✅ OG Image - 社交媒体图片
✅ OG URL - 规范 URL
✅ OG Type - 内容类型

Twitter Cards

✅ Twitter Card - 卡片类型
✅ Twitter Title - Twitter 标题
✅ Twitter Description - Twitter 描述
✅ Twitter Image - Twitter 图片

技术 SEO

✅ Viewport Meta - 移动端适配
✅ 结构化数据 - JSON-LD 检测
✅ 发布日期 - 文章发布时间

数据导出

📊 JSON 导出 - 一键复制所有 SEO 数据
📈 状态指示 - 错误、警告、成功状态
🔍 详细说明 - 每个检查项的详细解释

API 参考

主要组件

import { SeoDevBuddy } from '@ourines/seo-dev-buddy';

// 基本使用
<SeoDevBuddy />

类型定义

// SEO 检查结果
interface SEOCheckResult {
  id: string;
  label: string;
  category: 'essentials' | 'content' | 'social' | 'technical';
  status: 'error' | 'warning' | 'success';
  value: any;
  displayValue: string;
  description: string;
  recommendation: string;
  isCritical: boolean;
}

// SEO 报告
interface SEOReport {
  checks: SEOCheckResult[];
  score: number;
  timestamp: string;
}

开发

# 克隆仓库
git clone https://github.com/ourines/seo-dev-buddy.git
cd seo-dev-buddy

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 测试
pnpm test

# 类型检查
pnpm type-check

路线图

Vue 3 支持
Angular 支持
Web Components 版本
自定义规则配置
性能检查
可访问性检查
多语言支持

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

更新日志

查看 CHANGELOG.md 了解版本更新详情。

未来增强计划

优化状态检查:
- 为 OG/Twitter 描述添加长度检查（少于 100 字符时警告）
- 检查 Canonical URL 是否为绝对路径
- 警告图片 URL 中的双斜杠（//）问题
改进代码结构:
- 重构 getItemStatusLevel 为更小、更专注的函数
- 创建辅助函数避免重复的 seoData 检索逻辑
功能增强:
- 基础关键词分析（需要用户输入目标关键词）
- 显示基础性能指标（如 LCP）使用 window.performance
- 尝试基础 JSON-LD 验证或链接到外部验证器
- 添加警告阈值配置选项（如字数统计）