使用jQuery设置动态Meta标签和Open Graph标签 [英] Set dynamic Meta Tags and Open Graph tags using jQuery

查看:394
本文介绍了使用jQuery设置动态Meta标签和Open Graph标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用jQuery添加动态标签,但似乎不起作用.我在加载页面后直接加载了脚本.

I'm trying to add dynamic tags using jQuery but it seems not to work. I load my script directly after loading the page.

这是我的HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
  </body>
</html>

这就是我在jQuery上添加标签的方式.

This is how I add the tags on 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+"'/>");
  });

为什么我要这样做?用户访问页面example.com/?link=HDI635之后 我想介绍一下内容.因此,在使用jQuery进行API调用之后,我想将API响应中的值添加到Open Graph标记中.

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

推荐答案

如果标记的目的是在Facebook等网站上生成内容预览,则使用jQuery可能无法正常工作,因为大多数网络抓取工具均未运行JavaScript,因此它们只需下载HTML并按原样阅读即可.

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.

要使其正常工作,您需要在服务器端生成标签.

For it to work correctly, you would need to generate the tags on server side.

您可以使用Facebook的共享调试器来调试标签: https://developers.facebook.com/tools/debug/

You can debug your tags using Facebook's sharing debugger: https://developers.facebook.com/tools/debug/

这篇关于使用jQuery设置动态Meta标签和Open Graph标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆