Chrome 扩展一键查看当前页面 SEO 信息：不用切页面，点一下全出来

做 SEO 和 GEO，经常要快速看一眼当前页面的标题、描述、canonical、H1、图片 alt、结构化数据这些基础信息。每次打开开发者工具手动找，麻烦。这篇教你写一个极简的 Chrome 扩展，点一下工具栏图标，当前页面的 SEO 关键信息直接列出来。

标题和描述的官方建议看这里：标题链接（title links）和搜索片段（snippets）。

扩展能查什么

标题及长度
meta description
canonical
H1 数量
图片总数、缺 alt 的数量
JSON-LD 结构化数据段数
链接总数

完整代码

扩展需要三个文件，放在同一个文件夹里，用 Chrome 的"加载已解压的扩展程序"加载。

manifest.json

json 复制代码

{
  "manifest_version": 3,
  "name": "SEO 信息速查",
  "version": "1.0",
  "description": "点击查看当前页面的 SEO 关键信息",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  body{width:380px;font-size:13px;line-height:1.7;padding:10px;color:#333;}
</style>
</head>
<body>
<div id="info">正在读取页面信息...</div>
<script src="popup.js"></script>
</body>
</html>

popup.js

javascript 复制代码

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  chrome.scripting.executeScript(
    { target: { tabId: tabs[0].id }, func: extractInfo },
    function (results) {
      if (results && results[0] && results[0].result) {
        document.getElementById('info').innerHTML = results[0].result;
      }
    }
  );
});

function extractInfo() {
  var title = (document.querySelector('title') || {}).textContent || '(无)';
  var desc = (document.querySelector('meta[name="description"]') || {}).content || '(无)';
  var canonical = (document.querySelector('link[rel="canonical"]') || {}).href || '(无)';
  var h1 = document.querySelectorAll('h1').length;
  var imgs = document.querySelectorAll('img').length;
  var noAlt = [...document.querySelectorAll('img')].filter(function (i) {
    return !(i.alt || '').trim();
  }).length;
  var jsonld = document.querySelectorAll('script[type="application/ld+json"]').length;
  var links = document.querySelectorAll('a').length;

  return '<b>标题：</b>' + title + '（' + title.length + ' 字）<br>' +
    '<b>描述：</b>' + desc + '<br>' +
    '<b>canonical：</b>' + canonical + '<br>' +
    '<b>H1 数量：</b>' + h1 + (h1 !== 1 ? '（建议 1 个）' : '') + '<br>' +
    '<b>图片：</b>' + imgs + ' 张，缺 alt ' + noAlt + ' 张<br>' +
    '<b>JSON-LD：</b>' + jsonld + ' 段<br>' +
    '<b>链接：</b>' + links + ' 个';
}

怎么用

建一个文件夹，把上面三个文件放进去
打开 Chrome，地址栏输入 chrome://extensions
打开右上角"开发者模式"
点"加载已解压的扩展程序"，选中那个文件夹
工具栏点扩展图标，就能看当前页面的 SEO 信息

三个最有用的检查点

H1 数量是不是 1。 一个页面该有一个主标题。扩展里 H1 数量这项，一眼就能看出页面标题结构有没有问题。0 个或好几个，都要改。

图片缺 alt 的张数。 alt 是谷歌理解图片的唯一文字信号，外贸站产品图多，缺 alt 最普遍。扩展直接告诉你缺几张，心里有数。

JSON-LD 段数。 GEO 时代，结构化数据是 AI 爬虫理解页面的重要依据。这项是 0，说明这页没有任何结构化数据，机器只能靠猜。

写在最后

这个扩展代码量很小，但把最常用的几个 SEO 检查点都打包进来了。装好之后，点一下图标就能看当前页面的基础信息，比每次都开开发者工具快得多。会了这个套路，你还可以往里加更多检查项。

延伸阅读：谷歌 SEO 系统实操。⬅️直接点击跳转

觉得有用欢迎点赞、收藏、转发，有疑问评论区留言或私信交流。