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

Question

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

这些供稿包含指向外部资源的链接，例如文章、网页或 YouTube 视频。

我通过 Twitter API 获得了这些提要的 JSON，但没有包含内容的 og: 属性。我想抓住它们并在我的网站上展示。

如thisStackOverflow的问题：

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

您还可以查看有关 PHP 解析的 StackOverflow Question 和 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 网站的站点署名），请使用我写的这个单行代码 sn-p 来做到这一点：

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);