使用 jQuery 设置动态 Meta 标签和 Open Graph 标签
[英]Set dynamic Meta Tags and Open Graph tags using jQuery
问题描述
I'm trying to add dynamic tags using jQuery but it seems not to work.
我正在尝试使用 jQuery 添加动态标签，但似乎不起作用。 I load my script directly after loading the page.我在加载页面后直接加载我的脚本。
This is my HTML这是我的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
This is how I add the tags on jQuery.这就是我在 jQuery 上添加标签的方式。
$(function() {
$('head').append('<meta property="og:type" content="profile"/>');
$('head').append('<meta property="og:url" content=""/>');
$('head').append("<meta property='og:title' content="+text+"'/>");
$('head').append("<meta property='og:image' content="+imageUrl+"'/>");
});
Why I'm doing this?我为什么要这样做？ After the user is visiting the page example.com/?link=HDI635 I would like to present a small overview of the content.在用户访问页面example.com/?link=HDI635我想example.com/?link=HDI635介绍一下内容。 So I make a API call using jQuery after that I would like to add the values from the API response to the Open Graph tags.因此，我使用jQuery进行 API 调用，然后我想将 API 响应中的值添加到 Open Graph 标签。
3 个解决方案
解决方案1
8 已采纳 2017-05-29 11:44:57
If the purpose of your tags is for generating content previews on sites like Facebook, then using jQuery will probably not work because most web crawlers do not run JavaScript, they simply just download the HTML and read it as it is.如果您的标签的目的是在 Facebook 等网站上生成内容预览，那么使用 jQuery 可能不起作用，因为大多数网络爬虫不运行 JavaScript，它们只是下载 HTML 并按原样读取它。
For it to work correctly, you would need to generate the tags on server side.为了使其正常工作，您需要在服务器端生成标签。
You can debug your tags using Facebook's sharing debugger: https://developers.facebook.com/tools/debug/您可以使用 Facebook 的共享调试器调试您的标签： https : //developers.facebook.com/tools/debug/
解决方案2
3 2018-08-03 14:07:38
As Alan stated, most web crawlers do not run JavaScript, they simply just download the HTML and read it as it is.正如 Alan 所说，大多数网络爬虫不运行 JavaScript，它们只是下载 HTML 并按原样读取它。 As of today, FB crawler doesn't.截至今天，FB 爬虫还没有。
A good solution for this is having a server (nginx is enough) to detect the User Agent of the visitor and if it is Facebook's UA ( https://developers.facebook.com/docs/sharing/webmasters/crawler/ ) serve a simple HTML with the OG tags.一个很好的解决方案是有一个服务器（nginx 就足够了）来检测访问者的用户代理，如果它是 Facebook 的 UA（ https://developers.facebook.com/docs/sharing/webmasters/crawler/ ）带有OG标签的简单HTML。 Else, serve the web-app.否则，提供网络应用程序。
解决方案3
0 2021-02-12 14:43:16
You can update meta tags with JavaScript like that:您可以像这样使用 JavaScript 更新元标记：
const title = "your title;
const description = "your description";
$('meta[name="description"]').attr('content', description);
$('meta[property="og:title"]').attr('content', title);
$('meta[property="og:description"]').attr('content', description);
// etc.
Google DOES read and run JavaScript stuff and it does at least read the meta-name-tags.谷歌确实读取和运行 JavaScript 的东西，它至少会读取元名称标签。 See https://developers.google.com/search/docs/guides/javascript-seo-basics请参阅https://developers.google.com/search/docs/guides/javascript-seo-basics
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.