How I fixed the Twitter card Wordpress SSL issue.

James Vardy
Oct 28, 2016 · 2 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store