Specify images for web pages
This is a general technique for specifying an official image for your site, without actually displaying it on the front-end. Useful for catch-all social-media purposes.
Thanks to social media like Facebook and Twitter, it is possible to fill the
<head> section of your web pages with endless meta tags, link tags, and so forth. Each social-media service has their own protocols, formats, and syntax, so you can spend a LOT of time trying to configure them all properly.
An easier way
Instead of spending your precious time working for the man, consider just using an all-purpose fallback image that most social-media services are smart enough to understand:
<link rel="image_src" href="http://example.com/path/to/image.jpg">
The key here is using
image_src as the
rel attribute for a
<link> tag. Then for the
href attribute, you can specify the path to whatever image you want to use across all compliant social-media services.
Here are some points to consider:
- The image should be formatted as GIF, JPG, or PNG
- Support for the
image_srcattribute is hit or miss, don’t use for mission-critical sites, but rather as an all-purpose fallback image
- Most social-media services prefer large images, so make sure that your linked image is of sufficient size (I like to go at least 1500px or so)
- It’s fine to add multiple
image_srclinks to give users a choice (e.g., “choose an image” via whatever social-media site they are using)
You can see this technique used here at WP-Mix.com. Check out the source code to see the
<link> in action :)