HTTPS & Mobile-First
Secure your site with HTTPS and optimize for mobile-first indexing.
Two baseline requirements of modern technical SEO are security and mobile readiness.
HTTPS
HTTPS encrypts traffic and is a confirmed (lightweight) ranking signal. Browsers flag non-HTTPS pages as "Not secure". Redirect all HTTP URLs to HTTPS with 301s.
Mobile-first indexing
Google predominantly uses the mobile version of your site for indexing and ranking. If your mobile site hides content or is hard to use, rankings suffer.
Mobile checklist
- Use a responsive design with a proper viewport meta tag.
- Keep the same content and structured data on mobile and desktop.
- Ensure tap targets are large enough and text is readable.
Example
<!-- Essential for a mobile-friendly, responsive page -->
<meta name="viewport" content="width=device-width, initial-scale=1">When to use it
- A small business migrates from HTTP to HTTPS after Chrome starts labeling their site 'Not Secure', recovering lost users who were abandoning the checkout page.
- An SEO team discovers their desktop-only nav menu is invisible on mobile because of CSS display:none, causing Googlebot's mobile-first crawler to miss critical links.
- A developer implements responsive images and removes viewport-fixed elements so the Google Mobile-Friendly Test reports zero mobile usability issues.
More examples
HTTPS redirect in nginx
A permanent 301 redirect from HTTP to HTTPS consolidates link equity on the secure URL and satisfies Google's HTTPS ranking signal.
server {
listen 80;
server_name example.com www.example.com;
# Redirect all HTTP traffic to HTTPS
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
server_name example.com www.example.com;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
# ... rest of config
}Mobile-first viewport meta tag
The viewport meta tag and responsive images ensure Googlebot's mobile-first crawler renders and indexes the same content as desktop users see.
<head>
<!-- Required for correct mobile rendering -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Avoid: fixed pixel widths that break mobile layout -->
<!-- <meta name="viewport" content="width=640"> -->
</head>
<!-- Responsive image for mobile-first indexing -->
<img
src="/images/hero-800.jpg"
srcset="/images/hero-400.jpg 400w, /images/hero-800.jpg 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Hero product image">Check mobile usability via API
The Mobile-Friendly Test API returns a pass/fail verdict and lists specific usability issues such as clickable elements too close together or content wider than screen.
# Google Mobile-Friendly Test API
curl -s -X POST \
'https://searchconsole.googleapis.com/v1/urlTestingTools/mobileFriendlyTest:run?key=YOUR_KEY' \
-H 'Content-Type: application/json' \
-d '{"url": "https://example.com/"}' \
| python3 -c "
import sys, json
r = json.load(sys.stdin)
print('Mobile friendly:', r.get('mobileFriendliness'))
for issue in r.get('mobileFriendlyIssues', []):
print(' -', issue.get('rule'))
"
Discussion