Cómo Procesar Páginas Web para Obtener Metadatos

Spanish (Español) translation by James Kolce (you can also view the original English article)

Final product image — What You'll Be Creating

Introducción

Recientemente comencé a construir un sitio web comunitario encima de la plataforma Yii sobre el cual escribí en Programming With Yii2: Building Community with Comments, Sharing and Voting (Envato Tuts+). Quería que fuera simple agregar enlaces relacionados al contenido del sitio. Aunque es fácil para las personas el pegar URLs en formularios, se vuelve una pérdida de tiempo proveer también el título y fuente de la información.

En el tutorial de hoy, voy a mostrarte cómo hacer uso de PHP para procesar metadatos comunes de una página web y hacer más fácil para tus usuario participar y así construir servicios más interesantes.

Recuerda que participo en el hilo de comentarios abajo, ¡así que dime lo que piensas! También puedes encontrarme en Twitter @lookahead_io.

Comenzando

Primero, construí un formulario para que las personas agreguen enlaces pegando la URL. También creé un botón Lookup que usa AJAX para solicitar el procesamiento de la página web para información de metadatos.

Web Scraping - Create Link form with Lookup button

Al presionar Lookup se llama a la función Link::grab() via ajax:

$(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;
     }
  });
});

Procesando la Página

El código Link::grab() llama a fetch_og(). Esto imita a un rastreador para capturar la página y obtener los metadatos con DOMXPath:

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

Para mi escenario, he reemplazado las etiquetas og: arriba, pero el código abajo busca varios tipos de etiquetas.

$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;
    }

También puedes tomar otras etiquetas como palabras clave, descripción, etc. Entonces jQuery agrega el resultado al formulario para que el usuario lo envíe.

Web Scraping - Create Link with Resulting Title Filled In

Yendo Más Allá

También tengo una tabla de fuentes las cuales voy a desarrollar más después. Pero básicamente, cada vez que una nueva URL es agregada, la analizamos para obtener el dominio base del sitio web y lo ponemos en una tabla Source:

$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;
    }

Por ahora, estoy actualizando manualmente los nombres de las fuentes así se verán más limpios para el usuario, por ejemplo: ABC News, BoingBoing, y Vice:

Web Scraping - Item page with completed links and clean sources

Ojalá, en un siguiente episodio, revisaré cómo usar APIs disponibles gratuitamente para obtener el nombre de un sitio web. Es extraño para mi que no haya una metaetiqueta común para esto; si tan solo el Internet fuera perfecto.

Sitios de Subscripción

Algunos sitios como The New York Times no te dejan procesar los metadatos debido a sus sistemas de subscripción. Pero sí tienen una API. No es fácil para aprender porque tienen una confusa documentación, pero sus desarrolladores son rápidos para ayudar en Github. También espero escribir sobre el uso de la búsqueda de metadatos para los títulos de The New York Times en un episodio futuro.

Para Concluir

Espero que encuentres esta guia de procesamiento útil y hagas uso de ella en algún lugar de tus proyectos. Si te gustaría verla en acción, puedes probar algo de procesamiento web en mi sitio, Active Together.

Por favor comparte cualquier idea u opinión en los comentarios. Puedes también encontrarme en Twitter @lookahead_io directamente. Y asegurate de revisar mi página de instructor y mis otras series, Building Your Startup With PHP y Programming With Yii2.