Question

我正在制作一个在用户的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:title，og:description，og:type和og:image。

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

Answer 1

这些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非常有趣，可以真正帮助你。

希望你能找到你需要的东西！ ;）

Answer 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": {...}
}

Answer 3

任何发现此问题的人谁正在寻找一种使用浏览器控制台（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属性？”的答案。

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

3 个答案: