www, redirects and mixed content

Module 3: Address, https and users · Reading time: 9 minutes

Learning objective: After this lesson you can choose one main address, redirect all variants to it with a single redirect, and find and fix mixed content.

Key concepts: canonical address, 301 and 308, redirect chain, mixed content, search and replace in the database, serialised data

Four addresses, one website

Your website can be reached via four addresses:

http://example.com
http://www.example.com
https://example.com
https://www.example.com

For a visitor this makes no difference, but for search engines these are four different addresses with the same content. Cookies (such as your login cookie) also apply per name: if you log in on www, you are not logged in on the bare domain. That's why you choose one canonical address (the main address) and redirect the other three to it.

Which one you choose is a matter of taste (lesson 2.1). What matters is that the main address is the same everywhere: in the DNS, in the certificate, in Settings > General (lesson 3.1) and in the redirects.

Redirecting with a 301, in one step

A redirect is a response from the server: "this page is somewhere else". The browser then goes to the new address automatically. The code tells you what kind of redirect it is:

Code	Meaning	Use
301	Moved permanently	The standard choice for http to https and for www to the bare domain (or the other way round)
308	Permanent, and the method (for example a form submission) stays the same	Also fine for this purpose; browsers and search engines treat it as a 301
302 or 307	Temporary	Only for something that really is temporary, such as a maintenance page

A permanent redirect tells search engines that the new address is the real one. With a temporary one, they keep remembering the old address.

Also watch out for the chain. Say your main address is https://example.com. Then you want:

http://www.example.com   301  https://example.com/
http://example.com       301  https://example.com/
https://www.example.com  301  https://example.com/
https://example.com      200

Every variant reaches the main address in one step. What often happens instead:

http://www.example.com   301  https://www.example.com/
https://www.example.com  301  https://example.com/

That works, but it costs an extra step (extra waiting time, especially on mobile) and an extra TLS handshake. Worse is a loop: the web server redirects to https, WordPress redirects back to http because the addresses in its settings are still set to http, and the browser reports "too many redirects". Two settings are then working against each other. Make sure only one party redirects to https (the web server or the control panel), and that the addresses in WordPress are already set to the main address.

WordPress also redirects by itself: if someone requests https://www.example.com/contact/ while the website address is https://example.com, WordPress redirects to https://example.com/contact/. This only works if the request reaches WordPress, so if the web server also sends the name www to this website.

Mixed content

Mixed content is an https page that loads parts via http://: an image, a stylesheet, a script, a font or an embedded video. The browser considers this unsafe, because those parts can be altered along the way.

Scripts, stylesheets and iframes loaded via http are blocked by browsers. Your website then looks broken or a feature stops working.
Images, audio and video loaded via http are automatically fetched via https by modern browsers; if that fails, they are blocked. The padlock may then show a warning.

Where it comes from:

Old links in your content: a website that used to run on http has <img src="http://example.com/wp-content/uploads/..."> in thousands of Posts. WordPress stores those links literally in the database.
Theme or plugin settings with a full address, for example a logo or background with http://.
External parts from another website that are only available via http. You need to replace or remove those.
Addresses in Settings > General that are still set to http (lesson 3.1).

How to find it

Open the page, press F12 and look in the Console tab. The browser reports every piece of mixed content with the address of the part. Or search the page source (Ctrl+U) for src="http:// and href="http://. Links to other websites in ordinary text (<a href="http://...">) don't cause mixed content; it's about things the page loads.

Search and replace, but done properly

The fix for old links in your content is to replace every http://example.com in the database with https://example.com. The temptation is an SQL command such as:

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

Don't do that. Many settings of themes, plugins and widgets are stored serialised. That looks like this:

s:27:"http://example.com/logo.png";

The s:27 means: a text of 27 characters follows here. After a plain replacement the text is 28 characters (an s was added), but it still says 27. PHP can then no longer read the value and the setting silently disappears: an empty menu, a missing logo, widgets that are gone.

Use a tool that updates those lengths, and always make a backup first (lesson 8.1): search and replace has no recycle bin.

WP-CLI: look first, then act. In the terminal, go to your WordPress directory and run the trial run first (first line), and only then the real one (second line).

wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid --dry-run
wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid

With --dry-run you see how many replacements there would be per table, without changing anything. --skip-columns=guid leaves the fixed identifiers of Posts (the guid column) alone; WordPress advises never to change them. Without an extra option, WP-CLI only works on the WordPress tables. If a plugin has its own tables with the same prefix, add --all-tables-with-prefix. Only use --all-tables if you know why: it touches every table in the database, including those of another website or application.

A search and replace plugin that supports serialised data (there are several in the plugin directory on wordpress.org). Use the trial mode there first as well, and remove the plugin again afterwards.

Never replace something like example.com without http:// or https:// in front of it: you'd also hit email addresses and other text. The full procedure, including for those without a terminal, is in the knowledge base article on search and replace in the WordPress database (see Further reading).

In practice: what it looks like in a control panel

We use DirectAdmin as an example. Other control panels have a similar switch for "always https".

In the domain settings, turn on Force SSL with https redirect (lesson 3.1).
For the domain, choose whether www should go to the bare domain or the other way round (in DirectAdmin in the domain settings; otherwise with a redirect via Site Redirects or .htaccess).
Check the chain with the exercise below or with your browser's developer tools (Network tab, "Preserve log" checkbox).

Summary

Choose one canonical address and send the other three variants to it with a 301 (or 308), in one step.
Let only one party redirect to https; otherwise you get a loop.
Mixed content is an https page that loads parts via http; the browser console shows which ones.
Replace old links in the database with wp search-replace or a plugin that understands serialised data, never with a plain SQL REPLACE.
Always make a backup first, and do a trial run first (--dry-run); leave the guid column alone and stick to the WordPress tables.

Quiz

Exercise

Exercise A3.2: One main address and no mixed content. Enter your domain. The tool opens the four variants (http and https, with and without www) and follows the redirects. A pass means: all four end up at the same address with https, with at most one redirect per variant and only permanent codes (301 or 308). The tool then reads the HTML of the homepage and looks for scripts, stylesheets, images, iframes and fonts loaded via http://.

Cookies at WebOké

Cookie settings

Necessary

Marketing