Facebook Post Preview—See Your Post Before Sharing

Have a comment?

Your email address will not be published.

You might have left one of the fields blank or be posting too quickly.

Thanks for your comment. We appreciate your response. Reload the page to see your comment.

Please wait a while before posting your next comment.

What is on your heart?

Can you preview your Facebook posts?

You have just finished setting up your website, and it looks amazing. The only problem is, you have no idea how it looks if somebody shares it to Facebook. Fortunately the answer to the preceding questions is: Yes you can, and you can also take complete control over how your posts look. Let’s dive into it.

Short Answer: The Sharing Debugger

If you only came to this site asking “Can you preview Facebook posts”, the short answer is yes.

Facebook fortunately has a post preview tool for working with your sharing. Go to Facebook’s Sharing Debugger and enter the url you want to share. Click Scrape, and preview what Facebook sees on your page.

If this preview does not look as you expect, it would be worth investing some time into it. Especially if you produce articles that you want people to share.

OG Tags—the Secret Behind Sharing

If you use WordPress, and prefer to not learn about OG tags, scroll down to the next heading to read about OG tag plugins.

There are some meta tags you can put in your site’s header to control exactly how Facebook sees your post—they’re called OG tags. Facebook will always first look for these, and if they don’t exist, it will try to extract information from around the page.

As an example, here are the basic OG properties for a blog post/article:

  • og:url—Clean url with no unnecessary parameters to ensure that everyone shares the same exact url.
  • og:type—In the case of an article the type would be article.
  • og:title—A title. Don’t brand yourself here, keep it to the subject.
  • og:description—Obviously a description.
  • og:image—Url to image, preferably 1200 x 300px.

And here are the tags as used on the article you are reading.

<meta property="og:url" content="https://skylimit.productions/blog/facebook-post-preview/"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Facebook Post Preview—See Your Post Before Sharing""/>
<meta property="og:description" content="Can you preview your Facebook posts? You have just finished setting up your website, and it looks amazing. The only problem is, you have no idea how it looks if somebody shares it to Facebook. Fortunately the answer to the preceding questions is: Yes you can, and you can also take complete control over how&hellip;"/>
<meta property="og:image" content="[URL TO MY SHARING IMAGE]"/>

So if you share this post (wink, wink), or preview it, you will see exactly that information.

You can preview a Facebook post before sharing.
A post preview of our front page. The OG tags shows up in shared posts like this.

You can keep researching sharing options forever at Facebook for Developers. There are as many options as there are types of content being shared on the internet. Here are links to two of Facebook’s own resources:

Long introduction to OG tags.

Research the OG properties.

WordPress Plugins for Facebook OG Tags

There are WordPress plugins (of course) that creates OG tags from your posts automatically. The biggest one is Yoast SEO. On the plus side that one got a vast amount of options. On the minus side, it completely takes over your site, making it rather bothersome to get to work alongside custom work—which is what we do here at Skylimit Productions. Therefore I do not have extensive experience with it, but recommend it if your are ready to put time on SEO work with every single post.

Control Your Sharing

Final words. Spend time on this, and it will get better. Time is always of the essence. Whichever tools you choose, the content will always be the most important part to your site, and then what you choose to extract into your sharing and what you choose to serve up to google.

So if you have the time, check out your preview, and get back to the drawing board, then check your preview again. Or, if the time is not there, maybe hire someone else to do it for you (like for example us).

This one was written by Benjamin Antoni

I am a Brand Strategist with 10+ years of broad design experience, where UX, web and logo design have been my main focuses. My most comprehensive experience is having built the Red Hat Factory brand from scratch, but I also work part time with helping other brands find their identity and grow from there.

Mail him

Branding

Hand-drawn Branding VS Digital Design

An old rugged brand calls for hand-drawn branding.

Branding

Why Brands Fail (And How to Avoid It)

You'd love if I just handed you the answer to why brands fail, wouldn't you? This is why your brand fails! It is of course a very complex questions. But after working with brands of all sizes for over 10 years, I believe I have some ways to clue you in. The keyword in a…

Branding

5 Elements a Quality Branding Kit Should Include

While a branding kit can include anything that you deem necessary to anchor the tone of the brand, there are some key elements that probably are worth including in any quality branding kit. What components we will discuss: Graphic assets LogoAccent ColorTypeface Story assets Vision StatementGuidewordsValues #1 Your branding kit should include a logo While…

Branding

How to Make a Branding Kit

A branding kit can be so much. How do you go about making one?

Branding

How to turn on Dark Mode on Facebook Messenger

Hello darkness my old friend. I'm here to flick your switch again. Short Answer In the Messenger app, click your own profile photo, then flick the "Dark Mode" switch directly. In the Facebook app or on the web, it is not currently available, but it seems to be in development. How to turn on Dark…