entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Leer metatags dinamicos de una pagina creada con angularjs

Tengo un campo tipo <p> con el cual quiero hacer un preview de un url con la libreria jquery.urllive pero para las paginas que tienen este tipo de metatags no los carga y el preview no se ve como quiero con la imagen y el texto.

<meta property="og:locale" ng-metainfo="metaOgLocale">
<meta property="og:type" ng-metainfo="metaOgType" content="website">
<meta property="og:title" ng-metainfo="metaOgTitle">
<meta property="og:description" ng-metainfo="metaOgDescription">
<meta property="og:url" ng-metainfo="metaOgUrl">
<meta property="og:site_name" content="ENTER.CO">
<meta property="og:image" ng-metainfo="metaOgImage">

Url = http://www.enter.co/especiales/entretenimiento-inteligente/xena-la-princesa-guerrera-no-va-a-regresar-de-los-noventa/

0voto

white comentado

Esto me parece que es es por que no se interpreta javascript, es decir necesitar emular un navegador, podrías usar phantomjs, te pregunto: es de tu propiedad enter.co? o tienes la intensión de obtener el contenido de varias paginas?

0voto

danfloben comentado

Saludos, enter.co no es mi propiedad, solo que en mi sitio al compartir este link de esta pagina en especial no me carga la imagen y la descripcion a comparacion de otras paginas

enter image description here

Asi es como esta en enter.co <meta property="og:url" ng-metainfo="metaOgUrl">
y asi es como esta en otra pagina donde si funciona <meta property="og:url" content="http://www.genbetadev.com/desarrollo-web/material-design-lite">

Gracias!

1 Respuesta

0voto

white Puntos75880

Tenía un problema similar, solo que el objetivo era mi proyecto, en mi proyecto con angular me preocupaba el seo, entonces lo que hago es trabajar con phanthomjs y detectar el agente de usuario, si viene de un motor de busqueda como Google, entonces primero hago un render de la pagina.

generalmente las paginas en angular.js que buscan posicionarse usan un método similar o el mismo método, intenta hacer una petición:

<?php

    $target_url = 'http://www.enter.co/especiales/entretenimiento-inteligente/xena-la-princesa-guerrera-no-va-a-regresar-de-los-noventa/';
    $user_agent = 'Googlebot/2.1 (+http://www.google.com/bot.html)';
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_USERAGENT, $user_agent);
    curl_setopt($curl, CURLOPT_URL, $target_url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $content = curl_exec($curl);
    curl_close($curl);

    echo htmlentities($content, ENT_QUOTES, 'UTF-8');

acá estoy haciendo una peticion GET con el agente de usuario 'Googlebot/2.1 (+http://www.google.com/bot.html)' a la url: http://www.enter.co/especiales/entretenimiento-inteligente/xena-la-princesa-guerrera-no-va-a-regresar-de-los-noventa/


cual es la salida? yo probé y recibo las etiquetas <meta> de esta forma:

<meta property="og:locale" ng-metainfo="metaOgLocale" class="ng-isolate-scope ng-scope" content="es_ES">

<meta property="og:type" ng-metainfo="metaOgType" content="article" class="ng-isolate-scope ng-scope">

<meta property="og:title" ng-metainfo="metaOgTitle" class="ng-isolate-scope ng-scope" content="‘Xena, la princesa guerrera’ no va a regresar de los noventa • ENTER.CO">

<meta property="og:description" ng-metainfo="metaOgDescription" class="ng-isolate-scope ng-scope" content="Xena, la princesa guerrera se quedará en los noventas (por ahora). El fin de semana todos los seguidores de ‘Xena, la princesa guerrera’ nos ilusionamos cu">

<meta property="og:url" ng-metainfo="metaOgUrl" class="ng-isolate-scope ng-scope" content="http://www.enter.co/especiales/entretenimiento-inteligente/xena-la-princesa-guerrera-no-va-a-regresar-de-los-noventa/">

<meta property="og:site_name" content="ENTER.CO">

<meta property="og:image" ng-metainfo="metaOgImage" class="ng-isolate-scope ng-scope" content="http://contenidos.enter.co/custom/uploads/2015/07/Xena-.jpg">

de esta forma no necesite un software como phantomjs para interpretar javascript, sino que el propio sitio me devuelve automatizado el resultado html

esto no quiere decir que sucederá con todas las páginas, otras pueden no hacer esto, en todo caso Phantomjs es un gran software que te permitirá obtener el contenido de paginas web.


EDIT: aca un ejemplo obteniendo las etiquetas <meta>

llamemos a este archivo 'scraper.php':

<?php

    $target_url = 'http://www.enter.co/especiales/entretenimiento-inteligente/xena-la-princesa-guerrera-no-va-a-regresar-de-los-noventa/';
    $user_agent = 'Googlebot/2.1 (+http://www.google.com/bot.html)';
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_USERAGENT, $user_agent);
    curl_setopt($curl, CURLOPT_URL, $target_url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $content = curl_exec($curl);
    curl_close($curl);

    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML($content);
    $dom_meta_tags = $dom->getElementsByTagName('meta');
    $meta_tags = [];

    foreach($dom_meta_tags as $dom_tag)
    {
        if ($dom_tag->hasAttribute("property")) {
            $meta_property = $dom_tag->getAttribute('property');
            $meta_content = $dom_tag->getAttribute('content');

            $meta_tags[$meta_property] = $meta_content;
        }
    }

    echo '<pre>' . print_r($meta_tags, 1) . '</pre>';
    // die(json_encode($meta_tags)); # api ?

¿Què puedes hacer posteriormente?

podrías guardar en la base de datos o en un archivo ( a modo de cache ) el contenido de la página o el contenido de las etiquetas, con esto, podrías hacer una peticion ajax a tu sitio para obtener información de una página.

$.ajax({
    method: 'GET',
    url: 'scraper.php,
    params: { url: 'http://enter.co' },
    success: function(data) {
        console.log(data); // el contenido de enter.co
    }
});

EDIT 2:

generalmente paginas con angular o similar usan la etiqueta:

<meta name="fragment" content="!">

esto les permite comprobar si un agente de un motor de busqueda como Google usa el parametro _escaped_fragment_

util para varios al momento de hacer un pre render

véase el código fuente de: http://www.enter.co/?_escaped_fragment_=

mas info: https://developers.google.com/webmasters/ajax-crawling/docs/specification#role-of-the-search-engine-crawler

0voto

danfloben comentado

Saludos White, excelente tu explicacion y gracias por el ejemplo, me funciono perfecto ahora solo debo integrarlo a mi pagina en yii hacer un llamado desde la libreria jquery.urlive.js , en caso de que estos valores esten vacios llamar al scraper y obtener los valores para que haga el preview.

Gracias!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta