如何将动态生成的meta标签置于head顶部或覆盖Ghost CMS默认标签

方案一：直接覆盖Ghost自带的Meta标签 #

无需新增重复标签，先查找页面中已存在的对应Meta标签，直接修改其内容即可，既避免标签冗余，又能确保搜索引擎读取到你需要的内容：

// 处理description标签
const existingDescMeta = document.querySelector('meta[name="description"]');
const descriptionText = description.innerText;

if (existingDescMeta) {
  existingDescMeta.content = descriptionText;
} else {
  // 找不到对应标签时再创建新标签
  const descMeta = document.createElement('meta');
  descMeta.setAttribute('name', 'description');
  descMeta.content = descriptionText;
  document.head.appendChild(descMeta);
}

// 处理og:description标签
const existingOgDescMeta = document.querySelector('meta[property="og.description"]');
if (existingOgDescMeta) {
  existingOgDescMeta.content = descriptionText;
} else {
  const ogDescMeta = document.createElement('meta');
  ogDescMeta.setAttribute('property', 'og.description');
  ogDescMeta.content = descriptionText;
  document.head.appendChild(ogDescMeta);
}

方案二：将动态生成的标签插入到head顶部 #

如果不想覆盖原标签，希望自定义标签排在head最前面，可以使用insertBefore方法，把新创建的元素插入到head的第一个子元素之前：

const descriptionText = description.innerText;
const head = document.head;

// 创建并插入description标签到head顶部
const descMeta = document.createElement('meta');
descMeta.setAttribute('name', 'description');
descMeta.content = descriptionText;
head.insertBefore(descMeta, head.firstChild);

// 创建并插入og:description标签到head顶部
const ogDescMeta = document.createElement('meta');
ogDescMeta.setAttribute('property', 'og.description');
ogDescMeta.content = descriptionText;
head.insertBefore(ogDescMeta, head.firstChild);

注意：配合prerender.io使用时，要确保这段代码在页面内容加载完成后执行（比如放在DOMContentLoaded事件回调里），这样prerender.io才能抓取到正确的标签内容。

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