简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
使用JavaScript将特定字符串插入到页面元标签的方法
P粉904191507
P粉904191507 2023-09-16 20:17:07
0
1
620

我需要这个来进行SEO优化。我正在处理的网站上有一小部分页面是动态生成的，但它们的元数据非常通用 - 即使这5个（不同的）页面具有相对不同的内容，它们的标题和描述也是相同的，我想要避免这种情况。

我想要通过JavaScript将特定页面的内容插入到其元标签中。

页面的结构如下：

<html>
<head>
  <title>这是我想要替换的当前标题</title>
  <meta name="description" content="这是我想要替换的当前描述。">
</head>
<body>
  <h1>文章标题</h1>
  <div class="intro">
    <p>这里是简介文本</p>
  </div>
  <div class="content">
    <p>这里是内容</p>
    <p>更多内容</p>
    <p>还有更多内容</p>
  </div>
</body>
</html>

我想要注入以下内容：

".intro"（在这个例子中是"这里是简介文本"） -> 到页面的元描述

和

"h1"（在这个例子中是"文章标题"） -> 到页面的元标题

使最终结果看起来像这样：

<head>

<title>文章标题</title>

<meta name="description" content="这里是简介文本。">

</head>

由于我的JavaScript技能有限，目前我只能通过以下方式更改页面的标题和元描述：

document.title = "文章标题";
document.getElementsByTagName('meta')["description"].content = "这里是简介文本。";

显然，这种方式过于静态，无法从页面内容中获取任何数据。

我该如何修改上述两行代码，以便将所需的字符串注入到元标题和描述中？

P粉904191507
P粉904191507

全部回复(1)
P粉214089349
P粉2140893492023-09-17 18:02:06 1 楼

我将避免对最佳SEO实践发表评论（因为评论已经很好地解决了这个问题），只回答你问题中的代码部分。

你只需要引用那个meta元素并调整content属性。

<!doctype html>
<html>
  <head>
    <title>文章标题</title>
    <meta name="description" content="这里是简介文字。">
  </head>
  <body>
  
    <!-- 将这个<script>标签放在闭合的body标签之前，
         这样它会在所有页面HTML解析完之后运行。 -->
    <script>
      // 获取对meta元素的引用：
      const meta = document.querySelector("meta[name='description']");
      
      console.log(meta);  // 用于测试
      meta.content = "新的内容";  // 将其设置为你需要的任何值。
      console.log(meta);  // 用于测试      
    </script>
  </body>
</html>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！