Ich brauche das für die SEO-Optimierung. Die Website, an der ich arbeite, verfügt über eine kleine Anzahl von Seiten, die dynamisch generiert werden, deren Metadaten jedoch sehr allgemein gehalten sind – obwohl diese 5 (verschiedenen) Seiten relativ unterschiedliche Inhalte haben, sind ihre Titel und Beschreibungen gleich, was ich vermeiden möchte diese Situation.
Ich möchte den Inhalt einer bestimmten Seite per JavaScript in deren Meta-Tag einfügen.
Der Aufbau der Seite ist wie folgt:
<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>
Ich möchte Folgendes spritzen:
.intro“ (in diesem Beispiel „Intro-Text hier“) –> zur Meta-Beschreibung der Seite
und
"h1" (in diesem Fall "Beitragstitel") -> zum Metatitel der Seite
Lassen Sie das Endergebnis so aussehen:
<head> <title>文章标题</title> <meta name="description" content="这里是简介文本。"> </head>
Aufgrund meiner eingeschränkten JavaScript-Kenntnisse kann ich den Titel und die Meta-Beschreibung der Seite derzeit nur ändern über:
document.title = "文章标题";
document.getElementsByTagName('meta')["description"].content = "这里是简介文本。";
Offensichtlich ist dieser Ansatz zu statisch und kann keine Daten aus dem Seiteninhalt gewinnen.
Wie kann ich die beiden oben genannten Codezeilen ändern, um die erforderlichen Zeichenfolgen in den Metatitel und die Beschreibung einzufügen?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我将避免对最佳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>