Friday, January 30, 2015; 10:20:23 AM Eastern
Dynamic metadata in web pages
- Here's the scenario..
- 1. I have a web app that's used to display content dynamically. The page containing the app is static, stored in an S3 bucket.
- 2. The app doesn't have any data in it, just code and a few DOM objects. It's a liveblog reader. Think of it as a container that can be used to display lots of different stuff.
- 3. When it starts up, it loads the data from a file, displays it.
- 4. The URL parameter contains the ID of an item within the file it's displaying. It moves the cursor there. Here's an example, a post about cheese.
- 6. The user then posts the link on Facebook, the one from #4 above. The user thinks they're posting a link to their story, not to my app. They barely realize my app exists. It's all about what they've written.
- 7. When Facebook displays the post, I readers to see a description of the item that's being pointed to, what readers will see when they click the link.
- 8. So what I need to do is change the og:url, og:title, og:description, and og:image elements in the <head> when the app starts up. And (this is what doesn't work) have Facebook recognize the changes.
- 9. I want links to items to be passed around the net just like all links are. I could of course provide a programmatic way to post a link to Facebook, and that could have whatever info I want it to, but -- I love the magical scraping FB does. I just want it to get it right. ;-)
- #### Update
- Here's a demo app that illustrates.
- And a Facebook post about the feature.
- And I'm accumulating notes here on my liveblog. This shit is useful! :-)