0

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:

enter image description here

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:

enter image description here

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?

Ricky
  • 2,912
  • 8
  • 47
  • 74
  • Facebook should not get to see a 301, if your setup actually correctly proxied the request internally. So apparently, it doesn’t ... – CBroe May 18 '18 at 14:56
  • Is there any other option i could try to fix this issue? – Ricky May 18 '18 at 15:25
  • Don’t think there is, Facebook has gotten pretty strict about telling users where content originates from. If anything, you would need to set this up so that `www.example.com/the-shared-link` returns the rendered meta data. – CBroe May 22 '18 at 06:33
  • What do you mean with return the rendered meta data? Can you give me an example? – Ricky May 23 '18 at 12:02
  • Not a change in the meta data, but what address Facebook fetches this from. If you want Facebook to show the source of an article as `www.example.com`, then you must share a URL from that domain, and have that URL return the meta data to Facebook. Basically, `rendering.app.com` is what you need to get rid off, and set up both parts (your Angular app, and the prerendering that returns the meta tag) directly under the `www.example.com/...` URL. – CBroe May 23 '18 at 12:47
  • @CBroe i thought of that solution, but i would have to change all my apps :( – Ricky May 23 '18 at 21:35
  • @Cbroe I done a new test using a different domain and the Canonical URL is now the same as the Fetched URL. No longer is there a Redirect Path! I'm going to further inspect this and see why its working with the new domain. – Ricky May 23 '18 at 21:40

1 Answers1

0

Solved my issue!

The rendering.app.com domain had a rewrite rule to force https. This causes a 301 HTTP Redirect (just as the Facebook Debugger showed). Using https://rendeting.app.com solved my issue. Another way of solving the 301 HTTP Redirect would be removing the https rewrite rule in the target domain.

Ricky
  • 2,912
  • 8
  • 47
  • 74