简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment insérer une chaîne spécifique dans la balise méta de la page à l'aide de JavaScript
P粉904191507
P粉904191507 2023-09-16 20:17:07
0
1
625

J'en ai besoin pour l'optimisation du référencement. Le site Web sur lequel je travaille comporte un petit ensemble de pages générées dynamiquement, mais leurs métadonnées sont très génériques - même si ces 5 pages (différentes) ont un contenu relativement différent, leurs titres et descriptions sont les mêmes, et je veux éviter cette situation.

Je souhaite insérer le contenu d'une page spécifique dans sa balise méta via JavaScript.

La structure de la page est la suivante : 

<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>

Je souhaite injecter ce qui suit :

".intro" (dans cet exemple "Texte d'introduction ici") -> à la méta description de la page

et

"h1" (dans ce cas "titre du message") -> au méta-titre de la page

Faites en sorte que le résultat final ressemble à ceci : 

<head>

<title>文章标题</title>

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

</head>

En raison de mes compétences limitées en JavaScript, je ne peux actuellement modifier le titre et la méta description de la page que via : 

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

Évidemment, cette approche est trop statique et ne peut obtenir aucune donnée du contenu de la page.

Comment puis-je modifier les deux lignes de code ci-dessus pour injecter les chaînes requises dans le méta-titre et la description ?

P粉904191507
P粉904191507

répondre à tous(1)
P粉214089349
P粉2140893492023-09-17 18:02:06 1 plancher

J'éviterai de commenter les meilleures pratiques de référencement (car les commentaires abordent déjà bien ce sujet) et ne répondrai qu'à la partie code de votre question.

Il vous suffit de référencer cette meta元素并调整contentpropriété. 

<!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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！