getting seo performance in angular meteor with ngmeta
TRANSCRIPT
![Page 1: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/1.jpg)
ngmetaGetting SEO performance in Angular Meteor with ngmeta
By Michael Solati & Will Haire
![Page 2: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/2.jpg)
What Is SEO?
Stands for “Search Engine Optimization”Why do you care?
Internet Presence Starts on SearchInternet Users Start on Search
![Page 3: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/3.jpg)
Internet Search Statistics
93% on online experiences begin on a search engine
70% of links users click on are organic
70-80% of users ignore paid ads
75% of users never scroll past the first page of search results
Search is the #1 driver of traffic to content sites, beating social media by more than 300%
SEO leads have a 14.6% close rate, while traditional Outbound leads (such as direct mail & print ads) have a 1.7% close rate
35% of clicks on Google go to the first three organic search position
![Page 4: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/4.jpg)
How Do People Search?1.Experience the need for an answer, solution, or piece of
information
2.Formulate that need in a string of words known as “the query”
3.Enter query into search engine
4.Browse through the results for a match
5.Click on result
6.Scan for a solution, or a link to that solution
7.If unsatisfied, return to the search result and browse for another link
8.If still unsatisfied, perform a new search with refinements to the query
Rinse and Repeat!
![Page 5: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/5.jpg)
Search Engine Functions
2 Major Functions:
Crawling & Building an Index
![Page 6: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/6.jpg)
How Are Web Pages Ranked?
2 Factors:
Relevance & Popularity
![Page 7: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/7.jpg)
Meta Data & Schema.org
Schema.org is an initiative launched in 2011 by all major search engines to create and support a common set of schemas for structured data markup on web pages.
Meta Data is a form of displaying information in HTML in between the <head> tags on your website that provides information about a web page to aid in the indexing and categorization for Search Engines.
![Page 8: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/8.jpg)
Example of Schema Tags<div itemscope itemtype="http://schema.org/Organization"><a itemprop="url" href="http://checkmatecreations.com/"><div itemprop="name"><strong>Checkmate Creations</strong></div></a><div itemprop="description">Mobile App Development & Digital Media Agency</div><div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">1253 WHITNEY AVE</span><br><span itemprop="addressLocality">Hamden</span><br><span itemprop="addressRegion">Connecticut</span><br><span itemprop="postalCode">06518</span><br><span itemprop="addressCountry">United States</span><br></div></div>
![Page 9: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/9.jpg)
Example of Meta Data<HEAD><title>Top Mobile App Development Agency in Connecticut</title><Meta http-equiv=”content-type” content=”text/html; charset=utf-8”><Meta name="Description" content="Checkmate is Connecticut’s leading mobile app development & marketing agency. "><Meta name="Keywords" content="Mobile App Development Connecticut, Digital Marketing Agency, Mobile Solutions"><Meta name=”subject” content=”Top Mobile App Development Agency in CT”><Meta name=”author” content=”Checkmate Creations”><Meta name=”googlebot” content=”index, follow”><Meta http-equiv=”Content-Language” Content=”EN-US”><Meta name=”revisit-after Content=”7 Days”><Meta name=”city” content=”Hamden”><Meta name=”state” content=”CT”><Meta name=”zipcode” content=”06518”><Meta name=”copyright” content=”Checkmate Creations”></head><Body>This is where the visible portion of your website is configured.</Body></div>
![Page 10: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/10.jpg)
PageRank & Popularity
“It turns out, people who win the Nobel Prize have citations from 10,000 different papers. A large
number of citations in scientific literature, he said, means our work was important, because other people thought it was worth mentioning” The
Google Story by David Vise
![Page 11: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/11.jpg)
Crawlable Link Structure
Is a structure that lets search crawlers browse the pathways of a website
![Page 12: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/12.jpg)
Server Rendering Vs. Client-Only Rendering
If the website owner doesn’t care about achieving top ranking, and the only goal is to get indexed by Google and not any other search engine, then it is ok to do Client only rendering with angular
![Page 13: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/13.jpg)
Client Only Rendered HTML
Requires the following:• Enable push state in Angular so you get pretty URLs without the hash. • Implement UI Router or the new Component Router in Angular so you can
map URLs to pages. • Follow all normal SEO best practices for page titles, URLs, content, etc.
Nothing changes here. • Optimize the heck out of the initial page load—a major mistake many make
is thinking initial page load time for client-rendered apps doesn’t matter, but it does!
![Page 14: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/14.jpg)
Server Rendering Performs Better For SEO
Reasons:• Google is good at client rendering, but not perfect. • Other search engines are really not good at it. • Things like Facebook or Twitter link previews will not work. • It is much easier to make server rendering fast than it is to
make the initial load for client rendering fast—and that makes a big difference.
![Page 15: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/15.jpg)
Options for Server Rendering• Implement in PHP or another language. This will work but requires
that you duplicate all pages, which is generally not feasible unless you have a small/simple site.
• Use Prerender.io or a similar service. This works but can get expensive for larger sites, can be tricky to set up, and you need to be OK with long page cache times (i.e., server pages are one day old).
• Build a custom solution off the Jangular library. Although this works, it does require a lot of heavy lifting.
• Wait for Angular 2.0 (possibly to be released end of 2015)
![Page 16: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/16.jpg)
Free Tools!• Google Structured Data Tool
• SEO Power Suite
• Screaming Frog SEO Spider
• SEMrush.com
• Moz.com
![Page 17: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/17.jpg)
So What’s The Problem?
JavaScript…It is getting better…?
![Page 18: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/18.jpg)
AJAX is deprecating!
![Page 19: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/19.jpg)
The Meteor Platform
Three frameworksAngularBlazeReact
![Page 20: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/20.jpg)
He basically wrote the book on it.
![Page 21: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/21.jpg)
How To Handle This In Angular...
Meta tags need to update everywhere!NPM?I’ll do it myself I guess?I’ll do it myself with a Service!
![Page 22: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/22.jpg)
Let’s Do This!
![Page 23: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/23.jpg)
![Page 24: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/24.jpg)
Our Client Folder
clientindex.htmlmain.js
![Page 25: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/25.jpg)
Our Collections Folder
collectionsparties.js
![Page 26: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/26.jpg)
Our Imports Folder
importsui
componentssocially
socially.html & socially.jspartiesList
partiesList.hrml & partiesList.js
![Page 27: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/27.jpg)
Our Server Folder
importsstartup.js
![Page 28: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/28.jpg)
Let’s Run The App
![Page 29: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/29.jpg)
Getting Meta
![Page 30: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/30.jpg)
What Does ngmeta Support
<title></title><meta/>
propertyname
<link rel=”canonical”/>
![Page 31: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/31.jpg)
To get this <head>
![Page 32: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/32.jpg)
You need this
![Page 33: Getting SEO performance in Angular Meteor with ngmeta](https://reader035.vdocuments.us/reader035/viewer/2022070600/58a729791a28ab0d0d8b58b7/html5/thumbnails/33.jpg)
https://atmospherejs.com/mkslt04/ngmeta