How I fixed the Twitter card Wordpress SSL issue.

If your wordpress site uses SSL and is on shared hosting then you’re probably having issues with Twitter cards not showing at all, or not showing images.

After the standard bit of googling and forum trawling I found out it’s because Java based Twitter treats SSL certs very strictly.

Sites on shared hosting most likely have a different virtual host SiteName & SiteAlias in httpd.conf to what is on the SSL cert itself.

Our hosting provider said they couldn’t correct these changes without moving the whole site which was too much a hassle at this time. Meh, let’s find another way.

So how do we fix this?

In our htaccess file we had a rewrite rule directing all http pages to the https versions. This was originally intended to avoid any dupe content SEO issue with Google between the http & https versions of the site. So with this filter anyone visiting the site (including Twitter) is seeing the https version.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC,OR]
RewriteCond %{HTTP_HOST} ^www.yourdomain.com [NC]
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [L,R=301,NC]
</IfModule>

As Twitter doesn’t like SSL sites on non dedicated hosting, we want Twitter to direct to the http version of the site. That way no SSL & no issue. So we add this to the rule…

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC,OR]
RewriteCond %{HTTP_HOST} ^www.yourdomain.com [NC]
RewriteCond %{HTTP_USER_AGENT} !Twitterbot [NC]
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [L,R=301,NC]
</IfModule>

Now run the site through the Twitter card validator. Progress! The card now appears.

New problem, where are the images? It’s because these are all still https paths. A bit more digging and another simple fix.

Add this filter to change the Yoast SEO plugin Twitter image paths to be http rather than https.

function wpseo_twitter_image_force_http( $img ) {
$img = str_replace(‘https://', ‘http://', $img );
return $img;
}
add_filter( ‘wpseo_twitter_image’, ‘wpseo_twitter_image_force_http’ );

Yay! All working. If you share the http version of any page on our Wordpress site then you’ll see full twitter cards with images.

Hope this help you.

Edit: This doesn’t redirect https links http so they’ll still fail. I’ll fix that soon.

Show your support

Clapping shows how much you appreciated James Vardy’s story.