Wie kann ich abrufen og/meta-Attribute einer Ressource?

Diese og: Attribute sind Open Graph Protocol Attribute, es gibt viele Weg, um diese Daten : Sie sollten überprüfen, die codes der Open Graph Protokoll-parser, die sein kann sehr nützlich für Sie, und diese PHP-und jQuery-Facebook link-parser.

Können Sie auch überprüfen, diese StackOverflow-Frage über PHP Parsen und diese Opengraph PHP-parser und dynamisch nutzen Sie mit ajax-Aufrufe.

Schließlich StackOverflow-Frage über JQuery und Reine JavaScript-parsing ist sehr interessant und könnte wirklich helfen.

Hoffen, Sie finden, was Sie brauchen ! 😉

Jemand finden, diese Frage, die auf der Suche nach einem Weg zu schnappen OG (open graph) - Metadaten-Werte mit Hilfe der browser-Konsole (Chrome oder andere) tun können, es mit ES6 JavaScript.

Beispiel:

Zu greifen, die "description" - tag, (die wird auch wieder die Seite "Koordinaten" für die WordPress-website) verwenden Sie diese one-liner code-snippet, das ich schrieb, genau das zu tun:

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

Diese nicht Adresse packte Sachen aus der Ferne aus einem server mit Ajax, das ist einfach eine browser-basierte Lösung.

Hier ist ein weiteres kurzes Beispiel. Lassen Sie uns sagen, Sie wollen, greifen Sie alle Metadaten-Eigenschaften und speichern Sie Sie in einem Objekt übergeben werden kann. Dies wird am einfachsten getestet auf einem guten WordPress-website, aber sollte funktionieren überall dort, wo open graph meta-tags.

JS:

/*

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

Haftungsausschluss:

Dies ist eine Antwort auf die Frage-Titel "Wie kann ich abrufen og/meta-Attribute einer Ressource?"