我需要这个来进行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粉2140893492023-09-17 18:02:06
我将避免对最佳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>