Share url on social network without pre-rendering in #angular

Share url on social network without pre-rendering in angular, is possible. I have hijacked, the social crawler request to a php script, through file.

The .htaccess file:

<IfModule mod_rewrite.c>
AddDefaultCharset UTF-8
RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule ^blog/post/(.*)$ /socialshare.php?slug=$1 [NC,L]

RewriteRule ^ - [L]
RewriteRule ^ /


example php file on root directory:


$slug = $_GET['slug'];

$data = json_decode(file_get_contents('./assets/data/blog-posts.json'));

$data = array_reverse($data);

foreach ($data as $key => $value) {
    if($value->slug == $slug){
        $post = $value;


<?php if(isset($post)){ ?>
<!doctype html>
<html lang="it">

    <meta charset="utf-8">
    <meta name="description" content="<?=$post->description?>" />
    <meta property="og:locale" content="it_IT" />
    <meta property="og:title" content="<?=$post->title?>" />
    <meta property="og:type" content="article" />
    <meta property="og:description"
        content="<?=$post->description?>" />
    <meta property="og:url" content="https://<?=$_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']?>" />
    <meta property="og:site_name" content="SiteName" />
    <meta property="og:image" content="https://<?=$_SERVER['SERVER_NAME']?>/assets/image.png" />
    <meta property="og:image:secure_url" content="https://<?=$_SERVER['SERVER_NAME']?>/assets/image.png" />
    <meta name="twitter:description"
        content="<?=$post->description?>" />
    <meta name="twitter:title" content="<?=$post->title?>" />
    <meta name="twitter:image" content="https://<?=$_SERVER['SERVER_NAME']?>/assets/image.png" />
    <link rel="icon" type="image/x-icon" href="favicon.ico">



<?php } ?>

Leave a Reply

Your email address will not be published. Required fields are marked *