Date post: | 11-Apr-2017 |
Category: |
Technology |
Upload: | ssuserd60633 |
View: | 51 times |
Download: | 0 times |
Mobile SEO
2017/03/14
Asuka Ishikawa
Index
• Objective of this seminar• Backgrounds• Issues– Google’s Issue– Web site Owner’s Issue
• Mobile SEO Measures
Objective of this seminar• Target
– Web Director– Web Marketer– Web Engineer– Web Designer
• Goal
Understand and be able to execute Mobile SEO measures.
Backgrounds
Paradigm shift is happening in the world of information search.
The device we use to search info is shifting from PC to Mobile devices.
Internet Usage Time
Insights from KPCB US and global internet trends 2015http://www.kpcb.com/internet-trends
• Approx. 5.6 hours per day. ( 2015 )• 51 % accounts for mobile usage.• Mobile usage percentage has increased by approx. 4 times in 7 years.
Internet Usage by Device
Comscore “Share of Demographic Audiences by Platform Usage”https://www.comscore.com/
• Multi platform usage accounts for over 60%.• Mobile only users is increasing.
Search Counts
Mobile Device > PC
In 2015
Mobile Search Tops at Google (Wall Street Journal)http://blogs.wsj.com/digits/2015/10/08/google-says-mobile-searches-surpass-those-on-pcs/
Google’s Issue
How to incorporate mobile-oriented search algorithms?
Otherwise, there is a risk that other mobile-optimized search engines may take over the Google’s position.
This is critical business risk for Google as 77% of their revenue is made up by Search Ad(AdWords).
The Business of Googlehttp://www.investopedia.com/articles/investing/020515/business-google.asp
Google’s Current Status
“Mobile Friendly”
Mobile-oriented search appraisal
Google’s Current StatusMobile Friendly algorithm is not taking significant effect, yet.
Reason:Putting too much emphasis on the mobile friendly algorithm causes confusion as the current search rankings may change drastically.
In user’s perspective, Web sites that provides high quality information should be given a higher search ranking than those with low quality information but mobile friendly.
∴Google’s Wish (Speculation)Probation period for the moment.They wish quality web sites to conform Mobile Friendly requirements ASAP.
Then、Google can further incorporate mobile-oriented algorithms, which makes their search engine mobile-optimized and selected by mobile users.
Which, in turn, allows them to grow revenue from AdWords.
Web site owner‘s issues
If we don’t implement Mobile SEO,our Web sites’ search rank may fall.
Cause serious potential risks to our business.
How can we implement Mobile SEO measures?
Index
• Objective of this seminar• Backgrounds• Issues– Google’s issue– Web site owners’ issue
• Mobile SEO Measures
Mobile SEO Overview
① Presenting Necessary Information
② High Usability
③Fast Browsing
④ Crawler Appeal
Pursue the following aspects under “Slow connection speed “ & “Small screen” limitations.
Mobile SEO Overview
① Presenting Necessary Information
② High Usability
③Fast Browsing
④ Crawler Appeal
Info
No matter the device types,the equal information needs to be presented
W3C “ One Web”
Why?Cause problems if there is inequality in info presented...
EC Web site “Had a good deal with detailed info!”
“I could have a better deal, if I had info presented on PC”
All the internet viewers should be equally treated.
How?• Mobile Website Implementation Methods
Responsive design is becoming the standardAnd recommended by Google.
Ease of URL share
Ease of update File size
Responsive ◯Same URL
◯Easy updates
☓Big CSS files.
UserAgentSwitch
◯Same URL
☓Cumbersome update
◯Can optimize the file size
Mobile/PCDifferent URL
☓Different URL
☓Cumbersome update
◯Can optimize file size
Responsive Design
Easily present the same information to several device types.
InfoPresentation
W3C “ One Web”
情報
Even if a new type of device emerges….
New Device?
Responsive Design
Web site can adapt to the new device by adding definitions into the CSS file.
∴Easy to pursue “One Web”
情報 見せ方
How?• Mobile Website Implementation Methods
Responsive design is becoming the standardand recommended by Google.
Ease of URL share
Ease of update File size
Responsive ◯Same URL
◯Easy updates
☓Big CSS files.
UserAgentSwitch
◯Same URL
☓Cumbersome update
◯Can optimize the file size
Mobile/PCDifferent URL
☓Different URL
☓Cumbersome update
◯Can optimize file size
←Recommended
Mobile SEO Overview
② High Usability
③Fast Browsing
④ Crawler Appeal
①Presenting Necessary Information
Understandable Web site
• Understandable “Web Site Structure”
• Understandable “Web Page Structure”
• Understandable “Web Page Design”
Understandable Web Site
• Destination First- Getting the desired information in the shortest path.
• Principles of Mobile Site Design“Principles of Mobile Site Design” ( Google )http://static.googleusercontent.com/media/www.google.com/en//intl/ALL_ALL/think/multiscreen/pdf/multi-screen-moblie-whitepaper_research-studies.pdf
With those guidelines, we need to designunderstandable “Web site Structure”,
“Web Page Structure” and “Web Page Design”
Understandable Web site Structure
• Tree Structure• Generate Sitemap ( HTML & XML )
Tree Structure
• Limit to 3~4 levelsAllow users to access to the desired info in 3~4 clicks.
• Crawler effective
Working with Site Mapshttps://docs.balsamiq.com/desktop/sitemaps/
Generate Sitemap• Easy to identify desired information• Provide chances to notice surrounding info• Crawler effective
Allows users to grasp the overall structure of the web site
Sitemap Generation ToolGenerates sitemaps in XML and HTML formats.
Understandable “Page Structure”
• Call To Action
• Create Concise Menu
• Easy Return to Yop page
• Layering Contents
Call To Action
Make CVR links explicit!
Pizza Huthttps://www.pizzahut.com/#/home
Concise Menu• Simple wordings Don’t be too SEO oriented.
e.g. “SEO Seminar Company”SEO Seminar → SeminarSEO Seminar Inquiry → Inquiry
• Limit to necessary linksToo much links will occupymuch screen space which reduces usability and may receive low rating from a crawler.
Easy Return to Top Page
• Logo linking to top page• Links to top page• Global navigation• Breadcrumbs• Page links
Dominos Pizzahttps://www.dominos.com/Amazon.comhttps://www.amazon.com
Custom Search
Google “Custom Search”https://cse.google.com/cse/?hl=en
Allow users to jump to the desired info with keywords.
Starbuckshttps://www.starbucks.com/
Layering Contents
• Mobile device has a small screen size.• Placing contents serially require multiple flicks.• Layering contents helps identifying a specific content fast.
→Use Tab or Accordion Menu→Use CSS than JS
。。 フリックが大変
Tab Menu
Accordion Menu
Serial PlacementLayering Contents
Place contents effectively in a small screen.
Resemble to booksLIG inchttps://liginc.co.jp/designer/archives/7456
Understandable “Page Design”
Usability > Design
Under a small screen size and low connection speed, usability overtakes pretty design.
Mobile Friendly Requirements1. Avoids software that is not common on mobile devices, like Flash
2. Uses text that is readable without zooming
3. Sizes content to the screen so users don't have to scroll horizontally or zoom
4. Places links far enough apart so that the correct one can be easily tapped
“Helping users find mobile-friendly pages” ( Google Webmaster Central Blog )https://webmasters.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html
Use readable font size1. Use a base font size of 16 CSS pixels. Adjust the size as needed
based on properties of the font being used.
2. Use sizes relative to the base size to define the typographic scale.
3. Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
4. Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.
“Use Large Font Size” ( Google Developers )https://developers.google.com/speed/docs/insights/UseLegibleFontSizes?hl=en
Set appropriate viewport setting
BOOTSTRAP’S RESPONSIVE LAYOUT(M5 Design Studio)http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/
<meta name="viewport" content="width=device-width,initial-scale=1">
「 Viewport Setting 」Settings to notify a browserabout the size of the rendering area.
Size Tap Targets Appropriately
1. Recommended minimum tap area size is approx. 7 mm(48 css pixel)2. Place more than 5mm(32px) space between links
3. Should be readable without zoom
Size Tap Targets Appropriately ( Google Developers )https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately?hl=en
Mobile Friendly Check
Mobile-Friendly Test( Google Search Console)https://search.google.com/search-console/mobile-friendly?hl=en
Device View
Chrome DevTools Overviewhttps://developer.chrome.com/devtools
Check with your own eyes!
The main priority of mobile SEO is to be liked by usersNot by a crawler.
Mobile SEO Overview
① Necessary Information
② High Usability
③Fast Browsing
④ Crawler Appeal
Fast Browsing
• Reduce Transactions• Reduce Coding• Avoid using images and JS• Use appropriate image formats• Resource Compression• Use Check Tools
Reduce Transactions
• Download image data once
• Use cache
• Use inline CSS
Download image data once
• Use CSS Sprites – Download a image file and clip images– Reduce transactions
CSS Sprites Generatorhttp://csssprites.com/
Use Cache
• Reduce transactions by use of cache.
• Example– Setting image cash-age to two days and CSS, JS, html files to 1day.
<Files ? “¥. (gif|jpe?g|png|ico)$”>Header set Cache-Control “max-age=172800, public”</Files><Files ? “”¥. (css|js|html) $”>Header set Cache-Control “max-age=86400, public”</Files>
Use inline CSS• Embed CSS into a HTML file.
– Reduces CSS file transactions.
• Use in the first-view of the Web site or in LP where the display speed is significant.
Critical Path CSS Generatorhttps://jonassebastianohlsson.com/criticalpathcssgenerator/
Reduce Coding• Mobile Based Design
– PC based design causes duplicate CSS definitions.• Require CSS definitions and cancelations.
– Mobile based design• Only requires additions of CSS definitions.
• Don’t place CSS definitions in <body>• Don’t use style attributes.
– Causes CSS definitions duplication.
#navigation {float: left;}….../*Smartphone*/@media only screen and (max-wdth: 360px){
#navigation{float:none}
}
#navigation {….}….../*PC*/@media only screen and (min-width: 961px){
#navigation{float:left}
}
Avoid Using Images
CSS3 Patterns Galleryhttp://lea.verou.me/css3patterns/
<i class="fa fa-facebook-official" aria-hidden="true"></i>
Font Awesomehttp://fontawesome.io/
Use alternative resources to images
Use appropriate image formats
“Image Optimization”(Google Developers )https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en
Animation?
Need High
resolution?
Need more than 256 colors?
JPEG
PNG-8 PNG-24
GIF
YesNo
No
NoYes
Yes
Resource Compression
• Image Compression– JPEGmini, tinypng etc
• Text Compression ( HTML 、 CSS etc ) DigitalCoding.Com etc
http://www.digitalcoding.com/
Use Check Tools
• Download Speed Check
• Usability Check
• Code Check
To get some ideas for improvement.
Download Speed CheckPage Speed Insightshttps://developers.google.com/speed/pagespeed/insights/?hl=en
Usability CheckGoogle Search Console https://www.google.com/webmasters/tools/home?hl=ja
Code CheckW3C Markup Validation Servicehttps://validator.w3.org/
Check Mobile Friendliness and Speed
Think with Googlehttps://testmysite.thinkwithgoogle.com/
Mobile SEO Overview
③Fast Browsing
④ Crawler Appeal
①Presenting Necessary Information
②High Usability
Crawler Appeal
• Use HTML5 Semantic Elements
• Set appropriate title and description
Use HTML5 Semantic Elements
• header • section • article • nav • footer • aside
W3C Schools “HTML5 Semantic Elements”https://www.w3schools.com/html/html5_semantic_elements.asp
Before:<div id=“header”></div>
After:<header></header>
example
Conveys semantic of HTML elements to a crawler.
Set appropriate title and description
• Title & Description lengths differs between PC and mobile devices.
• Title: Max. 70 chars≒ Description: Max. 100 chars≒ Place important info in the first 100 chars.
New Title & Description Lengths for Google SEO in Search Resultshttp://www.thesempost.com/new-title-description-lengths-for-google-seo/
Mobile SEO Summary
① Presenting Necessary Information
② High Usability
③Fast Browsing
④ Crawler Appeal
Pursue the following aspects under “Slow connection speed “ & “Small screen” limitations.
References• Insights from KPCB US and global internet trends 2015
http://www.kpcb.com/internet-trends
• Comscore “Share of Demographic Audiences by Platform Usage”https://www.comscore.com/
• Mobile Search Tops at Google (Wall Street Journal)http://blogs.wsj.com/digits/2015/10/08/google-says-mobile-searches-surpass-those-on-pcs/
• The Business of Googlehttp://www.investopedia.com/articles/investing/020515/business-google.asp
• “Principles of Mobile Site Design”(Google)http://static.googleusercontent.com/media/www.google.com/en//intl/ALL_ALL/think/multiscreen/pdf/multi-screen-moblie-whitepaper_research-studies.pdf
• “Helping users find mobile-friendly pages” (Google Webmaster Central Blog )https://webmasters.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html
References
• Size Tap Targets Appropriately(Google Developers)https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately?hl=en
• “Use Large Font Size”(Google Developers )https://developers.google.com/speed/docs/insights/UseLegibleFontSizes?hl=en
• Mobile-Friendly Test(Google Search Console)https://search.google.com/search-console/mobile-friendly?hl=en
• Chrome DevTools Overview(Chrome Developer Tools)https://developer.chrome.com/devtools
• “Image Optimization”(Google Developers )https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en
• W3C Schools “HTML5 Semantic Elements”https://www.w3schools.com/html/html5_semantic_elements.asp
• New Title & Description Lengths for Google SEO in Search Resultshttp://www.thesempost.com/new-title-description-lengths-for-google-seo/