简体中文(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
623

我需要這個來進行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學習者快速成長！