Basic SEO for the Mobile and iPhone

When optimising your site for mobile phones, there are some things you need to know and be aware of. Googlebot-Mobile and other mobile search engine bots crawl sites differently when compared to normal, traditional search engine bots. In part, they determine a site’s ranking on how well it renders on a particular mobile so for different mobiles, expect to see varying results. Another ranking factor I believe to hold some weight is the loading speed of the page due to mobile devices having significantly lower download speeds than traditional means.

Mobile SEO

For mobiles (other than the iPhone), create a stylesheet called handheld.css. This allows you to style up your existing website for mobile phones without the need of creating a whole new site which may cause problems with duplication. Anyone accessing your site through a mobile will automatically trigger handheld.css to be called upon. To link the stylesheet, include the following into the common HTML header.

<link rel="stylesheet" href="handheld.css" media="handheld" type="text/css" />

iPhone SEO

The iPhone does not pull the handheld.css stylesheet, so a separate stylesheet needs to be created and named iPhone.css. iPhones will detect this and render the site accordingly. You can either style this stylesheet as you like or duplicate the existing handheld stylesheet, it doesn’t matter.

A little hack you can use if you’d rather not mess around with two separate stylesheets is to replace the above link with this one

<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />

This link catches any handheld and the iPhone with its “only screen and (max-device: 480px)”. It’s a media query that luckily  iPhone understands and renders.

WPTouch

If your site is built in WordPress, rendering your site on the iPhone is even easier. Simply install the WPTouch plugin and you’re good to go! I really like this plugin, it makes a site much more usable and easier to browse. The good thing is the option (at the bottom of the page) to switch back to normal view if the user wishes to do so.

Mobile Sitemaps

It’s essential to create and submit a mobile sitemap if you’ve not already done so. You can find more information on Google Webmaster’s support page. An example of a mobile sitemap containing a single entry is shown below

<?xml version="1.0" encoding="UTF-8" ?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
    <url>
        <loc>http://mobile.example.com/article100.html</loc>
        <mobile:mobile/>
    </url>
</urlset>

Finally

Of course, the most basic of SEO should never be overlooked. On-page checks are essential, such as ensuring your page titles are optimised properly, the use of H1, H2 tags are used appropriately, and that image alt attributes are included (but not spammy).

Trackbacks

  1. [...] This post was mentioned on Twitter by Dhandeep Rahevar, Julie Cheung. Julie Cheung said: Basic SEO for the Mobile and iPhone | Julie Cheung – Mozilla Firefox http://ow.ly/2jb4l [...]

Speak Your Mind

*