When building website and landing pages in Hubspot COS, it's important to pay attention to how that page will preview when sharing on social media.
SIDEBAR: When publishing blog posts the HubSpot COS handles this by default so this post is going to get a little "geeky" but it will help you make that great first impression so stick with me, okay?
If your page includes multiple images, you can't always count on someone clicking the little arrows to choose the best image when sharing your page (because chances are that they won't!)
So how do you make sure the right image appears when sharing your page?
You add an Open Graph meta tag!
If you don't know what that is, it's simple: Open Graph meta tags are simple HTML tags placed in your page's <head> section.
Then, when your content is shared, social media sites like Facebook, Twitter, and LinkedIn look for this information to generate the title, description, and preview image for your content!
On blog posts, Hubspot automatically handles this for you, using your post's featured image.
For website and landing pages, however, it appears you're on your own.
Not to fear, though, it's pretty simple to do this yourself.
Here's how:
Step 1. Find the image you want to feature in your file manager.
For example, on TheSalesWhisperer.com's home page (at the time of this blog post's writing), we want to feature our Make Every Sale logo.
In Hubspot Marketing, Go to Content > File Manager and search for the image you want.
Click the filename to open the File Details view, and then click the Copy URL link below the File URL field - we're going to use this momentarily!
Step 2. Navigate to the page you want to edit the featured image for.
You can do this one of two different ways.
- Access the page directly and click the Hubspot icon floating in the corner to open the Hubspot Tools menu, then click Edit Page.
- Navigate to Content > Website Pages (or, if you're editing a landing page, Content > Landing Pages) and search for the page you'd like. Once you've found the correct page, click the Edit button next to it.
Once you're on the edit screen for the page, click the Settings tab at the top, and then scroll down to the Page Settings section under Advanced Options and click the Edit Head HTML link.
Paste the following code in the box that pops up:
<meta property="og:image" content="PASTE YOUR IMAGE URL HERE" />
Be sure to replace "PASTE YOUR IMAGE URL HERE" with the file URL from Step 1.
Click the Save changes button, followed by the Update button in the upper right-hand corner.
Finally, click the Update page now button, and you're done.
Congratulations, you've customized the Open Graph preview image for your website or landing page in Hubspot COS!
P.S. If you attempt share your content and notice an older image is still showing up, it's likely just being cached by the social media site and should automatically update itself after a bit of time has passed. However, it is possible to force Facebook to update the information it has previously saved by visiting their Sharing Debugger, entering your page's URL, and clicking the Debug button.
Under the When and how we last scraped the URL section, click the Scrape again button, and Facebook will save the latest updates to your page!
Twitter also offers some tips and tricks to troubleshoot outdated sharing information, though it's a bit more technical in nature than Facebook's resource and won't work if someone else is directly sharing your content.
Similarly, the only way to get LinkedIn to display updates is to trick it by adding dummy parameters to the end of your URL. This only works when you're the one sharing content to LinkedIn—it will not force the update if someone else is doing the sharing, so you will likely have to wait out their cache, which lasts for 7 days.
Now go sell something.
