Bridging the Gap: How SEO and CRO Work Together to Maximize User Satisfaction and Revenue

@RiRiIchikawa P.2
Who is Rio and Faber Japan?
Product manager/ UX lead in Faber Company
Awarded No.1 SEO tool
Over 1,700 clients
Over 1,300 clients
Rio Ichikawa

@RiRiIchikawa P.3
Topic
The correlation of SEO and UX
Heatmaps
UX SEO

@RiRiIchikawa
Why UX and CRO
important to SEO?

@RiRiIchikawa P.5
What is SEO for?

@RiRiIchikawa P.6
What is SEO for?
ranking #1 /
gaining traffics
aren’t an ultimate goal

@RiRiIchikawa P.7
What is SEO for?
🥰
💰

@RiRiIchikawa P.8
What is SEO for?
🥰
💰
to gain profits/
to satisfy your potential
leads

@RiRiIchikawa P.9
your contents should
satisfy and please the readers
🥰

@RiRiIchikawa P.10
your contents should
sa@sfy and please the readers
🥰
UX

@RiRiIchikawa P.11
John addresses the importance of UX
https://twitter.com/googlesearchc/status/1692212280727941136?s=20

@RiRiIchikawa P.12
Topic
The correla4on of SEO and UX
Heatmaps
UX SEO

@RiRiIchikawa
What is heatmap?

@RiRiIchikawa P.14
Visualizes user behavior
on the page

@RiRiIchikawa P.16
Three types of heatmaps
read area
Read Heatmap

@RiRiIchikawa P.17
read area
Read Heatmap
scroll depth/ exit area
Scroll Heatmap

@RiRiIchikawa P.18
clicked area
Click Heatmap
Scroll Heatmap
read area
Read Heatmap

@RiRiIchikawa P.19
Read Heatmap visualizes “Read Area”
warm colors:
high attention area
cool colors:
low attention area

@RiRiIchikawa P.20
read area
read heatmap vs session recordings
Read Heatmap Session recordings
statistical
data

@RiRiIchikawa P.21
read area
read heatmap vs session recordings
Read Heatmap Session recordings
statistical
data
individual
data

@RiRiIchikawa P.22
Scroll heatmap visualizes ”scroll depth” / “exit area”
Showing how many users
leave the page at which point

@RiRiIchikawa P.23
Scroll heatmap visualizes ”scroll depth” / “exit area”
Showing how many users
leave the page at which point
benchmark
in the first 1~3 lines
30%
20%
between each line
👍
5%
If the exit rate is less than...
👍
👍
If the remaining rate is more than...
at the end of arOcle

@RiRiIchikawa P.24
Click heatmap visualizes “clicked area”
warm colors:
clicked frequently

@RiRiIchikawa
When to use
heatmaps

@RiRiIchikawa P.26
When do you need heatmaps?
When improving
your website’s UX

@RiRiIchikawa P.27
Google AnalyOcs VS Heatmaps
Finds the page
to improve
Finds the section
in the page to improve

@RiRiIchikawa P.28
What kind of pages need heatmaps?

@RiRiIchikawa P.29
Pages need to be improved ASAP
High exit or bounce rates
Low SERP rankings (#11~#40)
No contribution to conversions
Low user engagement
When the page has...

@RiRiIchikawa P.30
Pages need to be improved ASAP
High exit or bounce rates
Low SERP rankings (#11~#40)
No contribution to conversions
Low user engagement
section that users are exiting
section with low attention
check where readers are losing interest
When the page has...
read scroll

@RiRiIchikawa P.31
Pages to watch out for
Landing page
A lot of page views
Newly published page
When the page has/ is

@RiRiIchikawa P.32
scroll
sharp page exit/ scroll drop
low click rate on CTA
check if any huge issue occurings
Pages to watch out for
Landing page
A lot of page views
Newly published page
click

@RiRiIchikawa P.33
Low exit or bounce rates
Generating high CVR
High SERP rankings (#1~#5)
High user engagement
Learn from successful pages

@RiRiIchikawa P.34
high attention section
high click rate element
Levarage its success to enhance the
performance of other pages
click
Low exit or bounce rates
Generating high CVR
High SERP rankings (#1~#5)
High user engagement
read
Learn from successful pages

@RiRiIchikawa
Heatmap usages
on SEO contents

@RiRiIchikawa P.36
Three essential UX aspects to consider in SEO content
Delivering the right content at the right time
Keep the above the fold as simple as possible
Stuffing keywords is meaningless
No.1
No.2
No.3

@RiRiIchikawa P.37
Stuﬃng keywords is meaningless
No.1
No.2
No.3

@RiRiIchikawa
No.1
ranking improved from #28 to #1
~Heatmap case study #1~

@RiRiIchikawa P.39
“What is above the fold”
above the fold #28
1,900
search query & ranking
monthly vol.
sign-ups for
the free heatmap
goal

@RiRiIchikawa P.40
UX in SEO Content: Detailed Breakdown
Identify the high interest area
strengthen the high interest area
evaluate the change
STEP3 ~evaluate~
STEP2 ~apply~
STEP1 ~analyze~

@RiRiIchikawa
Identify the high interest area
STEP1 ~analyze~
How to utilize the heatmaps

@RiRiIchikawa P.42
IdenOfy the high interest area using the heatmaps
check the immediate exit
check the high attention area
check the exit points
check the clicked area
1
2
3
4

@RiRiIchikawa P.43
1. Check the immediate exit
Scroll heatmap
benchmark
30%
👍

@RiRiIchikawa P.44
Scroll heatmap
If the immediate exit is >30%
benchmark
in the ﬁrst 1~3 lines
30%
👍
fix the above the fold
immediately!!!

@RiRiIchikawa P.45
Pouring water into a bucket with holes
visitors
high exit page
you
👤
📉
👩💻

@RiRiIchikawa P.46
This time above the fold is
Scroll heatmap
benchmark
30%
👍
👍

@RiRiIchikawa P.47
2. Check the exit points
Scroll heatmap
If many visitors are existing at
certain section, fix it immediately
benchmark
20%
between each line
👍
5%
👍
at the end of article

@RiRiIchikawa P.48
2. Check the exit points
Scroll heatmap
no drastic exits
People are reading from
the top to the bottom
benchmark
20%
between each line
👍
5%
👍
at the end of article

@RiRiIchikawa P.49
3. Check the high aenOon area
Improve it when sections with low
attention occupy most of the page
or are located at the higher up of
the page
High
attention
Low
attention
Read heatmap

@RiRiIchikawa P.50
3. Check the high attention area
Higher interests are shown at the
boMom part compared to the top part
High
attention
Low
attention
Read heatmap

@RiRiIchikawa P.51
4. Check the clicked area
Improve if clicks are concentrated
at the bottom of the page or if
accidental clicks are occurring.
Click heatmap

@RiRiIchikawa P.52
4. Check the clicked area
Only few clicks are occurring
Click heatmap
Need to encourage more clicks

@RiRiIchikawa P.53
Summary of the heatmap data
AOer landing on the page, users
conQnue reading without leaving and
show interest in the informaQon at the
boMom

@RiRiIchikawa P.54
basic ATF layouts based on site types
basic ATF layouts of LP
basic ATF layouts of SEO content
basic ATF layouts of service site
original high CVR ATF design of LP
original high CVR ATF design of SEO content
original high CVR ATF design of service site
ATF designs that increased CVR
Identify the high interest area using the heatmaps
low
attention
high
attention

@RiRiIchikawa P.55
basic ATF samples based on site types
basic ATF sample of LP
basic ATF sample of SEO content
basic ATF sample of service site
original ATF designs that increased CVR
low
aMenQon
high
attention
Identify the high interest area using the heatmaps
😑 Basic info
🥰 Original info

@RiRiIchikawa
strengthen the high interest area
STEP2 ~apply~
Move high interest areas to the top

@RiRiIchikawa P.57
Restructure the sections based on the heatmap data
High CVR ATF designs:
high attention
general ATF layouts:
low attention
Read heatmap
Move high attention
areas higher

@RiRiIchikawa P.58
Page structure before the change

@RiRiIchikawa P.59
Page structure after the change
Page structure before the change

@RiRiIchikawa P.60
CTA also added
Try free heatmaps

@RiRiIchikawa P.61
CTA also added
Try free heatmaps

@RiRiIchikawa
evaluate the change
STEP3 ~evaluate~
Evaluate the change using heatmaps

@RiRiIchikawa P.63
After the change: higher interests shown at below the fold
before after

@RiRiIchikawa P.64
After the change: higher interests shown at below the fold
before after
the fold
prac@cal
examples

@RiRiIchikawa P.65
Getting clicks on CTAs

@RiRiIchikawa P.66
Ranked #1 from #28 on “Above the fold” in 🇯🇵
#28
#1

@RiRiIchikawa P.67
Takeaway
Delivering the right content at the right Qme
No.1
place the engaging section to
read
click
higher up of the page
warm color area

@RiRiIchikawa P.68
Three essenOal UX aspects to consider in SEO content
No.1
No.2
No.3

@RiRiIchikawa P.69
No.1
No.2
No.3

@RiRiIchikawa
No.2
Removing unnessessary elements
drove more CVR & less exit rates
~heatmap case study #2~

@RiRiIchikawa P.71
Our SEO & digital marketing blog: Mieruca Journal “What is LP?”
what is LP #1
1,900
search query
monthly vol.
inquiries for
free SEO consulJng
goal

@RiRiIchikawa P.72
Check scroll heatmap
what is LP

@RiRiIchikawa P.73
Massive immediate exit near the fold

@RiRiIchikawa P.74
Massive immediate exit near the fold
benchmark
30%
👍

@RiRiIchikawa P.75
冒頭で大幅離脱発生
63% in 2 scrolls
86% in 4scrolls
exi;ng the page！😱

@RiRiIchikawa P.76
Scroll heatmap data of other pages of the blog

@RiRiIchikawa P.77
Same immediate exits occuring on most pages
immediate exit
on most pages

@RiRiIchikawa P.78
Which means...
The real issue lies in
a common area of the blog
🤦
💀
💀
💀
💀
💀
💀

@RiRiIchikawa P.79
The issue may lie in the common area

@RiRiIchikawa P.80

@RiRiIchikawa P.81
What’s the issue?

@RiRiIchikawa P.82

@RiRiIchikawa P.83
AD banner is bothering？

@RiRiIchikawa P.84
AD banner might be the villan?
AD banner may be bothering
side bar taking up the width
narrow main content area

@RiRiIchikawa P.85
so... we removed the side bar

@RiRiIchikawa P.86
Exit rate before the change

@RiRiIchikawa P.87
AFTER
BEFORE

@RiRiIchikawa P.88
AFTER
BEFORE
Exit rates improved
50pts in 2 scrolls
59pts in 4 scrolls

@RiRiIchikawa P.89
改善後
現状
on top of that...
2X
CVR

@RiRiIchikawa P.90
takeaway #2
Make sure your ATF is always...
Scroll heatmap
simple and free of unnecessary
elements to encourage further reading
No.2

@RiRiIchikawa P.91
No.1
No.2
No.3

@RiRiIchikawa P.92
No.1
No.3
No.2

@RiRiIchikawa
No.3
CVR 2.9X by revising
the information architecture
~heatmap case study #3~

@RiRiIchikawa P.94
Webstite of a Korean language school in Shin-Okubo, Tokyo
“Korean language
school in Shin-Okubo”
Organic search:
inquiry for free trial course
traffic source
goal

@RiRiIchikawa P.95
Issue from heatmap data
Lot of texts
Lengthy page
but....

@RiRiIchikawa P.96
Issue from heatmap data
Lot of texts
Lengthy page
but....
read rate is very low
~16%

@RiRiIchikawa P.97
What’s the issue?

@RiRiIchikawa P.98
What’s the issue?

@RiRiIchikawa P.99
What’s the issue?

@RiRiIchikawa P.100
What’s the issue?
Excessive keyword
stuffing for SEO purpose

@RiRiIchikawa P.101
What’s the issue?
low readability page

@RiRiIchikawa P.102
How to fix this?
Keyword stuffing, low readability
Keep only important info and
remove unnecessary texts
😵💫
😎

@RiRiIchikawa P.103
Our approach
Simplify the appeal point on ATF
No.1
Visualize the points of differentiation from competitors
No.2

@RiRiIchikawa
No.1
Reduce text on above the fold

@RiRiIchikawa P.105
too wordy
low readability
unclear appeal point

@RiRiIchikawa P.106
before
afer
simplified
clear appeal point
reduced text

@RiRiIchikawa
No.2
Organize and clarify essential information

@RiRiIchikawa P.108
Organize and clarify essential information
too wordy and long
unclear selling point

@RiRiIchikawa P.109
Read heatmap & click heatmap data for the section
Read Click

@RiRiIchikawa P.110
Read heatmap & click heatmap data for the section
no clickable elements
under the click marks
Read Click

@RiRiIchikawa P.111
What are people clicking?
Read Click
Stacked header

@RiRiIchikawa P.112
What are people clicking?
Read Click

@RiRiIchikawa P.113
Menu clicks increased as lengthy
text takes over the screen
users losing interest and
seeking other info
Read Click

@RiRiIchikawa P.114
after
before
simplify
emphasize
the strong points
reduce texts

@RiRiIchikawa P.115
Results
No.1
No.2

@RiRiIchikawa P.116
Results
No.1
No.2
1.7X
CTR

@RiRiIchikawa P.117
Results
No.1
No.2
1.7X
CTR
2.9X
CVR

@RiRiIchikawa P.118
Appendix：Read heatmap data of SEO contents
high attention on
visual elements

@RiRiIchikawa P.119
low attention on
wordy sections

@RiRiIchikawa P.120
文章が並ぶ箇所で
アテンションが下がる
Long text/ sentences
tend to get ignored

@RiRiIchikawa P.121
Takeaway
No.3
Especially on lengthy sections
Read
Trim Non-Essential Info
Be Concise
Convey Visually
Scroll

@RiRiIchikawa P.123
clicked area
Click Heatmap
Scroll Heatmap
read area
Read Heatmap

@RiRiIchikawa P.124
No.1
No.2
No.3

@RiRiIchikawa P.125
mieru-ca.com/heatmap/en
5 URLs
10,000 monthly PV
Forever Free!!!

Bridging the Gap: How SEO and CRO Work Together to Maximize User Satisfaction and Revenue

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Bridging the Gap: How SEO and CRO Work Together to Maximize User Satisfaction and Revenue

Similar to Bridging the Gap: How SEO and CRO Work Together to Maximize User Satisfaction and Revenue (20)

Recently uploaded

Recently uploaded (20)

Bridging the Gap: How SEO and CRO Work Together to Maximize User Satisfaction and Revenue