基于URL哈希值动态修改静态HTML页面Meta标题可行吗？

不需要后端语言支持，仅用原生JavaScript就能根据URL路径和哈希值动态修改页面标题（包括Meta标题），具体实现如下：

实现思路 #

通过JS读取当前页面的location.pathname（路径部分）和location.hash（哈希部分），匹配预设的标题映射规则，动态修改<title>标签及相关Meta标签内容。同时监听哈希变化事件，确保用户在页面内切换锚点时标题也能同步更新。

代码示例 #

// 配置URL路径+哈希与标题的对应关系
const titleConfig = new Map([
  ['/page', 'home page'],
  ['/example#1', 'new meta title'],
  ['/example#29', 'a different title']
]);

// 统一设置标题的函数
function updatePageTitle() {
  const currentUrlSegment = window.location.pathname + window.location.hash;
  // 匹配标题，无匹配时用默认值
  const targetTitle = titleConfig.get(currentUrlSegment) || 'Default Title';

  // 修改页面主标题
  document.title = targetTitle;

  // 同步修改Open Graph Meta标题（可选，用于社交分享）
  const ogMeta = document.querySelector('meta[property="og:title"]');
  if (ogMeta) {
    ogMeta.setAttribute('content', targetTitle);
  }

  // 若需修改Twitter Meta标题，可添加以下代码
  // const twitterMeta = document.querySelector('meta[name="twitter:title"]');
  // if (twitterMeta) {
  //   twitterMeta.setAttribute('content', targetTitle);
  // }
}

// 页面加载完成后初始化标题
window.addEventListener('DOMContentLoaded', updatePageTitle);

// 监听哈希变化，锚点切换时自动更新标题
window.addEventListener('hashchange', updatePageTitle);

注意事项 #

• 无需引入jQuery或使用Ajax，原生JS即可完成，避免额外依赖
• 可根据需求扩展titleConfig中的映射规则，添加更多URL与标题的对应关系
• 如果页面不存在og:title等Meta标签，可先在HTML中添加对应的标签，再通过JS修改

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