Saya memerlukan ini untuk pengoptimuman SEO. Tapak web yang saya usahakan mempunyai set kecil halaman yang dijana secara dinamik, tetapi metadatanya sangat generik - walaupun 5 halaman (berbeza) ini mempunyai kandungan yang agak berbeza, tajuk dan penerangannya adalah sama, dan saya mahu Elakkan situasi ini.
Saya ingin memasukkan kandungan halaman tertentu ke dalam tag meta melalui JavaScript.
Struktur halaman adalah seperti berikut:
<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>
Saya nak inject yang berikut:
dan".intro" (dalam contoh ini "Teks pengenalan di sini") ->
"h1" (dalam kes ini "tajuk siaran") -> ke tajuk meta halamanJadikan keputusan akhir seperti ini:
<head> <title>文章标题</title> <meta name="description" content="这里是简介文本。"> </head>Disebabkan kemahiran JavaScript saya yang terhad, pada masa ini saya hanya boleh menukar tajuk dan perihalan meta halaman melalui:
document.title = "文章标题";
document.getElementsByTagName('meta')["description"].content = "这里是简介文本。";
Jelas sekali, pendekatan ini terlalu statik dan tidak boleh mendapatkan sebarang data daripada kandungan halaman. Bagaimanakah saya boleh mengubah suai dua baris kod di atas untuk menyuntik rentetan yang diperlukan ke dalam tajuk dan penerangan meta?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya akan mengelak daripada mengulas tentang amalan SEO terbaik (kerana ulasan sudah menangani perkara ini dengan baik) dan hanya menjawab bahagian kod soalan anda.
Anda hanya perlu merujuk
meta元素并调整contentharta tersebut.<!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>