- Mobile Accessibility
- Mobile Title Tags
- Mobile Meta Description Tags
- Mobile Website URLs
- Mobile Device - Desktop Site Redirections
- Desktop Device - Mobile Site Redirections
- Desktop Site - rel="alternate" tag
- Mobile Site - rel="canonical" tag
- Click through to Desktop Site
- Wordy Content
- Tap targets
- Font Legibility
- Mobile Friendly Call to Actions / Sales Funnels
- Click to Call
- Apple Phone Icons
Website Design Types - Mobile SEO / UX
Nowadays there is a huge demand for mobile & tablet accessible content with most people now having smartphones and access to the internet on them. In many niches more people access sites through mobile or tablet devices that through traditional desktop devices. Hence there is a strong and very real need for most if not all businesses to meet this demand with cross device accessibility to their website and website functionality.
This article looks at the need for mobile & tablet friendly sites and the impacts of this on SEO and UX (User Experience). For information on more modern design types such as responsive and adaptive website design, please follow the link.
As discussed above a website should be accessible on a range of devices and the core functionality of the site should also transcend devices. There are some simple checks that can be done to ensure that a website operates as desired across multiple devices:
Use a user-agent switching tool and set the user-agent to a mobile device to see if the page loads any differently or if you are redirected to a mobile website.
Similar to the above check, use the user-agent switching tool and set the user-agent as a tablet device. Ensure that tablets aren't being redirected to the mobile website.
Ensure that the title tags display well over two lines. Google still provides approximately 70 characters for the page title, but the width of the screen forces the page title onto two lines.
As Google truncates mobile Meta description tags at approximately 120 characters, ensure that these are shorter than 120 characters in length.
As per the desktop website, ensure that the mobile website URLs logical and keyword rich, following a hierarchal URL structure. More advice is provided on this topic under the URL structure article.
Ensure that mobile visitors are redirected automatically from the mobile version of the website to the desktop site. Ensure they are delivered to the specific page they were trying to view, not the homepage.
Ensure desktop visitors are redirected automatically from the mobile version of the website to the desktop site? Ensure they are delivered to the specific page they were trying to view, not the homepage.
Google uses the rel="alternate" annotation to serve the correct language or regional URL to searchers, hence it is important that you ensure that desktop pages have a rel="alternate" tag implemented that points to the mobile equivalent of that page.
<link rel="alternate" media="only screen and (max-width: 720px)" href="http://m.example.com.au" />
In order to avoid problems with duplicate content it is important to use a canonical tag to point search engines to the original source of a page’s content.
On a mobile site where the content is the same or very similar the main website, ensure that mobile pages have a rel="canonical" tag implemented that points to the desktop equivalent of that page.
E.g. <link rel="canonical" href="http://www.example.com.au" />
This may not be relevant if a mobile site is designed with unique content or one that serves the different intent behind mobile browsing for your business. Without this tag the mobile site could start to rank where the desktop version should rank.
Ensure that mobile visitors are able click through to the desktop version of the site and the option is easy to find. This overcomes issues with rendering the site on a mobile device, the user may wish to access the desktop version of a website and not being able to do so can cause frustration.
Mobile site visitors often have a different intention behind a visit, it may be that they are in a different stage of the conversion funnel or the intent may be completely different. For example, someone searching for Pizza on a mobile device may be looking for a restaurant to eat in while a desktop search may be motivated by finding a pizza delivery service.
Since mobile visitors have to deal with small screens, are often on the go and have less patience, try to edit wordy content and get the same message across as briefly as possible.
Aim your content at your target audience based on their needs and intent.
If videos exist on the mobile website, make sure they load and run properly on mobile devices.
Tap target are triggered when Page Speed Insights detects that certain tap targets (e.g. buttons, links, or form fields) that might be too small or too close to one-another for a user to easily select them on a touchscreen device.
Ensure a positive user experience by making sure that tap targets are sized appropriately (at least 25px x 25px).
Similar to the above, to ensure a positive user experience, make sure that font sizes are legible and easy to read.
On the mobile website, check to ensure that all of the call to actions / sales funnels are mobile friendly. For example if normally a user would complete a long form, on a mobile device it may be better to get them to call or complete a smaller form.
To be able to track calls originating from the website and simplify the process of customers calling, ensure that telephone numbers are clickable and utilise "tel" as part of the hyperlink.
This is a key step when targeting your mobile traffic more effectively, it’s easier for someone holding a phone to click a number and then put the phone to their ear rather than completing a 10-step form.
An Apple Phone Icon is the icon that appears on their desktop once the webpage has been saved on the Apple device.
To minimise 404 errors when apple devices visit the website and to take advantage of setting customised icon images, ensure that Apple icons have configured within the <head>...</head> content of the website. Check for HTML content that resembles the below:
<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />