1

He implementado este ejemplo pero no me funciona, creo que es porque el código php, al igual que el código del .htaccess, busca los archivos .json por id numérico y mis archivos .json no tienen id numérico.

Los nombro de este modo, por ejemplo: este-es-uno-de-mis-archivos.json.

¿Cómo puedo hacer que funcione sin que los archivos tengan que estar numerados, claro, si ese es el problema?

Código PHP: (Captura del código)

<?php

$SITE_ROOT = "http://example.com";

$jsonData = getData($SITE_ROOT);
makePage($jsonData, $SITE_ROOT);

function getData($siteRoot) {

    $id = ctype_digit($_GET['id']) ? $_GET['id'] : 1;   //<-- Aquí es donde, creo, que llama a los archivos json por id numerado

    $rawData = file_get_contents($siteRoot.'json-files/'.$id);
    return json_decode($rawData);
}

function makePage($data, $siteRoot) {
    $imageUrl = $siteRoot . $data->image;
    $pageUrl = $siteRoot . "url-example/" . $data->id;
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title><?php echo $data->title; ?></title>

        <!-- Twitter summary card metadata -->
        <meta property="twitter:card" content="summary" />
        <meta property="twitter:site" content="@michlbrmly" />
        <meta property="twitter:title" content="<?php echo $data->title; ?>" />
        <meta property="twitter:description" content="<?php echo $data->description; ?>" />
        <meta property="twitter:image" content="<?php echo $imageUrl; ?>" />
        <meta property="twitter:url" content="<?php echo $pageUrl; ?>" />

        <!-- Facebook, Pinterest, Google Plus and others make use of open graph metadata -->
        <meta property="og:title" content="<?php echo $data->title; ?>" />
        <meta property="og:description" content="<?php echo $data->description; ?>" />
        <meta property="og:image" content="<?php echo $imageUrl; ?>" />
        <meta property="og:type" content="article" />
        <meta property="og:site_name" content="My Favourite Albums" />
        <meta property="og:url" content="<?php echo $pageUrl; ?>" />

    </head>
    <body>
    <p><?php echo $data->description; ?></p>
    <img src="<?php echo $imageUrl; ?>">
    </body>
    </html>
<?php
}

.htaccess: (Captura del código)

<ifModule mod_rewrite.c>
 RewriteEngine On

# allow social media crawlers to work by redirecting them to a server-rendered static version on the page
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule url-example/(\d*)$ http://example.com/static-page.php?id=$1 [P]
# ^^^^^^ Aquí redirecciona los crawlers hacia el archivo php con id, creo, que numerado


# Required to allow direct-linking of pages so they can be processed by Angular
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]

</ifModule>
3
  • Sería preferible que no utilizaras las capturas de pantalla para introducir código en tu pregunta. Copia y pega el código relevante y luego le puedes dar formato seleccionandolo y dándole a Cntrl + K. Commented el 30 oct. 2016 a las 22:36
  • @Error404 he colocado las capturas porque algunas partes del código php se muestran como texto normal y no como código, y no se ve bien. si quieres puedes ver el código en este enlace a github Commented el 31 oct. 2016 a las 1:10
  • @adrianojosue Las imágenes, no sólo hacen imposible copiar tu código para probarlo, sino que también pueden ser difíciles de leer (pensemos en celulares que no definan bien la imagen o en personas con problemas de vista). ¿Podrías por favor incluir el código y el .htaccess como texto? Encontrarás el enlace para editar debajo de tu pregunta. Luego de pegarlo, hay que seleccionar el código completamente y hacer click en el botón { }.
    – Mariano
    Commented el 2 nov. 2016 a las 4:49

2 respuestas 2

2
+50

Las dos líneas que marcaste es exactamente donde sólo está permitiendo números.

.htaccess

Reemplazamos \d* por los caracteres que quieras permitir:

RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule ^url-example/([-._a-z0-9]+)$ http://example.com/static-page.php?id=$1 [NC,P]

* Estoy asumiendo que se permiten letras (sin ñ ni acentos), números, y los símbolos: -, . y _.
* Se pueden agregar más si se quiere.


static-page.php

Cambiamos la validación por la misma expresión regular que en .htaccess:

$id = $_GET['id'];
if (!preg_match('/\A[-._a-z0-9]+\z/i', $id)) {
    $id = $JSON_DEFAULT;
}

* En el código original, si el id era incorrecto, se usaba 1.json.
* Para reemplazarlo, definí la constante $JSON_DEFAULT, así podrás elegir el que quieras.



Código Final

<ifModule mod_rewrite.c>
 RewriteEngine On

 # allow social media crawlers to work by redirecting them to a server-rendered static version on the page
 RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
 RewriteRule ^url-example/([-._a-z]+)$ http://example.com/static-page.php?id=$1 [NC,P]

 # Required to allow direct-linking of pages so they can be processed by Angular
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_URI} !index
 RewriteRule (.*) index.html [L]

</ifModule>
<?php
/**
 * This file creates a static page for crawlers such as Facebook or Twitter bots that cannot evaluate JavaScript.
 *
 * Created by PhpStorm.
 * User: Michael
 * Date: 30/06/14
 * Time: 14:31
 */
$SITE_ROOT = "http://example.com/";                   //Cambiarlo por el sitio de producción (debe llevar / al final)
$JSON_DEFAULT = "este-es-uno-de-mis-archivos";   //Archivo json usado si el formato de id es incorrecto
$jsonData = getData($SITE_ROOT);
makePage($jsonData, $SITE_ROOT);

function getData($siteRoot) {
    global $JSON_DEFAULT;

    $id = $_GET['id'];
    if (!preg_match('/\A[-._a-z0-9]+\z/i', $id)) {
        $id = $JSON_DEFAULT;  // Algún archivo json en caso de que el formato de id sea incorrecto
    }
    $rawData = file_get_contents($siteRoot.'json-files/'.$id.'.php');
    return json_decode($rawData);
}
function makePage($data, $siteRoot) {
    $imageUrl = $siteRoot . $data->image;
    $pageUrl = $siteRoot . "url-example/" . $data->id;
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title><?php echo $data->title; ?></title>

        <!-- Twitter summary card metadata -->
        <meta property="twitter:card" content="summary" />
        <meta property="twitter:site" content="@michlbrmly" />
        <meta property="twitter:title" content="<?php echo $data->title; ?>" />
        <meta property="twitter:description" content="<?php echo $data->description; ?>" />
        <meta property="twitter:image" content="<?php echo $imageUrl; ?>" />
        <meta property="twitter:url" content="<?php echo $pageUrl; ?>" />

        <!-- Facebook, Pinterest, Google Plus and others make use of open graph metadata -->
        <meta property="og:title" content="<?php echo $data->title; ?>" />
        <meta property="og:description" content="<?php echo $data->description; ?>" />
        <meta property="og:image" content="<?php echo $imageUrl; ?>" />
        <meta property="og:type" content="article" />
        <meta property="og:site_name" content="My Favourite Albums" />
        <meta property="og:url" content="<?php echo $pageUrl; ?>" />

    </head>
    <body>
    <p><?php echo $data->description; ?></p>
    <img src="<?php echo $imageUrl; ?>">
    </body>
    </html>
<?php
}


Consideraciones

  1. Se debe reemplazar http://example.com/ por la url del sitio de producción.
  2. Se debe reemplazar este-es-uno-de-mis-archivos por el archivo JSON (sin la extensión .json) que se utilice cuando el id tenga un formato incorrecto.
  3. Si no se está usando mod_proxy, cambiar esta línea del .htaccess

    RewriteRule ^url-example/([-._a-z0-9]+)$ http://example.com/static-page.php?id=$1 [NC,P]
    

    por la línea sin la opción P

    RewriteRule ^url-example/([-._a-z0-9]+)$ http://example.com/static-page.php?id=$1 [NC,L]
    
  4. Este redireccionamiento sólo ocurre cuando es visitado por un crawler de redes sociales. En caso de que se quiera probar desde un navegador, comentar la 5ta línea del .htaccess.

  5. La estructura del sitio debería ser:

    http://example.com/
    ├── json-files/
    │   ├── images/
    │   │   ├── imagen-01.jpg
    │   │   ├── otra.png
    │   │   └── una_mas.gif
    │   ├── este-es-uno-de-mis-archivos.json
    │   ├── otro_json.de-imagenes.json
    │   └── se-entiende.json
    ├── .htaccess
    └── static-page.php
    
  6. Ejemplo de url:

    http://example.com/url-example/este-es-uno-de-mis-archivos
    
3
  • he implementado todo como me explicaste en tu ejemplo, los crawlers se redirigen al static-page.php pero, no se porque, no se muestran los datos de los archivos .json, como si no los encontraran y eso que la ruta hacia ellos esta correcta. qué crees que suceda? Commented el 2 nov. 2016 a las 19:10
  • @adrianojosue Quizás se hace un poco largo para ver en comentarios. Hablémoslo en este chat: chat.stackexchange.com/rooms/47893/…
    – Mariano
    Commented el 2 nov. 2016 a las 19:26
  • Resumen del chat: el script original esperaba que se pase la URL con la extensión .json, el autor quería pasarla sin la extensión y modifiqué la respuesta para tenerlo en cuenta.
    – Mariano
    Commented el 2 nov. 2016 a las 20:34
0

He tenido este problema hace poco tiempo, el problema es que los bots de redes sociales no ejecutan javascript y por eso no detectan la información, la solución pasaba por montar un html plano y pasarlo por el backend, donde se pinta la información en dicho html.

En esta página puedes encontrar una guía que debería funcionarte. :)

http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

Saludos!

3
  • Gracias por responder, si te fijas en las imágenes, es el mismo método que estoy utilizando, y no me funciona, "creo" que es, porque el código que busca los archivos .json lo hace numéricamente, ejemplo: 1.json, 2.json. Y mis archivos .json no están de ese modo, están así: ejemplo-de-mis-archivos.json, pero no se bien si en realidad es por eso. Este es el código que, creo, que busca los archivos numéricamente: $id = ctype_digit($_GET['id']) ? $_GET['id'] : 1; Commented el 31 oct. 2016 a las 16:18
  • Hola @DaniTortosa. ¡Bienvenido a Stack Overflow en español! En el código de la pregunta no hay ningún código javaScript. ¿Tu respuesta es a esta pregunta?
    – Mariano
    Commented el 2 nov. 2016 a las 4:53
  • Claro @Mariano, en el título pone angularjs, y también en los tags, y angularjs funciona con javascript, de hecho, el "js" de angularjs es por javascript. ;) Commented el 8 nov. 2016 a las 15:25

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.