facebook graph

#4 · closed · 5 comments

two9seven

I am able to add meta tags to the head of the index. They end up at the end of the head section. I've set up OG tags for data derived from each page. I have a page of posters and then a details page which I want show different titles for. Why do you think the Facebook crawler is not seeing the OG tags. Heres my details page: ` <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/plastr-poster/plastr-poster.html"> <link rel="import" href="../bower_components/polymerfire/firebase-document.html"> <link rel="import" href="../bower_components/app-metadata/app-metadata.html"> <link rel="import" href="shared-styles.html"> <dom-module id="my-details"> <template> <style include="shared-styles"> :host { display: block; } </style> <app-route route="{{route}}" pattern="/:poster_id" data="{{routeData}}" tail="{{subroute}}"> </app-route> <firebase-document id="firebaseDoc" path="/posters/[[routeData.poster_id]]" data="{{poster}}"> </firebase-document> <app-metadata></app-metadata> <div class="poster_board"> <a href="./[[routeData.poster_id]]"> <plastr-poster id="poster" name="[[poster.name]]" location=[[poster.location]] poster="[[poster.poster]]" date="[[poster.date]]"> </plastr-poster> </a> </div> </template> ` ` <script> Polymer({ is: 'my-details', ready: function() { }, attached: function() { // this will create the singleton element if it has not been created yet Polymer.AppMetadata.requestAvailability(); }, properties: { prop1: { type: String, value: 'plastr-app', }, }, observers: ['_fireMetadataEvent(poster, routeData)'], _fireMetadataEvent: function(poster, routeData) { if (poster) { this.fire('app-metadata', { "description": poster.name, "keywords": 'events, posters, local, music, dance, art', "og:title": "plastrr", "og:description": poster.name, "og:image":poster.poster, "og:url": "https://plastrr-baa70.firebaseapp.com/details/" + routeData.poster_id, "twitter:card":"", }); } } }); </script>`

Comments

two9seven

code is not pasting right, sorry

CaptainCodeman

Yeah, it's not going to work currently - the way to think of OpenGraph and how most consumers of it work is to think of the older Google Bot that didn't process any JavaScript. If you need any meta tags in the page they need to be added on the server because the only thing that's going to be looked at is the HTML file. So, if you're serving the same static index.html page and relying on client-side code to set them, it's not going to work. The OG support was added for future use and / or if anyone creates any server-rendering system for web components. In the meantime, it usually isn't difficult to do some server-rendering of the meta tags using whatever server platform / templating system you're familiar with. I use Go and have it use the index.html page that Polymer creates as the template so it's always in-sync with the client changes.