I've created a simple app that server renders some basic SPA content based on the user agent.
For example, if an AngularJS website link is shared on Facebook i have a Apache rewrite rule to redirect that link to the rendering app. The rendering app then checks the URL that was passed as a query parameter and returns the specified rendered content.
Everything works as expected, but there's a problem with the rendered result. The canonical link showed in the Facebook post is the rendering app's link. Here's what's happening:
Shared Link: www.example.com/the-shared-link
Facebook's post result:
Instead of displaying the shared link (www.example.com/the-shared-link) the rendering app is shown instead (rendering.app.com). But if i click on the Facebook post, it opens the correct website page.
Facebook Debugger result:
All the needed meta tags are added to the rendered result page:
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta itemprop="description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta itemprop="image" content="http://www.example.com/some-image.jpg" />
<!-- Twiter Cards -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta name="twitter:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta name="twitter:description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta name="twitter:image:src" content="http://www.example.com/some-image.jpg" />
<!--/ Twiter Cards -->
<!-- Open Graph -->
<meta property="og:site_name" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta property="og:url" content="http://www.example.com/the-shared-link" />
<meta property="og:description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta property="og:image" content="http://www.example.com/some-image.jpg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="375" />
<!--/ Open Graph -->
The Apache htaccess rewrite rule:
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Facebot|Twitterbot/[0-9]|Pinterest|Pinterestbot|LinkedInBot/[0-9])
RewriteRule ^(.*)$ http://rendering.app.com/?url=%{REQUEST_URI} [P,L]
What am i doing wrong? How can i change the canonical url to the original shared link?