AngularJS: "angular-update-meta" does not work when sharing URLs on social networks

Navigation
1

What happens is that for example, Facebook takes the static metadata from the index.html and not the ones that update angular-update -meta This is my project, you can see the source code, it's not minified: geekmox.com . In the Facebook Sharing Debugger you can verify that the meta tags you choose are those of the index.html and not updated I hope you can help me, I do not know what to do.

These are the static Meta tags that I have in the index.html 

<head>
<meta property="og:type" content="website">
<meta property="og:title" content="geekmox.com">
<meta property="og:description" content="Noticias sobre ciencia y tecnología en una interfaz minimalista y fácil de utilizar.">
<meta property="og:url" content="http://geekmox.com/news">
<meta property="og:image" content="http://geekmox.com/jpg/geekmox-og-cover.0.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@geekmox">
<meta name="twitter:title" content="geekmox.com">
<meta name="twitter:description" content="Noticias sobre ciencia y tecnología en una interfaz minimalista y fácil de utilizar.">
<meta property="twitter:image" content="http://geekmox.com/jpg/geekmox-og-cover.0.jpg">
</head>

These are in the template where I want to update the "meta tags", in this case they are in the template of the articles, or the news. 

<update-meta property="og:type" content="article"></update-meta>
<update-meta property="og:title" content="{{item.title}}"></update-meta>
<update-meta property="og:description" content="{{item.description}}"></update-meta>
<update-meta property="og:url" content="http://geekmox.com/news/{{item.id}}"></update-meta>
<update-meta property="og:image" content="http://geekmox.com/{{item.images[0]}}"></update-meta>
<update-meta name="twitter:title" content="{{item.title}}"></update-meta>
<update-meta name="twitter:description" content="{{item.description}}"></update-meta>
<update-meta property="twitter:image" content="http://geekmox.com/{{item.images[0]}}"></update-meta>

When I open the browser development tool to see the DOM I can see that the meta tags are updated correctly, but when I share a link to a news item, for example on Facebook or Twitter, the publication appears with the main data, as if "angular-update-meta" had not updated them, but if you check the DOM of my web if they are updated.

    
asked by adrianojosue 28.07.2016 в 13:49
source

1 answer

0

The crawler of Facebook does not execute the JavaScript of the page, therefore AngularJS can not do its magic and Facebook only reads the static meta tags and does not see the values that are updated from JavaScript ( that you can see by inspecting the page when it has been fully loaded).

A possible solution requires more than just AngularJS: from the back-end you would need to fill in those values instead of using JavaScript. As you can see in some solutions online to this problem, an alternative would be to detect if the client requesting the page is a crawler from Facebook (or Twitter, or Google+ , or whatever) and then redirect it to a page that does put the correct values in meta in a "static" way.

The idea is this:

  • Create a page with PHP / ASP / your favorite back-end language that:
  • Read a parameter identifying the page
  • Obtain the metadata for the page indicated in the parameter (eg from a database)
  • Write the meta tags (no need to put anything in body )
  • Put a redirect rule on the server that:
  • Check the user's agent
  • If it is a crawler , redirect it to the page created in step 1 by passing the original request as a parameter

    • In the first two linked solutions this code is mentioned (for Apache) to detect the crawler of Facebook / Twitter / Google + / Pinterest and redirect (I have changed it a bit and I could not prove it , so I may need some retouching): 

    <ifModule mod_rewrite.c>
RewriteEngine On

# permitir que los crawlers de las redes sociales funcionen al redireccionarlos a una página creada en el servidor
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule ^(.*)$  http://www.miweb.com/crawlers/pagina-estatica.php?id=$1 [P]

</ifModule>

    That will redirect the crawlers to your page in link passing it as a parameter the original URL of the request. On the static page you would then read the URL, search for the data (eg in a database) and display it.

    The PHP content could be like this: 

    <?php

$id = $_GET["id"];

// buscar los datos en la base de datos a partir de $id,
// y guardarlos en variables $ogtitle, $ogdescription, $ogurl, etc.

?>
<!doctype html>
<html>
    <head>
        <meta property="og:type" content="<?php echo $ogtype; ?>">
        <meta property="og:title" content="<?php echo $ogtitle; ?>">
        <meta property="og:description" content="<?php echo $ogdescription; ?>">
        <meta property="og:url" content="<?php echo $ogurl; ?>">
        <meta property="og:image" content="<?php echo $ogimage; ?>">
    </head>
    <body>
    </body>
</html>
        
    answered by 28.07.2016 в 22:05
    Show relational structure of DB2 tables with sql developer Slick carusel angular with multiple images stored in api rest