Embed Size (px)
Citation preview
Fully OptimizedCommonly-Missed Opportunities and New On-Page SEO Techniques
Jon Henshaw Co-founder of Raven Tools
@RavenJon
What’s the typical approach to optimizing sites for search engines?
Optimized URL naming convention domain.com/category/product-name/
Optimized Page Titles & Descriptions
Awesome content
All done!
I think I’ll sleep here the rest of
the day*
* Actual guy who slept there the rest of the day
Most sites have hundreds and even thousands of problems to
fix and optimize
Next step is to do a site audit
Find and fix with a site audit tool
Once you finish fixing and optimizing everything, you can…
…sit back, relax and drink tiny bottles of
wine
Wait! Not yet!…you’re still not done!
Hide irrelevant content
Are these pages relevant?
• About Us
• Contact
• Terms of Service
• Privacy Policy
Exclude irrelevant pages in robots.txt
Sanitize affiliate links
Google isn’t the biggest fan of affiliate links
Internally link to a disallowed folder and redirect to the destination
Choose a folder name like domain.com/go
Disallow the folder in robots.txt
Create a 301 redirect for the affiliate link
domain.com/go/timecapsule
Optimize how you code
Turn off JS and CSS
Code without style first
Use semantic elements to communicate context
<header>
<nav>
<article> <aside>
<footer>
Navigation
Advertising
Predict the next ranking factors and implement them now*
* Even if they never become factors, your visitors will love you!
Google cares a lot about mobile and UX
Google also has a history of identifying and utilizing standards and accessibility
Form “input types” that enhance mobile UX fit that pattern
type=“email”
type=“date”
type=“time”
type=“tel”
Use frameworks that allow good code, are easy to configure and are responsive
Foundation
Add Breadcrumbs
Communicates context and enhances SERPs
Footer
Can go anywhere on your site
WordPress plugins
Yoast SEO raven.link/yoast
NavXT raven.link/navxt
Optimize images for mobile devices
Responsive images are
not optimized images
Optimization is serving a different image
Thankfully we have a new HTML standard called SRCSET
SRCSET can serve both smaller and completely different images to
improve speed and UX
Create smaller versions for mobile
1024px800px
550px360px
SRCSET is an attribute to the IMG element
<img alt="my awesome cat" src="image.png" srcset="cat-hd.png 2x, cat-med.png 640w, cat-med-hd.png 640w 2x" />
Specify device width
<img alt="my awesome cat" src="image.png" srcset="cat-hd.png 2x, cat-med.png 640w, cat-med-hd.png 640w 2x" />
Specify High DPI
<img alt="my awesome cat" src="image.png" srcset="cat-hd.png 2x, cat-med.png 640w, cat-med-hd.png 640w 2x" />
Customize image by device type
Mobile Desktop
Speed in general matters
Don’t use a 💩 hosting provider* and use a CDN to deliver assets
My old advice
* I still advise not using a 💩 hosting provider, but that’s not the point I’m trying to make right now
Use Cloudflare• Significant speed increase with HTTP/2
• CDN for your entire site, not just assets
• Security and DDoS protection
My new advice
Integrate in HTML elements
JSON-LD makes it simpler
Consider using AMP if you’re a publisher or blogger (and soon ecommerce sites)
ampproject.org
AMP strips out all of the unnecessary code and delivers content almost instantly to mobile devices
What it looks like via mobile
search
Google’s results are hosted by Google https://www.google.com/amp/www.bbc.co.uk/news/amp/36582770
Automattic has been actively working with AMP
Thank you!
Early access to Site Auditor raven.link/early
Jon Henshaw @RavenJon
