Have you thought about what it looks like when your website gets shared on social media? No? If not, now is the time to start thinking about it.
What do I mean? I’m talking about what someone would see if you or someone else shared your homepage on Facebook, Twitter, or LinkedIn.
If I go to Facebook and paste in my website’s URL, this is how it will look to other people when they see the shared status. It shows a preview image and the meta title for my page.
Did you know you can control how that looks? You can! And you should.
If you don’t decide how you want your website to look when shared, then social media will decide for you by pulling the first image on your page and the page title by default. Which could be fine.
But what if your image isn’t exactly the right size for sharing? What if it’s portrait instead of landscape? What if the first image on your page doesn’t really represent your business? What if it’s not branded?
If you have a business that you think people might want to share on social media, then it’s a good idea to think about how it will look when shared and choose how it will best represent you.
Social Sharing 101
Image: You need to select the image you want to share, and you need to make sure it’s cropped to fit properly. Don’t select a portrait image unless you crop it to the exact proportions first, otherwise the social networks will crop the image for you, and not always in the best way.
What size should your images be?
- Facebook: 1200 X 630 pixels
- Twitter: 1200 X 675 pixels
- LinkedIn: 1200 X 627 pixels
Do you see a common thread here? They are almost all the same size, and all 1200 pixels wide. Do you have to have a different featured image for each social network that’s cropped exactly? No. Usually if you crop it for one it will work for all three since they are all close in size.
(Sometimes they change these images sizes, so this is what we use in 2020. It may be different next year.)
How do you tell social networks what image to use?
One of the most asked questions. If you don’t designate the image, then by default it will usually grab the first image on the page, which is often not ideal.
In WordPress, you can select a Featured Image for each page and post. If you are using Gutenberg, just look in the “Document Panel” for Featured Image and upload your featured image there.
If you are still using the Classic editor, look for the Featured Image meta box, usually on the right somewhere below the Publish box.
You can also choose your social images in the Yoast plugin. There’s a tab especially for your social images and you can select a specific images for both Facebook and Twitter.
If you really wanted to do the exact size for each of FB, Twitter and LinkedIn, you can use Yoast to designate the right image for Facebook and Twitter, and then use the regular Featured Image box for your LinkedIn image.
Why is this important?
Often times, what’s shared on social media is the first interaction a user has with your website and it can make an impression. There’s an election coming up in November, and in my town there are 15 people running for four available spots on the school board. For these people, social media is going to be one of the most important marketing tools they have because there is a pandemic happening and going door-to-door is probably not possible or recommended.
I made a website for my friend Amy who is running, and here’s what it looks like when you share her website:
This looks fantastic, if I do say so myself. It’s got a great photo, has her logo, and some great introductory text. Apparently not all 15 people running for school board have friends who are web developers, because very few of their websites thought of setting up a great image for sharing. Some of them have no image when shared at all. This will definitely stand out when shared.
Do you have to impose your logo on the photo? Nope. A great, well-thought out photo that’s cropped properly is great too. In some cases, though, adding the logo works well and adds a lot. Since this is a candidate website, I wanted it to coordinate with signs that will have her logo, so I made sure to include it in the social sharing image.
Also keep in mind that each page of a website can have a different featured image, so if you think other pages of your website should have something designated in the event that page gets shared, then those should be set up too. Designating a sharing image on the homepage won’t automatically update the image that goes with your About page or Services page.
Think about the words too
Title: You can pick exactly what verbiage gets shared with your site! And you should, otherwise the social networks will pick for you. By default, what gets shared is your page name and then possibly your website name. You know what a lot of people name their homepage? Home. I know, my homepage is titled Home too. I name it that because it makes it really easy to find my homepage in my list of pages.
But I don’t want that title to show up on the page or when shared. That’s a terrible idea! Instead, you want a title that accurately describes your website and gives a compelling reason to click through. And Home | Sumy Designs, LLC is not very compelling.
Always create a custom meta title and description
A custom meta title is what will get shown when someone shares your pages, so write something that sells. For Amy’s site, I chose Amy Austin for West Lafayette School Board, which both describes what her site is about and who she is, and what we want people to do. Spend some time thinking about your message, but keep in mind that you only have so many characters (about 60 characters) so you can’t be wordy.
This meta title is also what gets shown when your site comes up in the search engine results, so it’s awfully important for SEO.
How to write a custom meta title
If you are using the Yoast plugin, just scroll down to the Yoast Meta box and click “Edit snippet” and you can create your own custom meta title that will get shown when your website gets shared.
Adding in a custom description is great too, although keep in mind that with social sharing, the description will almost always get truncated so the title is most important. (That description is important for search engine results though, so don’t skimp on it.)
Help! I updated my featured image but Facebook isn’t showing it!
Don’t worry, we can fix that. Facebook has a long memory. If your website has been shared before by anyone, then that preview has been saved by Facebook and is going to be saved for a long time. We need to let Facebook know it’s been updated, so they can update the preview. You can use a little tool called the Facebook Debugger. Just visit the debugger and paste in your URL. If the preview doesn’t look how you think it should, click the “Scrape Again” button.
If it still isn’t updating, go back to your website and clear the cache if you haven’t done that. Then go hit Scrape Again. Sometimes you’ll have to scrape it a few times to get a new preview in there, but this should fix it for you.
What about sharing on Instagram?
You can’t really share links in Instagram the same way you can on other social networks. The only place you can have a working link is in the bio. If you post a link with an image you are sharing, it’s just link text and is unclickable. You can’t really “share” a website, you are sharing a photo.
If you want to share your website on Instagram, you’ll be uploading a photo that you want, adding a caption for your photo about your website, and then typically adding a link in the bio.
The ideal Instagram sharing size is 1080 x 1080 pixels, which is a square versus the landscape images you are sharing on other social networks.
There you go. Go forth and update your website so it can be shared beautifully!
Amy Masson
Amy is the co-owner, developer, and website strategist for Sumy Designs. She's been making websites with WordPress since 2006 and is passionate about making sure websites are as functional as they are beautiful.