Inbound 2017: Back to Our Roots with Technical SEO

@SWallaceSEO | #INBOUND17

B A C K T O O U R R O O T S W I T H T E C H N I C A L S E O

Stephanie Wallace Senior Director, Search Engine Optimization


Back to Our Roots With Technical SEO

S T E P H A N I E W A L L A C ESenior Director, SEO Nebo


• The SEO Cycle

• Embrace Our Roots

• Baseline Technical Skills

• What To Learn Now

• How To Stay Ahead

A G E N D A


The Virtuous Cycle of SEO


All Trends Go Through Cycles




The Same Cycles Apply to SEO


SEOs started as “Webmasters”.


But, there were problems…


And frustrated users.


Google had to evolve.


The role of an SEO changed.


“SEO is dead”.


Enough said.


Is this real?


Content is king!


They are wrong.


Technology + Content


3.5 billionSearches Per Day On Google

- I N T E R N E T L I V E S TAT S


500-600

- M O Z G O O G L E A L G O R I T H M H I S T O R Y

Google Algorithm Updates Per Year


+200Ranking Factors, Each With Up To 50

Variations


Of Online Experiences Start

With A Search93%- S E A R C H E N G I N E J O U R N A L


Technical SEO is paramount


Embracing Our Technical Roots1


Death of SEO = Birth of Content as King

NEED IMAGE

This is not about learning to code



NEED IMAGE

Well, not exactly…



Web developers are magical

How does web development work?

Magic.


You need to know how things work


You need to know how things work

Don’t be this guy


Start curious


Establish a Baseline of Technical Skills2


Google Analytics


TRACK & MEASURE WEBSITE DATAUse data to make informed business decisions

Google Analytics


Google AnalyticsDig into your data to measure performance of marketing activities.


HTML & CSS


THE FOUNDATION OF THE WEB The languages used to explain your content to browsers & make it stylish

HTML & CSS


HTML & CSSLearn how to build a beautiful webpage.


HTML & CSSLearn how to build a beautiful webpage.

www.codeacademy.com


JavaScript


CREATE INTERACTIVE EFFECTS ON YOUR WEBSITEBring HTML & CSS to life

JavaScript


Learn how to build a dynamic webpage. JavaScript


JavaScriptLearn how to build a dynamic webpage.

www.codeacademy.com


SQL Structured Query Language


LEARN HOW TO WORK WITH RELATIONAL DATABASES

SQL

To manipulate data and build queries that communicate with more than one table


Easily parse data to pull out insights that help inform marketing & more. SQL


Easily parse data to pull out insights that help inform marketing & more. SQL

www.codeacademy.com


MySQL for Excel


PULL PROCESSED QUERY DATA INTO EXCELTo browse MySQL Schemas, Tables, Views and Procedures and perform data operations

MySQL for Excel


Big data needs more than a million rows. MySQL for Excel


Schema


STRUCTURED DATA MARKUP

Schema

Annotates specific elements on a page making them easier for search engines to understand


Schema.org is the complete resource for supported tags & microdata vocabulary. Schema


Use Google’s Structured Data Markup Helper to generate code. Schema


Tools & Technology to Learn Now3


MarkdownMarkdown


USE A PLAIN TEXT EDITOR & MARKDOWNTo bypass the need for a developer

Markdown


Markdown


H1s & H2s

Markdown


Bulleted & Numbered Lists

Markdown


Block Quotes

Markdown


Links

Markdown


https://goo.gl/tJvCfi

Markdown


Markdown

dillinger.io


Markdown

dillinger.io

Paste Markdown here


Markdown

dillinger.io

Paste Markdown here View HTML here


Export as HTML here Markdown

Paste Markdown here View HTML here

dillinger.io


MarkdownCreate the HTML of your dreams.


Install Sublime Text

Install Markdown Editing

Use Online Preview or Install a Viewer

• Online Preview: dillinger.io

• Viewer: Marked 2

Process

Markdown







Process

Markdown







Process

Markdown







Process

Markdown

https://goo.gl/cFuJLc


Google Tag Manager


MANAGE SITE TAGS VIA CENTRAL INTERFACESeparate from the source code a website

Google Tag Manager


1. Tag: A snippet of code (usually JavaScript) added to a page

2. Trigger: Defines when & where tags are fired

3. Variables: Receive or store information to be used by tags & triggers;

these impact what data is collected

Basic Components:

Google Tag Manager


Google Tag Manager


Google Tag Manager


Use CaseImplement structured data markup using Google Tag Manager.

New Tag > Custom HTML


Use CaseDynamically insert J-SON LD on all pages you define.

Paste Code


Use CaseDynamically insert J-SON LD on all pages you define.

Define Trigger Pages


Use CaseVerify via Google’s Structured Data Testing Tool.


Why is Tag Manager Awesome?

Google Tag Manager


Make site changes without developers

Implement Structured Data Markup

Analyze form abandonment

Track off-site downloads

Measure scroll depth & dwell time

Merge Google Analytics & CRM data

Change the World

Google Tag Manager








Change the World

Google Tag Manager








Change the World

Google Tag Manager








Change the World

Google Tag Manager








Change the World

Google Tag Manager








Change the World

Google Tag Manager


Developer Tools


EVALUATE THE CODE ON ANY WEBPAGETo efficiently track issues & get insights for code optimization

Developer Tools


Understand the code on any webpage.

1

2 3

Developer Tools


Understand the code on any webpage. Developer Tools


Check header responses for directives such as x-robots, rel=canonical, etc. Developer Tools


Quickly change elements on any webpage to illustrate recommendations Developer Tools


Quickly change elements on any webpage to illustrate recommendations. Use Case


Why is this my favorite non-SEO tool?

Developer Tools


Favorite Tool

It’s built into your browser

Audits pages as they load to provide recommendations for decreasing load time & increasing responsiveness

Allows you to view webpages via different devices, all from your desktop

Has a built in user agent switcher

Developer Tools






Developer Tools

Favorite Tool






Developer Tools

Favorite Tool






Developer Tools

Favorite Tool


GTmetrix


ANALYZE SITE SPEED & MAKE IT FASTERBecause site speed matters… a lot

GTmetrix


GTmetrixGet actionable, detailed information on what’s slowing your site down & how to improve it.


Using all of the data available, prioritize implementation based on overall impact.

GTmetrix


GTmetrixWhy not use Google PageSpeed?


GTmetrixWhy not use Google PageSpeed?

Google PageSpeed does not actually measure the speed of your site.


Why is page speed analysis important for SEO?

GTmetrix


GTmetrix

Speed Matters

Site speed, and in turn page speed, is your first impression with consumers

47% of users expect a site to load in less than 2 seconds*

50% of users will abandon your site entirely if takes longer than 3 seconds*

Site speed is a confirmed ranking factor *Stats courtesy of Kissmetrics.com


GTmetrixSite speed, and in turn page speed, is your first impression with consumers



Site speed is a confirmed ranking factor *Stats courtesy of DoubleClick by Google

Speed Matters






Speed Matters






Speed Matters


Log File Analyzer by Screaming Frog


IDENTIFY CRAWLED URLS & ANALYZE BOT DATATo uncover invaluable SEO insights

Log File Analyzer


Your log files contain the only data that is 100% accurate in terms of how search engines are crawling your site.

Log File Analyzer


Upload your log files to uncover how search engines are crawling & parsing your site.

Log File Analyzer


Verify search engine bots, identify crawled URLs and analyze bot data & behavior.

Log File Analyzer


Identify large & slow pages, identify header response errors and redirects that need to be resolved.

Log File Analyzer


Why is log analysis so valuable?

Log File Analyzer


Log Analysis

Too many response code errors create crawl budget waste, which can negatively impact your rankings

Ensure search engines are crawling everything you want indexed

Correcting the problems found in your logs will lead to higher rankings, more traffic, & more conversions / sales

Log File Analyzer


Log Analysis




Log File Analyzer


Log Analysis




Log File Analyzer


APIs


INTEGRATE TOOLS & APPLICATIONSTo streamline processes & make data easier to work with

APIs


APIsAPI: Application Programming Interface

Your APP / Program

A P I

Data Request

Data Request



Your APP / Program

A P I

Data Request

Data Request



Your APP / Program

A P I

Data Request

Data Request


APIsLearn how to make applications talk to each other.


APIsLearn how to make applications talk to each other.

www.codeacademy.com


Use CaseUncover hidden keyword level data using Google Sheets & APIs.


Use CaseUncover hidden keyword level data using Google Sheets & APIs.


But why would I use an API?

APIs


Many of the tools & platforms you already use have APIs you can leverage

APIs can help make existing data convenient & consumable

Scale productivity by automating robotic processes

APIs

Integrate





APIs

Integrate





APIs

Integrate


Accelerated Mobile Pages AMP


REDUCE CONTENT LOAD TIME ON MOBILE DEVICESWith AMP HTML pages served via Google

AMP


AMP


AMPAMP has been integrated into primary search results pages.

AMP design & compatibility should be a consideration if organic traffic from Google represents a significant amount of total visits.


Regular Page

wwwInbound.com

Hosted AMP

Inbound.comAMP

Cached AMP

Inbound.comgstatic

rel=“canonical”

rel=“canonical”

rel=“amphtml”

AMPHow Accelerated Mobile Pages work.


Pros:

1. Increased traffic through higher visibility

2. Improved UX

3. Higher CTR & engagement metrics

4. Up to 80% higher ad visibility rates

AMP


Cons:

1. Can be very difficult to implement

2. Offers limited functionality compared to the main site

AMP


Queries for news, recipes, ecommerce & more generate AMP results. AMP


AMPWhy should I get AMP’d?


All About Mobile

Nearly 60% of searches are performed on Mobile

Speed matters: users expect sites to load in 2 seconds or less

Advice from Google’s Gary Isles: “Pay attention to AMP. It’s going to be really big. Figure out…how to implement it.”

It will most likely* become a ranking signal *Yes, this is speculation…but trust me!

AMP






AMP

All About Mobile






AMP

All About Mobile






AMP

All About Mobile


Progressive Web Apps PWAs


AN APP LIKE MOBILE EXPERIENCEFaster, lighter, & more personalized

PWAs


1

32

PWAs


Progressive Web Apps are user experiences that have the reach of the web.

They are reliable, fast, & engaging.

Always fresh.

PWAs


Universal - available on iOS and Android.

Push notifications.

Connectivity independent to ensure PWAs work with low quality or no connection.

PWAs


Do I need a PWA?

PWAs


Do I need a PWA?

PWAs

Probably not…


You don’t need one: most websites don't need to be able to behave like an app

If you have an app it may be worth switching to a PWA

You may need one: your site offers real-time data

You may need one: your audience is likely to pull content to browse offline, such as a news app or a blog publishing many articles a day

PWAs

Progress






PWAs

Progress


Progress





PWAs






PWAs

Progress


How To Stay Ahead of the Curve4


Establish a baseline of skills


Remember

Don’t be this guy


Stay up to date on MarTech trends


Push your tools


Be prepared to execute it yourself


Thank You! | Q&A

Stephanie Wallace Senior Director of SEO Nebo

@SWallaceSEO | #Inbound17


T H A N K Y O U

Date post:	22-Jan-2018
Category:	Marketing
Upload:	stephanie-wallace
View:	185 times
Download:	4 times

Inbound 2017: Back to Our Roots with Technical SEO

Marketing