如何检索资源的og / meta属性?

时间:2013-10-11 07:48:28

标签: javascript jquery html opengraph meta

我正在制作一个在用户的Twitter上检索推文的应用程序。

这些Feed包含指向外部资源的链接,例如Artciles,网页或YouTube视频。

我在Twitter API中提供了这些Feed的JSON,但是没有包含内容的og:属性。我想抓住它们并在我的网站上展示。

例如StackOverflow的this问题:

<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="How can I check classes that ends with?" />
<meta name="og:description" content="I have some elements such as:
    &amp;lt;div class=&quot;button 17-facebook-dashboard-check&quot;&amp;gt;Elem1&amp;lt;div&amp;gt;
    &amp;lt;div class=&quot;button 18-google-dashboard-check&quot;&amp;gt;Elem2&amp;lt;div&amp;gt;
    &amp;lt;div class=&quot;button " />
<meta name="og:url" content="https://stackoverflow.com/questions/19001883/how-can-i-check-classes-that-ends-with"/>

我想在每条推文上捕获每个共享资源的信息。 所以我想我会为每条推文(对我来说都是一个盒子)做一个ajax请求客户端,下载html并解析它,检索og:titleog:descriptionog:typeog:image

这是最好的方法吗?什么是在Javascript / Jquery中解析这些数据?

3 个答案:

答案 0 :(得分:10)

这些og:属性是Open Graph Protocol属性,有很多方法可以获取这些数据:您应该检查Open Graph Protocol parser的代码,这些代码可能对您非常有用,而且PHP and jQuery Facebook link parser 3}}。

您还可以查看StackOverflow Question关于PHP解析和Opengraph PHP parser的问题,并通过ajax调用动态使用它们。

最后,关于JQuery和纯JavaScript解析的这个StackOverflow question非常有趣,可以真正帮助你。

希望你能找到你需要的东西! ;)

答案 1 :(得分:2)

免责声明:OpenGraph.io是我工作和支持的商业产品。

正如您所提到的,通常没有OG标签可供使用。您可以遇到各种各样的场景(例如编码,滥用HTML标签等)。如果您想处理边缘情况,我建议http://www.opengraph.io/

它的一个主要好处是,如果OpenGraph标签不存在,它将从页面上的内容推断出标题或描述等信息(如果你最终需要它)。

要获取有关网站使用的信息(链接应为URL编码):

$.ajax('http://opengraph.io/api/1.0/site/http%3A%2F%2Fwww.washingtontimes.com%2F')
  .done(function(data){
    console.log(data);
  });

将返回类似的内容:

{
  "hybridGraph": {
    "title": "Washington Times - Politics, Breaking News, US and World News",
    "description": "The Washington Times delivers breaking news and commentary on the issues that affect the future of our nation.",
    "image": "http://twt-assets.washtimes.com/v4/images/logo-twt.4b20fb5d7b29.svg",
    "url": "http://www.washingtontimes.com/",
    "type": "site",
    "site_name": "Washington Times "
  },
  "openGraph": {...},
  "htmlInferred": {...},
  "requestInfo": {...}
}

答案 2 :(得分:0)

任何发现此问题的人谁正在寻找一种使用浏览器控制台(Chrome或其他)来获取OG(开放图)元数据值的方法,都可以使用ES6 JavaScript来实现。

示例:

要获取“描述”标签(该标签还将返回WordPress网站的站点副标题),请使用我编写的以下单行代码片段:

document.querySelectorAll('meta[property="og:description"]')[0]

这不能解决使用Ajax从服务器远程获取内容的问题,这只是基于浏览器的解决方案。

这是另一个快速示例。假设您要获取所有元数据属性并将它们存储在可以传递的对象中。在优质的WordPress网站上,这最容易测试,但是在有开放图元标记的地方都可以使用。

/*

10/01/18

Eric Hepperle

Grab all OG Meta Tags values on a webpage

Total time spent to create and test: 1 hr.

*/

console.clear();

// Store all our properties in one object
var ogWebsite = {};

//var metas = document.querySelectorAll('meta[property="og:description"]')[0]
var metaTags = document.querySelectorAll('meta');

var propTagCount = 0;

[...metaTags].forEach(function(tag, i) {
    
    // console.log(tag);
    
    if (tag.hasAttribute('property')) {
        
        var propName = tag.getAttribute('property');
        // console.log("%c\t%s", "background: orange; color: black", propName);
        console.log(propName);

        // Get the value of the OG property attribute
        var ogMetaValue = document.querySelectorAll("meta[property='" + propName +"']")[0].content;
        
        console.log("%cogMetaValue: %s","background: purple; color: white;", ogMetaValue);
        
        // Add property to ogWebsite object. We can do this because
        //  ES6 (2015) allows varible keys with object literals.
        //  To work, you must use bracket "[]" notation instead of dots.
        ogWebsite[propName] = ogMetaValue;
        
        ++propTagCount;        
    }
    
    
});

console.log("%cTotal meta tags: %s", "background: bisque; color: brown; font-weight: bold;", metaTags.length);
console.log("%cTotal meta tags with 'property' attribute: %s", "background: cadetblue; color: white; font-weight: bold;", propTagCount);

// Display the final object:
console.log(ogWebsite);

免责声明:

这是对标题“如何检索资源的og / meta属性?”的答案。