Denver emberjs-sept-2015
0 likes236 views
The document discusses techniques for making Ember applications more search engine-friendly and social media-shareable. It recommends adding meta tags for Open Graph, Twitter Cards and schema.org to provide structured data about content. It demonstrates implementing meta tags dynamically in Ember using the ember-cli-meta-tags plugin and pre-rendering pages with Prerender.io or Ember FastBoot for crawling. Providing meta tags and pre-rendering helps search engines and social media understand content better.
![./app/routes/application.js
1 import Ember from 'ember';
2
3 export default Ember.Route.extend({
4 model() {
5 return this.get('store').findAll('author');
6 },
7
8 headTags() {
9 return [
10 {
11 tagId: 'og:title',
12 type: 'meta',
13 attrs: {
14 property: 'og:title',
15 content: "The Latest Happenings At New New York's Greatest
16 Delivery Service"
17 }
18 },
19 {
20 tagId: 'og:site_name',
21 type: 'meta',
22 attrs: {
23 property: 'og:site_name',
24 content: "Planet Express Blog",
25 }
26 },
27 // ...
28 ];
29 }
30 });
31](https://image.slidesharecdn.com/denver-emberjs-sept-2015-151021175147-lva1-app6891/85/Denver-emberjs-sept-2015-33-320.jpg)
![./app/routes/application.js
8 headTags() {
9 return [
10 {
11 tagId: 'og:title',
12 type: 'meta',
13 attrs: {
14 property: 'og:title',
15 content: "The Latest Happenings At New New York's Greatest
16 Delivery Service"
17 }
18 },
27 // ...
28 ];](https://image.slidesharecdn.com/denver-emberjs-sept-2015-151021175147-lva1-app6891/85/Denver-emberjs-sept-2015-34-320.jpg)
![./app/routes/author.js
1 headTags() {
2 let model = this.modelFor(this.routeName);
3 return [
4 {
5 tagId: 'og:title',
6 type: 'meta',
7 attrs: {
8 property: 'og:title',
9 content: model.get('name')
10 }
11 },
12 // ...
13 ];
14 }](https://image.slidesharecdn.com/denver-emberjs-sept-2015-151021175147-lva1-app6891/85/Denver-emberjs-sept-2015-35-320.jpg)
![./app/routes/author/post.js
1 headTags() {
2 let model = this.modelFor(this.routeName);
3 let queryParams = {
4 index_key: this.controllerFor('application').get('indexKey')
5 };
6 let router = this.get('router');
7 let path = this.get('router').generate.apply(router, [
8 'post', model, {
9 queryParams: queryParams
10 }
11 ]);
12 let cannonicalUrl = `${window.location.origin}${path}`;
13 return [
14 // ...
15 {
16 tagId: 'og:url',
17 type: 'meta',
18 attrs: {
19 property: 'og:url',
20 content: cannonicalUrl,
21 }
22 },
23 ];
24 }](https://image.slidesharecdn.com/denver-emberjs-sept-2015-151021175147-lva1-app6891/85/Denver-emberjs-sept-2015-37-320.jpg)
![./app/routes/author/post.js
2 let model = this.modelFor(this.routeName);
3 let queryParams = {
4 index_key: this.controllerFor('application').get('indexKey')
5 };
6 let router = this.get('router');
7 let path = this.get('router').generate.apply(router, [
8 'post', model, {
9 queryParams: queryParams
10 }
11 ]);
12 let cannonicalUrl = `${window.location.origin}${path}`;](https://image.slidesharecdn.com/denver-emberjs-sept-2015-151021175147-lva1-app6891/85/Denver-emberjs-sept-2015-38-320.jpg)
![./app/routes/author/post.js
1 headTags() {
2 let model = this.modelFor(this.routeName);
3 let queryParams = {
4 index_key: this.controllerFor('application').get('indexKey')
5 };
6 let router = this.get('router');
7 let path = this.get('router').generate.apply(router, [
8 'post', model, {
9 queryParams: queryParams
10 }
11 ]);
12 let cannonicalUrl = `${window.location.origin}${path}`;
13 return [
14 // ...
15 {
16 tagId: 'og:url',
17 type: 'meta',
18 attrs: {
19 property: 'og:url',
20 content: cannonicalUrl,
21 }
22 },
23 ];
24 }](https://image.slidesharecdn.com/denver-emberjs-sept-2015-151021175147-lva1-app6891/85/Denver-emberjs-sept-2015-39-320.jpg)
Denver emberjs-sept-2015
- 1. Building a Like-able (and Searchable) Ember App Ember Denver Meetup Sept 30, 2015
- 2. Ron White ! ronco " @ronco1337
- 3. I’m No SEO Expert
- 4. #Sh*tMySEOExpertSays “Defer loading all JavaScript until after the page has loaded.” I’m No SEO Expert
- 5. Techniques for Making Ember Searchable I’m No SEO Expert
- 6. Lots of Great Ember Apps
- 10. How do you drive traffic to these sites?
- 11. Time to Make a Metaphorical Deal With The Devil
- 12. Time to Make a Deal With The Devil
- 21. Bots have their own language
- 22. • Content is King • Data is pulled directly from your markup • Structure should be logical and useful to users • Avoid Repeated Content (Canonicalization) • Links to/from Your Site Drive Importance • Easy to Implement, Lifetime to Master Source: https://support.google.com/webmasters/answer/40349?hl=en
- 23. • Facebook Open Graph • Dedicated Meta Tag Markup in Head • Requires Canonicalization • Shared Open Spec
- 24. 1 <meta property="og:url" 2 content="http://www.nytimes.com/.../mars-life-liquid-water.html"> 3 <meta property="og:type" content="article"> 4 <meta property="og:title" 5 content="NASA Confirms Signs of Water Flowing on Mars, Possible 6 Niches for Life">
- 25. • Twitter Cards • Dedicated Meta Tag Markup in Head • Will Read Open Graph Also
- 26. 1 <meta name="twitter:card" value="summary"> 2 <meta name="twitter:site" value="@nytimes"> 3 <meta property="twitter:url" 4 content=“http://.../mars-life-liquid-water.html”> 5 <meta property=“twitter:title" 6 content="NASA Confirms Signs of Water Flowing on Mars, 7 Possible Niches for Life">
- 27. schema.org • Used by Pinterest & Google Structured Data
- 28. Let’s Mark-up Our Blog
- 29. ./app/index.html 1 <meta property="og:title" 2 content="The Latest Happenings At New New York's Greatest 3 Delivery Service"> 4 <meta property="og:site_name" content="Planet Express Blog"/> 5 <meta property="og:description" 6 content="The Employees of Planet Express, New New York's 7 Greatest Delivery Service, have a lot to say. Hear 8 all their latest musings on the Planet Express Blog." 9 /> 10 <meta property="og:type" content="website" /> 11 <meta property="og:image" content="/images/pe-logo.png" />
- 32. $ ember install ember-cli-meta-tags
- 33. ./app/routes/application.js 1 import Ember from 'ember'; 2 3 export default Ember.Route.extend({ 4 model() { 5 return this.get('store').findAll('author'); 6 }, 7 8 headTags() { 9 return [ 10 { 11 tagId: 'og:title', 12 type: 'meta', 13 attrs: { 14 property: 'og:title', 15 content: "The Latest Happenings At New New York's Greatest 16 Delivery Service" 17 } 18 }, 19 { 20 tagId: 'og:site_name', 21 type: 'meta', 22 attrs: { 23 property: 'og:site_name', 24 content: "Planet Express Blog", 25 } 26 }, 27 // ... 28 ]; 29 } 30 }); 31
- 34. ./app/routes/application.js 8 headTags() { 9 return [ 10 { 11 tagId: 'og:title', 12 type: 'meta', 13 attrs: { 14 property: 'og:title', 15 content: "The Latest Happenings At New New York's Greatest 16 Delivery Service" 17 } 18 }, 27 // ... 28 ];
- 35. ./app/routes/author.js 1 headTags() { 2 let model = this.modelFor(this.routeName); 3 return [ 4 { 5 tagId: 'og:title', 6 type: 'meta', 7 attrs: { 8 property: 'og:title', 9 content: model.get('name') 10 } 11 }, 12 // ... 13 ]; 14 }
- 36. ./app/routes/post.js 1 headTags() { 2 let model = this.modelFor(this.routeName); 3 return [ 4 { 5 tagId: 'og:title', 6 type: 'meta', 7 attrs: { 8 property: 'og:title', 9 content: model.get('title') 10 } 11 },
- 37. ./app/routes/author/post.js 1 headTags() { 2 let model = this.modelFor(this.routeName); 3 let queryParams = { 4 index_key: this.controllerFor('application').get('indexKey') 5 }; 6 let router = this.get('router'); 7 let path = this.get('router').generate.apply(router, [ 8 'post', model, { 9 queryParams: queryParams 10 } 11 ]); 12 let cannonicalUrl = `${window.location.origin}${path}`; 13 return [ 14 // ... 15 { 16 tagId: 'og:url', 17 type: 'meta', 18 attrs: { 19 property: 'og:url', 20 content: cannonicalUrl, 21 } 22 }, 23 ]; 24 }
- 38. ./app/routes/author/post.js 2 let model = this.modelFor(this.routeName); 3 let queryParams = { 4 index_key: this.controllerFor('application').get('indexKey') 5 }; 6 let router = this.get('router'); 7 let path = this.get('router').generate.apply(router, [ 8 'post', model, { 9 queryParams: queryParams 10 } 11 ]); 12 let cannonicalUrl = `${window.location.origin}${path}`;
- 39. ./app/routes/author/post.js 1 headTags() { 2 let model = this.modelFor(this.routeName); 3 let queryParams = { 4 index_key: this.controllerFor('application').get('indexKey') 5 }; 6 let router = this.get('router'); 7 let path = this.get('router').generate.apply(router, [ 8 'post', model, { 9 queryParams: queryParams 10 } 11 ]); 12 let cannonicalUrl = `${window.location.origin}${path}`; 13 return [ 14 // ... 15 { 16 tagId: 'og:url', 17 type: 'meta', 18 attrs: { 19 property: 'og:url', 20 content: cannonicalUrl, 21 } 22 }, 23 ]; 24 }
- 40. ./app/routes/author/post.js 15 { 16 tagId: 'og:url', 17 type: 'meta', 18 attrs: { 19 property: 'og:url', 20 content: cannonicalUrl, 21 } 22 },
- 44. $ npm install prerender-node
- 45. <server>/index.js 1 app.use(require(‘prerender-node') 2 .set('prerenderToken', process.env.PRERENDER_TOKEN));
- 46. ./app/index.html 1 <meta name="fragment" content="!">
- 47. Ajax Crawling
- 53. $ ember install ember-cli-fastboot
- 54. ember-cli-fastboot • Ember Core Team Provided Pre-rendering • Deferred Injection of Scripts • Available as Node Middleware • Extremely Alpha • Bugs & Incomplete
- 55. Demo
- 56. • https://support.google.com/webmasters/answer/40349? hl=en • http://static.googleusercontent.com/media/ www.google.com/en//webmasters/docs/search-engine- optimization-starter-guide.pdf • https://developers.google.com/webmasters/ajax- crawling/docs/getting-started?hl=en • https://dev.twitter.com/cards/overview • http://ogp.me/ • https://developers.facebook.com/tools/debug/