Wie man Metadaten automatisch aus Webseiten ausliest

German (Deutsch) translation by Andreas Geibert (you can also view the original English article)

Final product image — What You'll Be Creating

Einleitung

Ich habe vor kurzen damit begonnen, eine Community-Seite, aufgesetzt auf dem Yii Framework, zu entwickeln. Dazu habe ich auch den Artikel Programming With Yii2: Building Community with Comments, Sharing and Voting (Envato Tuts+) verfasst. Ich wollte es einfach hinzufügen Links zu Inhalten auf der Website machen. Während es für Benutzer einfach ist, URLs Formulare einzufügen, wird es irgendwann doch sehr zeitaufwendig, wenn auch z.B. noch eine Titel oder weitere Informationen eingetragen werden müssen.

In unserem heutigen Tutorial zeige ich Dir, wie Du mit PHP Metadaten aus Webseiten automatisch auslesen kannst, damit Deine Benutzer mitmachen und interessante Services erstellen können.

Denk auch daran, dass Du im Diskussionsbereich weiter unten mitdiskutieren und mir schreiben kannst, was Du zu diesem Tutorial denkst und welche Vorschläge Du hast.Du kannst mich auch auf Twitter unter @lookahead_io anschreiben.

Los geht's

Erstelle zuerst ein Formular, in dem Deine Besucher Links eintragen können, indem Sie einfach eine URL einfügen. Zusätzlich habe ich noch einen Lookup Button erstellt, der über einen AJAX Request die jeweiligen Metadaten der eingegebenen Seite ausliest.

Web Scraping - Create Link form with Lookup button

Wird der Lookup Button gedrückt, wird die Funktion Link::grab() über Ajax aufgerufen:

$(document).on("click", '[id=lookup]', function(event) {
  $.ajax({
     url: $('#url_prefix').val()+'/link/grab',
     data: {url:   $('#url').val()},
     success: function(data) {
       $('#title').val(data);
       return true;
     }
  });
});

Die gewünschten Daten auf der Webseite auslesen

Die Link::grab() Funktion ruft fetch_og() auf. Diese Funktion verhält sich wie ein Crawler, der den Quelltext der Webseite aufruft und sich die Metadaten über die Verwendung von DOMXPath holt:

public static function fetch_og($url)
    {
        $options  = array('http' => array('user_agent' => 'facebookexternalhit/1.1'));
        $context  = stream_context_create($options);
        $data = file_get_contents($url,false,$context);
        $dom = new \DomDocument;
        @$dom->loadHTML($data);
        $xpath = new \DOMXPath($dom);
        # query metatags with og prefix
        $metas = $xpath->query('//*/meta[starts-with(@property, \'og:\')]');
        $og = array();
        foreach($metas as $meta){
            # get property name without og: prefix
            $property = str_replace('og:', '', $meta->getAttribute('property'));
            $content = $meta->getAttribute('content');
            $og[$property] = $content;
        }
        return $og;
    }

In meinem Beispiel habe ich die og: Tags ersetzt. Der folgende Code hingegen, sucht nach verschiedenen Typen von Tags:

$tags = Link::fetch_og($url);
      if (isset($tags['title'])) {
        $title = $tags['title'];
      } else if (isset($tags['metaProperties']['og:title']['value'])) {
        $title=$tags['metaProperties']['og:title']['value'];
      } else {
        $title = 'n/a';
      }
      return $title;
    }

Du kannst also auch andere Tags, wie z.B. Keywords, die Description und vieles mehr, auslesen. Der jQuery Aufruf fügt das Ergebnis dann im Formular hinzu, welches der Benutzer dann absenden kann.

Web Scraping - Create Link with Resulting Title Filled In

Einen Schritt weiter gehen

Zusätzlich habe ich noch eine Datenbank-Tabelle mit Webseiten-URLs erstellt, auf die ich später in dieser Serie noch eingehe. Grundsätzlich speichern wir die Basis-Domain einer Adresse in dieser Source Tabelle, nachdem wir die eingegebene URL daraufhin geparst haben:

$model->source_id = Source::add($model->url);
...
public static function add($url='',$name='') {
      $source_url = parse_url($url);
      $url = $source_url['host'];
      $url = trim($url,' \\');
      $s = Source::find()
        ->where(['url'=>$url])
        ->one();
      if (is_null($s)) {
        $s=new Source;
        $s->url = $url;
        $s->name = $name;
        $s->status = Source::STATUS_ACTIVE;
        $s->save();
      } else {
        if ($s->name=='') {
          $s->name = $name;
          $s->update();
        }
      }
      return $s->id;
    }

Vorerst speichern wir die Quellen-Namen so, dass Sie für den Benutzer gut lesbar sind. Beispiele sind ABC News, BoingBoing und Vice.

Web Scraping - Item page with completed links and clean sources

In einem späteren Tutorial werden wir dann hoffentlich noch sehen, wir wir frei verfügbare APIs verwenden, um den Namen einer Seite auszulesen. Ich finde es seltsam, dass es genau dafür keinen Metatag Standardgibt. Wenn das Internet doch perfekt wäre ...

Paywall Seiten

Manche Seiten, wie z.B. die New York Times, erlauben es nicht, dass man die Metadaten ihrer Seiten ausliest, da diese Unterseiten für das Lesen erst über ein Bezahlsystem freigeschaltet werden müssen. Aber sie stellen eine API zur Verfügung. Es ist nicht einfach diese API zu durchschauen, da die Dokumentation etwas verwirrend ist, die Entwickler helfen aber schnell via GitHub. Ich hoffe, dass ich zu diesem Thema, also dem Auslesen von Metadaten der Seiten der New York Times, in Zukunft auch noch ein Tutorial schreiben kann.

Fazit

Ich hoffe, dass Dir dieses Tutorial gefallen und geholfen hat und dass Du die erlernten Techniken bald in eigenen Projekten einsetzen kannst. Wenn Du die gezeigten Techniken einmal live und in Aktion sehen möchtest, kannst Du Dir meine Seite Active Together ansehen.

Wenn Du Fragen oder Anregungen hast, kannst Du diese in die Kommtare weiter unten eintragen. Du kannst mir auch direkt auf Twitter unter @lookahead_io anschreiben. Sie Dir auch unbedingt meine Instructor Seite und meine anderen Tutorialreihen, wie z.B. Building Your Startup With PHP und Programming With Yii2 an.