如何让谷歌索引iframe页面的<title>而非主页面<title>

• 直接用JavaScript动态修改主页面<title>
  当用户选中项目后，通过JS获取iframe内部页面的title内容，同步替换主页面的title标签值。不需要重新加载主页面，也不用重复执行复杂的列表查询SQL。示例代码：

  // 假设iframe的id是project-detail-iframe
  const iframe = document.getElementById('project-detail-iframe');
  iframe.onload = function() {
    document.title = iframe.contentDocument.title;
  };
  

  把这段逻辑绑定到项目选择的触发事件里，每次切换项目时自动同步title，谷歌爬虫能抓取到更新后的主页面title。

• 结合History API同步URL与页面状态
  配合修改title的操作，用pushState或replaceState更新浏览器地址栏的URL，给每个项目分配唯一的路径（比如/projects/123）。这样不仅主页面title对应项目内容，URL也能精准指向具体项目，谷歌会把不同URL状态识别为独立页面，同时用户刷新页面时，主页面可以先加载列表（仅一次），再根据URL参数加载对应项目的iframe内容。

• 给iframe补充SEO属性并动态更新主页面meta信息
  给iframe标签添加title属性，值设为当前项目的名称；同时在主页面里，通过JS动态修改<meta name="description">的内容，补充当前项目的核心描述。这些信息能辅助谷歌爬虫理解页面的实际内容，提升索引的准确性。

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