Information Resources
Twitter Cards and WordPress
In our “Twitter Cards” Information Resource (February 2013), we shared with you a step-by-step guide for setting up your meta-tags, testing, and applying to Twitter to implement Twitter Cards into your WordPress site. Over the last two years, we’ve updated our process to best suit our clients who want to refine Twitter Card content for their WordPress sites, and overcome the limitations of sites with AJAX-loaded content, which was previously impossible with Twitter.
If you’re using Twitter Cards on your site, you might find that it’s more useful to serve a different template for requests made by Twitter’s crawler (“Twitterbot”) than the entire/public site template, which is largely ignored by the current crawler processes. Serving different content is generally discouraged, since bots should really see what your public traffic sees. In this case you WILL be presenting a condensed post– but it’s still the same content — so it’s an acceptable technique and not something that will be interpreted as any kind of bot spoofing.
The template we created for our Twitter Cards features all of the necessary header meta, but none of the auxiliary header includes (the scripts, stylesheets, functions, etc.) that a public-facing template depends on. We also omit the template body content. Our WordPress .htaccess has these additional instructions:
The .htaccess
# twitterbot rewrites (for twittercards)
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{HTTP_USER_AGENT} (Twitterbot|twitterbot|Twitterbot/1.0)
RewriteRule . index.php?request=$1&metaonly=true [L]- We use an AJAX content loader, so the "request=$1" part of the rewrite informs WordPress which content is to be loaded into the template through AJAX, after the wrapper is loaded. This isn’t relevant for the template switching specifically, but you might need to do something like this too, if your site uses an AJAX content loader.
- The additional variable "metaonly=true" is what we added to do the template switching. This means that all requests to the WordPress loop by Twitterbot will be appended with this argument that will later inform the theme to present a metadata-only version of the template.
The PHP
Content-switching can be performed in a few different ways, depending on your developer’s preference. For the sake of clarity, in this example we’re hijacking the template loader directly in the header file (header.php) which is found inside every WordPress theme directory.
Ours looks structurally like this (irrelevent matter replaced by ###):
<?php
/**
* The header for the theme.
* Header Description
* @package packagename
*/
?><!DOCTYPE html>
<html ###>
<head>
<meta http-equiv="content-type" content="text/html; charset=###">
<meta name="viewport" content="###">
<title>###</title>
<link rel="profile" href="###">
<link rel="pingback" href="###">
<!-- OpenGraph Properties -->
<meta property="og:title" content="###" />
<meta property="og:type" content="###" />
<meta property="og:url" content="###" />
<meta property="og:image" content="###" />
<?php
/********************************************************************************
* MetaOnly flag: condensed for twittercards only
********************************************************************************/
if(isset($_GET['metaonly'])){
$props = my_function_to_get_post_properties($post->ID);
?>
<!-- twitter cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="###">
<meta name="twitter:title" content="<?=@$props['title'];?>">
<meta name="twitter:description" content="<?=@$props['description'];?>">
<meta name="twitter:image" content="<?=@$props['image'];?>">
</head>
<body>
<!-- nothing here -->
</body>
</html>
<?php
exit; //done
/********************************************************************************
* The Normal Blog Header
********************************************************************************/
} else {
wp_head();
That’s all there really is to it. You can then use the somewhat functionally limited TwitterBot Linter to validate the meta.
Notes
- If you suppress bot indexing on your WordPress site (say, during development), the page will not validate, obviously, since you’re asking bots to respect your wishes not to crawl your website.You can ALLOW ONLY indexing of your Twitter Cards template, if you wish, by adding this function into your functions.php:
//disable robots except for Twitter Cards template add_action( 'wp_loaded', 'thissite_blog_public' ); function thissite_blog_public() { if (get_option('blog_public') == "0") { if(isset($_GET['metaonly'])) add_filter('pre_option_blog_public', '__return_true' ); } }
Remember all traffic to your site should be arriving at your permalinks. This includes all bots that crawl the same page templates that your public traffic will see. Since your WordPress is set up to discourage crawling, they will stop at the front door, and move along.However, for Twitterbot, the
"metaonly=true"variable is appended by your rewrite, and this function then opens the door to them for crawling.Someone who wishes to see your Twitter Cards template instead of the public template can manually add this flag if they wish. I just don’t know why they would.
- If you prefer to use other Twitter Card Types (this example uses the ‘Twitter Card: Summary Large Image‘ card type), you could add custom field(s) to your wp-admin to set and switch these properties in your header. In fact, now that you’ve got control over what Twitterbot sees, there are a lot of cool things you could do. Did this article inspire some creative ideas? We would love to hear them.
Permalink: https://www.era404.com/info/twitter-cards-and-wordpress/
