Responsive Website Design
A responsive design enables a website to scale to the size of the device a user is browsing on. Ensuring your site is responsive is an important element for mobile friendliness and also provides a positive user experience and SEO benefits. Our SEO Office Hours notes below compile key takeaways relating to responsive website design, from Google’s regular SEO advice sessions.
For more about mobile website versions & SEO, check out our additional resources:
Migrate From Separate Mobile to Responsive Before Mobile First
If you are migrating your separate mobile pages, set up 301 redirects from your mobile URLs to your canonical pages. Rankings should not be affected before mobile-first indexing, however you might see more fluctuations after mobile-first indexing as your mobile URLs will be the canonical pages, and it will be seen as a site migration.
Dynamic Mobile Pages Take Precedence over Responsive
If you have a vary header which returns a different page for a mobile user agent, Google will use that as the mobile page instead of the responsive page.
Use Redirects to Remove a Separate Mobile Site
If you are moving from a separate mobile site to a responsive site, redirect Mobile URLs back to Desktop and remove the rel alternate links from the desktop pages. You can use JavaScript redirects but it will take longer for Google to pick them up.
Responsive Sites Don’t Need to Change for Mobile-first
Responsive sites don’t need to change for mobile-first indexing.
Responsive Design is Optimal for Mobile-first
John suggests that a responsive design is the optimal mobile setup for mobile-first indexing, as it avoids the issues of different content and links on your mobile pages.
Redirect Deprecated Mobile Sites
If you want to remove a mobile site because you now have a responsive site, you should ideally redirect to manage bookmarks for users, but Google doesn’t really care as they’ll drop the mobile URLs when they recrawl the desktop URLs without the mobile rel tag.