Get Social With AngularJS
Michael Bromley
@michlbrmly
Rich Social Media Sharing:
How It Works
Twitter meta data
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="@flickr" />
<meta property="twitter:title" content="Developing States Photo" />
<meta property="twitter:description" content="View the album on Flickr." />
<meta property="twitter:image" content="https://farm6.staticflickr.com/5510/123123.jpg" />
<meta property="twitter:url" content="https://www.flickr.com/p/sets/23/" />
Open Graph meta data
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Example: Facebook
The Problem With Angular
Crawlers Do Not Evaluate JavaScript
<meta property="og:title" content="{{ metadata.title }}" />
<meta property="og:site_name " content="My Favourite Albums" />
<meta property="og:url " content="{{ metadata.url }}" />
<meta property="og:description" content="{{ metadata.description }}" />
<meta property="og:image" content="{{ metadata.image }}" />
The Solution
- Server-side rendering
- Redirect crawlers
Ingredients
- A web server capable of rewriting URLs
- A server-side scripting language
- html5Mode = true
The Server - Apache
Required Modules:
- mod_rewrite
- mod_proxy
- mod_proxy_http
The Language - PHP
Basic Method:
- Get the data from the API
- Output HTML with meta tags populated
The Redirection - .htaccess
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit)
RewriteRule album/(\d*)$ http://www.mysite.com/static-page.php?id=$1 [P]
- Detect user agent
- If matching, redirect to static-page.php
- [P] = use proxy to remap rather than redirect
User Agents
- facebookexternalhit/1.1 (+http(s)://www.facebook.com/externalhit_uatext.php)
- Twitterbot/1.0
- Pinterest/0.1 +http://pinterest.com/
- Google (+https://developers.google.com/+/web/snippet/)
Test It Out!
- Facebook Open Graph Object Debugger
- Twitter Card Validator
- Pinterest Rich Pin Validator
- Google Structured Data Testing Tool
- Fiddler
Check Out The Demo:
Thank You!
@michlbrmly
http://www.michaelbromley.co.uk
AngularJS Social
By Michael Bromley
