Single Page Applications and Open Graph

我怕爱的太早我们不能终老 提交于 2021-01-26 09:45:08

问题


I'm writing a SPA that uses underscore templating. The app searches for and rates music albums and returns the result via ajax. If facebook open graph metatags cannot be altered dynamically and the url of the page is constant regardless of search result, how can i make it so users can share that they rated a certain album.

ie)

<meta property="fb:app_id"      content="118454308341351" /> 
<meta property="og:url"         content="http://www.appurl.com" /> 
<meta property="og:title"       content="Fleetwood Mac's Rumors" /> 
<meta property="og:image"       content="AppImg.jpg" /> 

and update those properties to reflect a given search result.


回答1:


The way I handle this is to create a dynamic page which I use as my open graph object, which is simply populated from the url parameters and redirects back to my SPA using the meta redirect.

<meta http-equiv="refresh" content="0;URL=http://YOUR_WEBSITE_WITH_DYNAMIC_CONTENT">




回答2:


Thanks to this tutorial I found a solution: https://speakerdeck.com/sienatime/facebook-sharing-for-single-page-apps?slide=15

I send only meta tags if the user-agent of the http request includes "facebookexternalhit".

Here is some code for a backend with node and express:

app.get('/', (req,res) => {
  if(req.header('user-agent').includes('facebookexternalhit'){
    res.send(`
      <meta property="og:title" content="The Slits' Cut" />
    `);
  } else {
    res.sendFile(index.html);
  }  
})

You could also write your own middleware for that.



来源:https://stackoverflow.com/questions/16069501/single-page-applications-and-open-graph

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!