How to Setup Your Templates to Maximize SEO and Social Sharing
Posted by Jake Lumetta on September 1, 2018
new to butter
When you're setting up ButterCMS, especially if you're adding a blog to your website or creating content that is really meant to drive SEO and plan to share it on various social networks, here are a couple of ways you can ensure you get the most out of your content.
Add a social sharing widget to your blog
Optimize your social media images for greater visibility
When you share your ButterCMS blog posts on social media channels, how do ensure your preview thumbnail and feature images correspond with your blog post in the best way? The way you do this is by using open graph tags. Both Facebook and Twitter have their own open graph tags, which are basically meta tags that you embed right into your blog template. Be sure to note that the blog template is your own website code and not code that is controlled by Butter.
We'll show you how we implement these tags for our own blog but for official documentation and how to implement these tags, we recommend you go the official source for Facebook and Twitter.
This is an example of a blog post HTML template that powers our blog post page. By default the Butter blog engine gives you full control over all of these tags and gives you enough capability to customize these tags.
In the highlighted section of code pictured above, og stands for the open graph tag (which we recommend you learn about from the official Facebook documentation) and for example og:type is currently hard coded to be an article and because it's always going to be an article in our blog post, that doesn't really need to change. Below that is og:url which is a dynamic thing that changes with each blog post so we have that set to post.url and that's much pretty on down the line for featured image and title as well.
And similarly for Twitter card, we hardcoded it to summary_large_image that's a special Twitter format in terms of how the tweet shows up. The site and the creator is always going to be ButterCMS for us.
You can expect to see the same thing when you login to Butter. You'll have a template with code just like this that calls out all the API and ensures all your content looks great when you share it socially.
ButterCMS is the #1 rated Headless CMS
Don’t miss a single post
Get our latest articles, stay updated!
Jake is the CEO of ButterCMS. He loves whipping up Butter puns and building tools that make developers' lives better.