前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载本文以仓库中的 SEO Specialist 角色文档 为骨架完整讲解传统 SEO搜索引擎优化与 GEO生成式引擎优化Generative Engine Optimization的核心方法论并以 Dillinger 开源仓库中 app/sitemap.ts、public/robots.txt、app/layout.tsx、app/page.tsx 等真实实现为佐证带你掌握内容写给人类、结构写给机器的双目标优化路径以及如何在 Next.js 项目中落地 E-E-A-T、Core Web Vitals 与 Schema 标记。SEO 与 GEO双引擎时代的两种打法角色文档开篇用一句话定义了整个团队的优化哲学Content for humans, structured for machines. Win both Google and ChatGPT.翻译过来就是内容面向人类创作结构面向机器编排同时拿下传统搜索与 AI 搜索两个入口。这句话背后的思维模式有四条User-first内容质量优先于技巧不做黑帽小动作Dual-targetSEO 与 GEO 同时推进不是二选一Data-driven先测量再测试后迭代Future-proofAI 搜索正在增长现在就要为它布局。SEO 与 GEO 虽然共享大量底层技术可抓取、可索引、结构化数据但目标、平台、指标和关注点完全不同角色文档给出了一张对照表AspectSEOGEOGoalRank #1 in Google在 Google 排第一Be cited in AI responses被 AI 回答引用PlatformGoogle, BingChatGPT, Claude, PerplexityMetricsRankings, CTR排名、点击率Citation rate, appearances引用率、出现频次FocusKeywords, backlinks关键词、外链Entities, data, credentials实体、数据、可信凭证从 Dillinger 仓库可以观察到这套双目标思路的实际落地站点同时准备了面向 Google 的 robots.txt 与 sitemap.ts也准备了面向 AI 引擎的 llms.txt其中声明 The preferred markdown editor for AI and LLM workflows并给出 API、MCP、CLI 的结构化端点清单。这就是典型的 GEO 实践——把机器可读的结构同时提供给两类爬虫。Core Web Vitals三大核心指标的目标阈值角色文档给出了性能优化的硬性目标这三项是 Google 页面体验信号Page Experience的组成部分MetricGood合格Poor糟糕LCPLargest Contentful Paint最大内容绘制 2.5s 4.0sINPInteraction to Next Paint交互到下一帧绘制 200ms 500msCLSCumulative Layout Shift累积布局偏移 0.1 0.25配套的 seo-fundamentals skill 补充了每个指标的含义LCP 衡量加载性能INP 衡量交互性CLS 衡量视觉稳定性。三者的优化手段各不相同——LCP 靠资源预加载与减少阻塞脚本INP 靠精简事件处理器与避免长任务CLS 靠为图片和广告位预留尺寸。在 Dillinger 的源码中可以找到对应的工程化实践例如 app/page.tsx 通过export const dynamic force-dynamic与next/dynamic的ssr: false配置将体积庞大的 Monaco 编辑器拆成客户端按需加载的模块并配套EditorSkeleton骨架屏占位——这既压缩了首屏 LCP又通过占位避免了编辑器挂载瞬间的布局跳动CLS。注意本文不引用任何实测性能数字以上属于代码结构层面的推断。E-E-A-T 框架可信度四支柱E-E-A-T 是 Google 质量评估指南的核心概念角色文档把四个原则映射为可执行的动作PrincipleHow to Demonstrate如何证明Experience经验First-hand knowledge, real stories一手经验、真实案例Expertise专业Credentials, certifications资质、认证Authoritativeness权威Backlinks, mentions, recognition外链、被提及、行业认可Trustworthiness可信HTTPS, transparency, reviewsHTTPS、透明、评价E-E-A-T 在代码层面最直接的落点是TrustworthinessDillinger 根布局 app/layout.tsx 显式开启robots: { index: true, follow: true }并在 public/robots.txt 中声明Sitemap: https://dillinger.io/sitemap.xml同时站点提供 隐私页/privacy/page.tsx) 与 更新日志/changelog/page.tsx)见 sitemap.ts 中的changeFrequency: weekly这些公开、可追溯的页面本身就是透明性的信号。Technical SEO Checklist站点级技术体检角色文档把技术 SEO 拆成七项硬性检查每一项都能在 Dillinger 仓库找到对应实现XML sitemap submitted—— app/sitemap.ts 以 Next.jsMetadataRoute.Sitemap生成 17 个 URL覆盖首页、功能页、指南、对比页、集成页等并为每个 URL 配置了lastModified、changeFrequency与priority首页priority: 1内容页多为0.6~0.8隐私页0.3。robots.txt configured—— public/robots.txt 允许全站抓取并显式Disallow一批垃圾 URL 模式如/redirect/、/products/、/legal/注释里说明这些路径从未是 dillinger.io 的有效路由是用户粘贴的 Markdown 内容里爬出来的碎片——这是对抓取预算crawl budget的精细管理。Canonical tags correct—— app/layout.tsx 设置alternates: { canonical: https://dillinger.io }各内容页也在自己的 metadata 中覆盖 canonical如 compare 页/compare/page.tsx#L8) 的alternates: { canonical: https://dillinger.io/compare }避免重复内容稀释排名。HTTPS enabled——metadataBase固定为https://dillinger.ioapp/layout.tsx。Mobile-friendly—— 内容布局大量使用响应式类如 app/(content)/layout.tsx/layout.tsx#L33) 中导航链接的hidden sm:block。Core Web Vitals passing—— 目标见上文指标表工程手段见next/dynamic按需加载。Schema markup valid—— 见下文结构化数据小节。结构化数据Schema 标记的两种落地方式角色文档与 seo-fundamentals skill 都强调 Schema 标记Dillinger 仓库恰好演示了 Next.js 下两种主流做法做法一根布局注入 WebApplication 标记。在 app/layout.tsx 中通过script typeapplication/ldjson注入type: WebApplication声明applicationCategory: DeveloperApplication、browserRequirements: Requires JavaScript、offers价格为 0以及featureListLive markdown preview、GitHub integration、PDF export 等八项能力。这类标记让搜索引擎把站点识别为免费开发者工具这一实体。做法二页面级 FAQPage 标记。在 app/page.tsx 中首页把 8 组高频问题Does Dillinger require a signup?、Can I sync with GitHub or Dropbox? 等序列化成FAQPage结构的 JSON-LD并随组件一起渲染app/page.tsx。FAQ 标记是 GEO 清单中FAQ sections present的直接体现——AI 引擎在聚合答案时非常依赖这种问答对结构。Content SEO Checklist页面内容要素内容 SEO 的五项检查聚焦单页要素角色文档给出的最佳实践是Title tags optimized (50-60 chars)—— 根布局 app/layout.tsx 使用title.defaulttitle.template%s | Dillinger的组合每个页面只负责提供主题词品牌后缀统一追加。Meta descriptions (150-160 chars)—— 首页 description 在 160 字符上下并覆盖live preview、cloud sync、No signup三个核心卖点app/page.tsx。H1-H6 hierarchy correct—— 首页 SEO 区块保持单一 H1Online Markdown Editor with Live Preview H2Why writers pick Dillinger、Frequently asked questions H3feature 条目的层级app/page.tsx。Internal linking structure—— 内容页统一由 app/(content)/layout.tsx/layout.tsx) 提供主导航Features / AI / Integrations / Guide / Compare / Open Editor首页底部再补充五个内容锚点app/page.tsx形成内链环。Image alt texts—— 站点图标均带有描述性 alt如og-image.png的alt: Dillinger - Online Markdown Editor with live preview。此外app/opengraph-image.tsx 用next/og在 Edge 运行时动态生成 1200×630 的分享图含 Live Preview · Cloud Sync · AI-Ready · Free 字样配合 app/layout.tsx 的openGraph与twittercard 配置保证社交平台与搜索引擎分享卡片完整。GEO Checklist为 AI 引用而优化的六个要素GEO 的目标不是排名而是被引用角色文档给出了六项检查FAQ sections present—— 首页渲染完整 FAQ 区块并配套 FAQPage JSON-LDapp/page.tsx。Author credentials visible—— 需要在作者署名页落实仓库通过 Person schema 预留能力见 seo-fundamentals 的 Schema 类型表。Statistics with sources—— 数据需标注来源避免无出处断言。Clear definitions—— 文档中每个概念如 LCP、GEO 本身都给出精确定义便于被抽取为实体。Expert quotes attributed—— 引用需具名归因。Last updated timestamps—— sitemap.ts 为每个 URL 提供lastModified: new Date()更新日志页保持weekly刷新频率这些都是时效性信号。Content That Gets Cited——AI 引擎为什么引用你ElementWhy AI Cites It引用原因Original statisticsUnique data独有数据无法从他处获得Expert quotesAuthority权威背书Clear definitionsExtractable可直接抽取为定义Step-by-step guidesUseful对读者有用Comparison tablesStructured天然结构化便于引用Dillinger 仓库中的 compare 页面/compare/page.tsx)Dillinger vs StackEdit、HackMD、Typora 等正是Comparison tables / structured comparison策略的实践每个竞品页都以标签式结论 对比论点组织结构清晰、易于被检索与引用。同样public/llms.txt 把 API 端点、CLI 命令、功能清单全部以 Markdown 标题层级呈现——Markdown 本身就是 LLM 的原生语言这份文件等于给 AI 引擎一份可直接解析的站点说明书。何时启用 SEO Specialist适用场景清单角色文档最后明确了该角色的使用边界当出现以下需求时应引入 SEO SpecialistSEO auditsSEO 审计Core Web Vitals optimization核心 Web 指标优化E-E-A-T improvementE-E-A-T 提升AI search visibilityAI 搜索可见性Schema markup implementationSchema 标记落地Content optimization内容优化GEO strategyGEO 策略结合角色声明tools: Read, Grep, Glob, Bash, Write、skills: clean-code, seo-fundamentals, geo-fundamentals它被设计为先读后改的分析型角色先通过 Read/Grep/Glob 审计现有页面与配置再用 Write 落地优化最后按清单复查。在 Dillinger 这类仓库中典型工作流就是对照本文的 Technical/Content/GEO 三份清单逐项核对 app/layout.tsx、app/sitemap.ts、public/robots.txt 与各内容页的 metadata。总结一份可直接复用的双目标优化路线图把角色文档与 Dillinger 源码合在一起可以得到一条完整可执行的优化路线先定基调内容面向用户User-first结构面向机器Dual-target拒绝技巧堆砌再立指标以 LCP 2.5s、INP 200ms、CLS 0.1 为性能红线用next/dynamic按需加载、骨架屏占位等手段保底夯实地基sitemap、robots.txt、canonical、HTTPS、移动端适配五项技术 SEO 缺一不可丰富实体注入 WebApplication / FAQPage 等 JSON-LD配齐 title、description、OG 图面向 AI增加 FAQ 区块、清晰定义、结构化对比表、时效时间戳与 llms.txt让 ChatGPT、Claude、Perplexity 都能稳定引用最后记住角色文档的收尾忠告——The best SEO is great content that answers questions clearly and authoritatively.最好的 SEO 就是清晰、权威地回答问题的优质内容。赞分享前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载相关推荐TensorZero 工具调用Tool Use实战用 Function Calling 配置天气聊天机器人并完成多轮对话TensorZero 工具调用Tool Use实战用 Function Calling 配置天气聊天机器人并完成多轮对话 TensorZero 是一个开源前端开发工具面向 ADK 技能写作的 On-Page SEO 清单content-research-writer 的 SEO 优化实战指南面向 ADK 技能写作的 On Page SEO 清单content research writer 的 SEO 优化实战指南 导读 在 agent skil示例工程Laverna 标签与任务清单实战指南从 Markdown 语法到源码级实现Laverna 标签与任务清单实战指南从 Markdown 语法到源码级实现 Laverna 是一款支持 Markdown 编辑器与加密功能的开源笔记应用可前端桌面应用上一篇实战指南kfyty725/loveqq-framework的BeanPostProcessor排序下一篇掌握优雅排版解锁EB Garamond 12开源字体的专业应用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Dillinger 的 SEO 与 GEO 实战指南：从角色定义到源码级优化清单
前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载本文以仓库中的 SEO Specialist 角色文档 为骨架完整讲解传统 SEO搜索引擎优化与 GEO生成式引擎优化Generative Engine Optimization的核心方法论并以 Dillinger 开源仓库中 app/sitemap.ts、public/robots.txt、app/layout.tsx、app/page.tsx 等真实实现为佐证带你掌握内容写给人类、结构写给机器的双目标优化路径以及如何在 Next.js 项目中落地 E-E-A-T、Core Web Vitals 与 Schema 标记。SEO 与 GEO双引擎时代的两种打法角色文档开篇用一句话定义了整个团队的优化哲学Content for humans, structured for machines. Win both Google and ChatGPT.翻译过来就是内容面向人类创作结构面向机器编排同时拿下传统搜索与 AI 搜索两个入口。这句话背后的思维模式有四条User-first内容质量优先于技巧不做黑帽小动作Dual-targetSEO 与 GEO 同时推进不是二选一Data-driven先测量再测试后迭代Future-proofAI 搜索正在增长现在就要为它布局。SEO 与 GEO 虽然共享大量底层技术可抓取、可索引、结构化数据但目标、平台、指标和关注点完全不同角色文档给出了一张对照表AspectSEOGEOGoalRank #1 in Google在 Google 排第一Be cited in AI responses被 AI 回答引用PlatformGoogle, BingChatGPT, Claude, PerplexityMetricsRankings, CTR排名、点击率Citation rate, appearances引用率、出现频次FocusKeywords, backlinks关键词、外链Entities, data, credentials实体、数据、可信凭证从 Dillinger 仓库可以观察到这套双目标思路的实际落地站点同时准备了面向 Google 的 robots.txt 与 sitemap.ts也准备了面向 AI 引擎的 llms.txt其中声明 The preferred markdown editor for AI and LLM workflows并给出 API、MCP、CLI 的结构化端点清单。这就是典型的 GEO 实践——把机器可读的结构同时提供给两类爬虫。Core Web Vitals三大核心指标的目标阈值角色文档给出了性能优化的硬性目标这三项是 Google 页面体验信号Page Experience的组成部分MetricGood合格Poor糟糕LCPLargest Contentful Paint最大内容绘制 2.5s 4.0sINPInteraction to Next Paint交互到下一帧绘制 200ms 500msCLSCumulative Layout Shift累积布局偏移 0.1 0.25配套的 seo-fundamentals skill 补充了每个指标的含义LCP 衡量加载性能INP 衡量交互性CLS 衡量视觉稳定性。三者的优化手段各不相同——LCP 靠资源预加载与减少阻塞脚本INP 靠精简事件处理器与避免长任务CLS 靠为图片和广告位预留尺寸。在 Dillinger 的源码中可以找到对应的工程化实践例如 app/page.tsx 通过export const dynamic force-dynamic与next/dynamic的ssr: false配置将体积庞大的 Monaco 编辑器拆成客户端按需加载的模块并配套EditorSkeleton骨架屏占位——这既压缩了首屏 LCP又通过占位避免了编辑器挂载瞬间的布局跳动CLS。注意本文不引用任何实测性能数字以上属于代码结构层面的推断。E-E-A-T 框架可信度四支柱E-E-A-T 是 Google 质量评估指南的核心概念角色文档把四个原则映射为可执行的动作PrincipleHow to Demonstrate如何证明Experience经验First-hand knowledge, real stories一手经验、真实案例Expertise专业Credentials, certifications资质、认证Authoritativeness权威Backlinks, mentions, recognition外链、被提及、行业认可Trustworthiness可信HTTPS, transparency, reviewsHTTPS、透明、评价E-E-A-T 在代码层面最直接的落点是TrustworthinessDillinger 根布局 app/layout.tsx 显式开启robots: { index: true, follow: true }并在 public/robots.txt 中声明Sitemap: https://dillinger.io/sitemap.xml同时站点提供 隐私页/privacy/page.tsx) 与 更新日志/changelog/page.tsx)见 sitemap.ts 中的changeFrequency: weekly这些公开、可追溯的页面本身就是透明性的信号。Technical SEO Checklist站点级技术体检角色文档把技术 SEO 拆成七项硬性检查每一项都能在 Dillinger 仓库找到对应实现XML sitemap submitted—— app/sitemap.ts 以 Next.jsMetadataRoute.Sitemap生成 17 个 URL覆盖首页、功能页、指南、对比页、集成页等并为每个 URL 配置了lastModified、changeFrequency与priority首页priority: 1内容页多为0.6~0.8隐私页0.3。robots.txt configured—— public/robots.txt 允许全站抓取并显式Disallow一批垃圾 URL 模式如/redirect/、/products/、/legal/注释里说明这些路径从未是 dillinger.io 的有效路由是用户粘贴的 Markdown 内容里爬出来的碎片——这是对抓取预算crawl budget的精细管理。Canonical tags correct—— app/layout.tsx 设置alternates: { canonical: https://dillinger.io }各内容页也在自己的 metadata 中覆盖 canonical如 compare 页/compare/page.tsx#L8) 的alternates: { canonical: https://dillinger.io/compare }避免重复内容稀释排名。HTTPS enabled——metadataBase固定为https://dillinger.ioapp/layout.tsx。Mobile-friendly—— 内容布局大量使用响应式类如 app/(content)/layout.tsx/layout.tsx#L33) 中导航链接的hidden sm:block。Core Web Vitals passing—— 目标见上文指标表工程手段见next/dynamic按需加载。Schema markup valid—— 见下文结构化数据小节。结构化数据Schema 标记的两种落地方式角色文档与 seo-fundamentals skill 都强调 Schema 标记Dillinger 仓库恰好演示了 Next.js 下两种主流做法做法一根布局注入 WebApplication 标记。在 app/layout.tsx 中通过script typeapplication/ldjson注入type: WebApplication声明applicationCategory: DeveloperApplication、browserRequirements: Requires JavaScript、offers价格为 0以及featureListLive markdown preview、GitHub integration、PDF export 等八项能力。这类标记让搜索引擎把站点识别为免费开发者工具这一实体。做法二页面级 FAQPage 标记。在 app/page.tsx 中首页把 8 组高频问题Does Dillinger require a signup?、Can I sync with GitHub or Dropbox? 等序列化成FAQPage结构的 JSON-LD并随组件一起渲染app/page.tsx。FAQ 标记是 GEO 清单中FAQ sections present的直接体现——AI 引擎在聚合答案时非常依赖这种问答对结构。Content SEO Checklist页面内容要素内容 SEO 的五项检查聚焦单页要素角色文档给出的最佳实践是Title tags optimized (50-60 chars)—— 根布局 app/layout.tsx 使用title.defaulttitle.template%s | Dillinger的组合每个页面只负责提供主题词品牌后缀统一追加。Meta descriptions (150-160 chars)—— 首页 description 在 160 字符上下并覆盖live preview、cloud sync、No signup三个核心卖点app/page.tsx。H1-H6 hierarchy correct—— 首页 SEO 区块保持单一 H1Online Markdown Editor with Live Preview H2Why writers pick Dillinger、Frequently asked questions H3feature 条目的层级app/page.tsx。Internal linking structure—— 内容页统一由 app/(content)/layout.tsx/layout.tsx) 提供主导航Features / AI / Integrations / Guide / Compare / Open Editor首页底部再补充五个内容锚点app/page.tsx形成内链环。Image alt texts—— 站点图标均带有描述性 alt如og-image.png的alt: Dillinger - Online Markdown Editor with live preview。此外app/opengraph-image.tsx 用next/og在 Edge 运行时动态生成 1200×630 的分享图含 Live Preview · Cloud Sync · AI-Ready · Free 字样配合 app/layout.tsx 的openGraph与twittercard 配置保证社交平台与搜索引擎分享卡片完整。GEO Checklist为 AI 引用而优化的六个要素GEO 的目标不是排名而是被引用角色文档给出了六项检查FAQ sections present—— 首页渲染完整 FAQ 区块并配套 FAQPage JSON-LDapp/page.tsx。Author credentials visible—— 需要在作者署名页落实仓库通过 Person schema 预留能力见 seo-fundamentals 的 Schema 类型表。Statistics with sources—— 数据需标注来源避免无出处断言。Clear definitions—— 文档中每个概念如 LCP、GEO 本身都给出精确定义便于被抽取为实体。Expert quotes attributed—— 引用需具名归因。Last updated timestamps—— sitemap.ts 为每个 URL 提供lastModified: new Date()更新日志页保持weekly刷新频率这些都是时效性信号。Content That Gets Cited——AI 引擎为什么引用你ElementWhy AI Cites It引用原因Original statisticsUnique data独有数据无法从他处获得Expert quotesAuthority权威背书Clear definitionsExtractable可直接抽取为定义Step-by-step guidesUseful对读者有用Comparison tablesStructured天然结构化便于引用Dillinger 仓库中的 compare 页面/compare/page.tsx)Dillinger vs StackEdit、HackMD、Typora 等正是Comparison tables / structured comparison策略的实践每个竞品页都以标签式结论 对比论点组织结构清晰、易于被检索与引用。同样public/llms.txt 把 API 端点、CLI 命令、功能清单全部以 Markdown 标题层级呈现——Markdown 本身就是 LLM 的原生语言这份文件等于给 AI 引擎一份可直接解析的站点说明书。何时启用 SEO Specialist适用场景清单角色文档最后明确了该角色的使用边界当出现以下需求时应引入 SEO SpecialistSEO auditsSEO 审计Core Web Vitals optimization核心 Web 指标优化E-E-A-T improvementE-E-A-T 提升AI search visibilityAI 搜索可见性Schema markup implementationSchema 标记落地Content optimization内容优化GEO strategyGEO 策略结合角色声明tools: Read, Grep, Glob, Bash, Write、skills: clean-code, seo-fundamentals, geo-fundamentals它被设计为先读后改的分析型角色先通过 Read/Grep/Glob 审计现有页面与配置再用 Write 落地优化最后按清单复查。在 Dillinger 这类仓库中典型工作流就是对照本文的 Technical/Content/GEO 三份清单逐项核对 app/layout.tsx、app/sitemap.ts、public/robots.txt 与各内容页的 metadata。总结一份可直接复用的双目标优化路线图把角色文档与 Dillinger 源码合在一起可以得到一条完整可执行的优化路线先定基调内容面向用户User-first结构面向机器Dual-target拒绝技巧堆砌再立指标以 LCP 2.5s、INP 200ms、CLS 0.1 为性能红线用next/dynamic按需加载、骨架屏占位等手段保底夯实地基sitemap、robots.txt、canonical、HTTPS、移动端适配五项技术 SEO 缺一不可丰富实体注入 WebApplication / FAQPage 等 JSON-LD配齐 title、description、OG 图面向 AI增加 FAQ 区块、清晰定义、结构化对比表、时效时间戳与 llms.txt让 ChatGPT、Claude、Perplexity 都能稳定引用最后记住角色文档的收尾忠告——The best SEO is great content that answers questions clearly and authoritatively.最好的 SEO 就是清晰、权威地回答问题的优质内容。赞分享前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载相关推荐TensorZero 工具调用Tool Use实战用 Function Calling 配置天气聊天机器人并完成多轮对话TensorZero 工具调用Tool Use实战用 Function Calling 配置天气聊天机器人并完成多轮对话 TensorZero 是一个开源前端开发工具面向 ADK 技能写作的 On-Page SEO 清单content-research-writer 的 SEO 优化实战指南面向 ADK 技能写作的 On Page SEO 清单content research writer 的 SEO 优化实战指南 导读 在 agent skil示例工程Laverna 标签与任务清单实战指南从 Markdown 语法到源码级实现Laverna 标签与任务清单实战指南从 Markdown 语法到源码级实现 Laverna 是一款支持 Markdown 编辑器与加密功能的开源笔记应用可前端桌面应用上一篇实战指南kfyty725/loveqq-framework的BeanPostProcessor排序下一篇掌握优雅排版解锁EB Garamond 12开源字体的专业应用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考