Typepad Knowledge Base: Add A Featured Facebook Image With Open Graph Tags

When you share your posts with Facebook, Twitter, and other social media, the default setting will display an image from the body of your post. However, if you'd rather have a specific image that represents your blog display each time, you can override that default behavior. Setting a default image is a good idea if you don't include an image in every post or if you want to make posts from your blog easily recognizable in a Facebook newsfeed with a logo.

Meta tags using the open graph protocol can be added to the head section of your blog to set a static image which will then be picked up by Facebook and other social media sites.

Upload Image To Your Typepad Account

First, you will need to upload the image you wish to use to the File Manager in your Typepad account. The image will need to be sized before uploading it.

Images are required to be at least 200 pixels wide by 200 pixels high. The maximum image size is 1500px by 1500px with a file size no greater than 5MB.

Facebook suggests using images which are 1200 wide and 630 high for the best preview with the link to the post below the image. Smaller images (600 x 315 px) will display with the link to the post on the right. Facebook has more information on their developer's page here.

Go to Library > File Manager and click Browse or Choose File, locate the image on your computer, click Open, and click Upload. The list of files will update with a link to the newly uploaded file. Click on the filename to open the image in your browser and copy the image URL. The image URL should be similar to: http://example.typepad.com/blog-logo.jpg

Add Open Graph Tags To Head Module

Next, open the Blogs menu, select your blog, and click to Design > Head Module. The Head Module is available with the Unlimited and higher plans. If necessary, you can upgrade at Account > Billing Info > Upgrade/Downgrade to take advantage of this feature. If you don't see the Head Module and are using Templates, skip to the Advanced Template Set instructions.

In the Head Module box, add the below code replacing http://example.typepad.com/blog-logo.jpg with the URL for the image uploaded to your Typepad account.

Click Save Changes to update your blog.

Advanced Template Set Instructions

If you happen to be using an Advanced Template Set for your blog's design, the instructions for editing the open graph tags varies from the above.

At Design > Templates, open the Individual Archives Template. Between the <head> </head> tags, you can add the open graph tags.

The last line of code is what currently shares an image from the post, but you can replace:

With the same code we used with the basic designs:

And replace http://example.typepad.com/blog-logo.jpg with the URL for the image uploaded to the File Manager.

Twitter Open Graph Tags

If you want to customize the meta data submitted to Twitter in the Individual Archives Template, you can add and edit the below code within the template between the <head> </head> tags.

Replace TWITTERHANDLE with your Twitter username.

Updated 27 June 2018

Not quite what you are looking for? Check out these other articles:

For tips on customizing the Design Lab, see the article on editing the design Style.
To add unique fonts to your design, check out the article on Design Lab Fonts.
To upload and embed non-YouTube files, check out this article.