javascript 如何检索资源的 og/meta 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19312942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I retrieve og/meta attributes of a resource?
提问by markzzz
I'm making an application that retrieve tweets on Twitter of a user.
我正在制作一个应用程序来检索用户 Twitter 上的推文。
Those feeds contains links to external resources, such as Artciles, Webpage or YouTube video.
这些供稿包含指向外部资源的链接，例如 Artciles、网页或 YouTube 视频。
I get trought the Twitter API the JSON of these feeds, but there arent included the og:attributes of the content. And I'd like to catch them and show to my website.
我通过 Twitter API 获取了这些提要的 JSON，但没有包含og:内容的属性。我想抓住它们并显示在我的网站上。
Such as thisquestion of StackOverflow:
比如这个StackOverflow 的问题：
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/[email protected]?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:
&lt;div class="button 17-facebook-dashboard-check"&gt;Elem1&lt;div&gt;
&lt;div class="button 18-google-dashboard-check"&gt;Elem2&lt;div&gt;
&lt;div class="button " />
<meta name="og:url" content="https://stackoverflow.com/questions/19001883/how-can-i-check-classes-that-ends-with"/>
I'd like to catch those informations for each shared resource on each tweet.
So I think I'll, for each tweet (which for me is a box) do an ajax request client side, download the html and parse it, retrieving og:title, og:description, og:typeand og:image.
我想为每条推文上的每个共享资源捕获这些信息。所以，我想我会为每个鸣叫（这对我来说是一个盒子）做一个Ajax请求的客户端，下载HTML和解析它，检索og:title，og:description，og:type和og:image。
Is this the best approch? What's about parse this data in Javascript/Jquery?
这是最好的方法吗？在 Javascript/Jquery 中解析这些数据怎么样？
回答by risk
These og:attributes are Open Graph Protocolattributes, there are many way to get these datas : you should check the codes of Open Graph Protocol parserwhich may be very usefull for you, and this PHP and jQuery Facebook link parser.
这些og:属性是开放图形协议属性，有很多方法可以获取这些数据：您应该检查开放图形协议解析器的代码，这可能对您非常有用，以及这个PHP 和 jQuery Facebook 链接解析器。
You can also check this StackOverflow Questionabout PHP parsing and this Opengraph PHP parserand dynamically use them with ajax calls.
您还可以查看有关 PHP 解析和Opengraph PHP 解析器的StackOverflow 问题，并 通过 ajax 调用动态使用它们。
Finally, this StackOverflow questionabout JQuery and pure JavaScript parsing is very interesting and could really help you.
最后，这个关于 JQuery 和纯 JavaScript 解析的StackOverflow 问题非常有趣，可以真正帮助你。
Hope you'll find what you need ! ;)
希望你能找到你需要的东西！;)
回答by 1kmonkies
DISCLAIMER: OpenGraph.io is a commercial product I work on and support.
免责声明：OpenGraph.io 是我从事并支持的商业产品。
As you mentioned, often times there are no OG tags to work with. There are all sorts of scenarios you can come across (e.g. encoding, misusing HTML tags, etc). If you want to handle the edge cases I'd recommend http://www.opengraph.io/
正如您所提到的，通常没有 OG 标签可供使用。您可能会遇到各种各样的情况（例如编码、滥用 HTML 标签等）。如果您想处理边缘情况，我建议您使用http://www.opengraph.io/
One of its major benefits is that it will infer information like the title or description (if you end up needing it) from the content on the page if OpenGraph tags don't exist.
它的主要好处之一是，如果 OpenGraph 标签不存在，它将从页面上的内容推断出标题或描述（如果您最终需要的话）等信息。
To get information about a site use (link should be URL encoded):
要获取有关站点使用的信息（链接应为 URL 编码）：
$.ajax('http://opengraph.io/api/1.0/site/http%3A%2F%2Fwww.washingtontimes.com%2F')
.done(function(data){
console.log(data);
});
Which will return something like:
这将返回如下内容：
{
"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": {...}
}
回答by Eric Hepperle - CodeSlayer2010
Anyone finding this question who is looking for a way to grab OG (open graph) metadata values using the browser console (Chrome or other) can do it using ES6 JavaScript.
任何发现这个问题并正在寻找使用浏览器控制台（Chrome 或其他）获取 OG（开放图形）元数据值的方法的人都可以使用 ES6 JavaScript 来完成。
Example:
例子：
To grab the "description" tag, (which will also return the site byline for WordPress website) use this one-liner code snippet I wrote to do just that:
要获取“描述”标签（这也将返回 WordPress 网站的网站署名），请使用我编写的这个单行代码片段来做到这一点：
document.querySelectorAll('meta[property="og:description"]')[0]
document.querySelectorAll('meta[property="og:description"]')[0]
This does not address grabbing stuff remotely off a server with Ajax, this is simply a browser-based solution.
这并没有解决使用 Ajax 从服务器远程抓取东西的问题，这只是一个基于浏览器的解决方案。
Here is another quick example. Let's say you want to grab all the metadata properties and store them in an object that can be passed. This is most easily tested on a good WordPress website, but should work wherever there are open graph meta tags.
这是另一个快速示例。假设您想要获取所有元数据属性并将它们存储在可以传递的对象中。这在一个好的 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);Disclaimer:
免责声明：
This is an answer to the question title "How can I retrieve og/meta attributes of a resource?"
这是对问题标题“如何检索资源的 og/meta 属性？”的回答。
