Monday, 30th December 2024
Here they are, in an structured, organised manner, ready to copy and paste! Works with BlueSky, X, Facebook and so on. Some tips below.
This post is based on my research/experience. I'm not an SEO or social media expert, so use at your own risk. Feel free to let me know in the comments any corrections or recommendations!
Lately, I've been using social media to fail to promote my site and projects. I thought it would be handy to have a bookmark with the HTML meta for doing exactly that, in one place, that I can copy and paste from. And I thought others might find it useful too.
So, if you're posting your website, web page or web app on social media. And you want it to have the correct title, description and image. All you gotta do, is copy and paste the above chunk into your <head> section, and edit it to suit your needs. Few tips below.
(I'm no expert this is just stuff that's worked for me lol.)
I've personally found a resolution of 876x438 can work quite well for consistency across different social media platforms. I can't remember where I got that resolution from. 😆
For the image, you might wanna move important visual elements in by about 64px to account with the wacky ways all the different stupid platforms decide to crop (why they can't just do max-width:xxx I really don't know).
If you need to CHANGE the image after posting it, you need to change the image's filename e.g. add _2 and update it in the metas. On X, I've found you then have to use the Twitter Card Validator (which says it doesn't work but it works for this) and THEN repost to get it to actually update.
Best I can tell "Canonical" just means the preferred URL of the page. So for example the page you're looking at now can be visited in the following ways.
My preferred/canonical one is the first one because it's the one I link to. Specifying a canonical URL can also help Google and other search engines understand how to navigate your site and reduce "could not index" errors.
Ideally, ALL of your pages. What do you want a potential visitor to see if someone shares that page?
I think that about wraps this post. Did I miss anything, get anything wrong? Let me know in the comments!