getting seo performance in angular meteor with ngmeta
TRANSCRIPT
ngmetaGetting SEO performance in Angular Meteor with ngmeta
By Michael Solati & Will Haire
What Is SEO?
Stands for “Search Engine Optimization”Why do you care?
Internet Presence Starts on SearchInternet Users Start on Search
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
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!
Search Engine Functions
2 Major Functions:
Crawling & Building an Index
How Are Web Pages Ranked?
2 Factors:
Relevance & Popularity
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.
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>
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>
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
Crawlable Link Structure
Is a structure that lets search crawlers browse the pathways of a website
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
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!
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.
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)
Free Tools!• Google Structured Data Tool
• SEO Power Suite
• Screaming Frog SEO Spider
• SEMrush.com
• Moz.com
So What’s The Problem?
JavaScript…It is getting better…?
AJAX is deprecating!
The Meteor Platform
Three frameworksAngularBlazeReact
He basically wrote the book on it.
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!
Let’s Do This!
Our Client Folder
clientindex.htmlmain.js
Our Collections Folder
collectionsparties.js
Our Imports Folder
importsui
componentssocially
socially.html & socially.jspartiesList
partiesList.hrml & partiesList.js
Our Server Folder
importsstartup.js
Let’s Run The App
Getting Meta
What Does ngmeta Support
<title></title><meta/>
propertyname
<link rel=”canonical”/>
To get this <head>
You need this
https://atmospherejs.com/mkslt04/ngmeta