Skip to main content
Recompensa finalizada con 50 de reputación otorgada por adrianojosue
El autor especificó en el chat que no usa la extensión .json en la url
Origen Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105
<?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.json";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
}
  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.json 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.json
    
<?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.json";   //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);
    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
}
  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.json por el 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.json
    
<?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
}
  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
    
Origen Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105

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.json";   //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);
    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.json por el 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.json