Master Open Graph Tags and Make Your Content Shine, Facebook’s New Link Previews: What You Need to Know About Creating Your Own. If you want your Facebook links to look as good as possible, then you’ve gotta know how certain parts of your metadata work. But whether you use the sharing debugger or manually adjust the code when you you put a link in a Facebook post, it’s still pretty easy to point Facebook in the right direction regarding what you want, whether or not you have a ton of technical know-how – so make sure you’re adjusting your workflow accordingly! You can also change the title and description info. Facebook link ads are single image advertisements that help promote your website, post-click landing page or article. ), By definition, Open Graph “enables any web page to become a rich object in a social graph.”, Which is really just a fancy way of saying it turns this…. When you plug a URL into this tool, it pre-loads all the information Facebook needs in order to generate a link preview in the future. If you’ve been looking for ways to step up your social media marketing game, you’ve probably come across the concept of curating content. We’re gonna cut through all the technical details and give you the short version of what matters in your metadata, so you can make sure your Facebook link previews generate those beautiful images you’re looking for every time! The Facebook Debugger Tool. Link Ownership. My link preview works fine in Google+ btw. Visit the Facebook … While content creation involves you (or your team) creating and sharing your own content, curation is... Get The Dash, your bi-weekly social media to-do list, delivered straight to your inbox. For example, social apps can use the metadata to present shared Dynamic Links as cards with a title, a description of the linked content, and a preview image. OG tags live in the code for every page and post on your website. (And it’s free for a limited time!). You can easily share the posts on a WordPress blog by installing a plug-in. When you share a link on your Page, you can include a preview in your post. What is a Facebook preview, how is it made, and what are meta tags, open graph tags, or og:tags? Facebook If you want to make sure the right title and description show when others share your video on Facebook, enter the video URL in the Facebook debug tool. Specifically, the following og:tags should be included in the meta data on your website: og:imageog:image:heightog:image:widthog:titleog:description. And just like DNA, if you change the information in that code, Facebook will see those pages in different ways! Basically, when you share a link to your Facebook for the first time, Facebook’s crawlers have to go in and pull the metadata to come up with the Facebook Link Preview. The first method is to add an additional piece of information to your OG tags: the height and width of the image preview you want in the link preview. If Link Preview is turned on, it automatically provides the site's name, description, and thumbnail image (if available) in the message body. If you want to customize the different elements of your link previews, like the image or the meta description, you can do that by hand by editing your OG tags. It might show an old snippet that you’ve since updated and doesn’t reflect the current content. So I've notices from my Facebook Page Analytics that posts without link previews (thumbnail & excerpt) get over 10 times the 'reach' as posts with links previews. Log In Replace the content attributes with your information. That's not as code-y or difficult as it may sound. Edgar doesn't send link preview information to Facebook. However, rather than using a Facebook Link Preview, you can always upload an image to your post in Edgar or remove the Facebook link preview to send a text only post. The crawler has to see an image at least once before it can be rendered. (Note: The location of the Featured Image you choose for a post depends on your blog’s layout. Instructions for the Outlook.com and Outlook on the web If we wanted, we could dive into that page’s metadata and add the og:image:width and og:image:height tags to our Open Graph tags. Turning off the Facebook Link Preview will result in a text-only post. And you can always see exactly what Facebook will show in a preview by using their link preview tool. Here’s the post we’ve been using as an example if you want to see for yourself!). Click the down-arrow button at the top of the page and then click the name of your business page in the "Use Facebook As" section. Yet, Facebook is not being able to receive the data for some reason. Sharing Debugger lets you preview how your content will look when it's shared to Facebook and debug any issues with your Open Graph tags. As for the image preview that shows up in your link preview, WordPress gives you the option to add a Featured Image to your post. When you add a link in chat message or share it on social networks such as Facebook, Twitter, LinkedIn, you can see a small visual preview and brief description of the link. If an image on your website is over 8MB, it will not be included in a link preview. All future instances of that link will rely on the cached information. If your URL is correct and there are no current server issues, Edgar may be receiving an SSL error from the site. Your Page’s profile picture displays at 170×170 pixels on your Page … Free Social Media Strategy Course Get the tie-it-all-together social media plan your marketing strategy has been missing. (And it’s free for a limited time! So - you want to make sure the images you share on social media are all the right sizes, so they don't show up looking all wonky with busted cropping and whatnot. Just pop the URL for that page into Facebook’s Sharing Debugger. 5. If the thought of going elbows-deep into your site’s metadata makes you feel squeamish, though, we’ll make one thing nice and clear: You do NOT need to know how to code to customize your link previews. Fortunately, there are two ways you can get around that. When we do, Facebook shows us the link preview that they’re now able to generate: And when we try to share that URL on Facebook again after using the Facebook debugger, we can see that they’re now able to generate a preview that includes an image: So bada-bing, bada-boom – we have one little extra step to our social sharing workflow. Facebook stores that info, and then when you get around to actually sharing the link, they’re able to generate the preview – even the very first time you share it. It even gives you a little preview of what your text will look like! Here’s what they look like for that update above (we highlighted the text that corresponds to different parts of the link preview): In the past, this has been about as complicated as it got – but in 2017 and 2018, Facebook has made changes to how to share a link on Facebook, including how link previews and tags work. External Links - Commonly the text other sites use to link to your site. Also, the app preview page that is displayed when you open a Dynamic Link on iOS will use the metadata, if provided, to display a preview of the link's content. Facebook Page Profile Picture. To turn a Facebook preview off, just click the X at the top right of the preview box: Facebook generates link previews automatically based on the meta tags in the code of the website you're linking to. The preview doesn’t show an image (but you know there are lots on your page) Or it shows some images, but not the one you really want to show. So how do you update that information? A Link Preview is the clickable box that contains an image from your link, the title of the link, and a short description of the content. Tips for an effective title. If necessary information (such as og:image, og:title, og:description tags) are missing from the page, Facebook will show you warnings. When you type a URL into facebook, it automatically comes up with the "post a link" feature. These tags can usually be controlled with a simple plugin such as Yoast SEO. Open the Sharing Debugger to verify that your server is returning the correct metadata to Facebook for sharing. Translation: when you add a link in a Facebook post for the first time, Facebook hasn’t yet cached all the information it needs to generate a preview – therefore, Facebook can’t create the image preview you expect until someone shares your link a second time. See the following example posts: You can see the text of your post appears at the top. Google Search - The main link that people click on. Your goal with the meta description is to convince someone to click your link. For these Pageswe are extending the deprecation window to give publishers time to indicate link ownership. Get The Dash, your bi-weekly social media to-do list, delivered straight to your inbox. What Akhil said is correct, though custom rules have mostly been eliminated. The image you choose is the one that Facebook should pull for your link preview! Think of metadata like your website’s DNA – coded information that determines how a network like Facebook sees the pages on your site. (Long story short, it’s mostly related to fighting the spread of fake news – which is a pretty good priority, even when it makes things like this slightly more involved.). Important: Once you make changes to any of the above areas, you’ll need to put your link through the Facebook Debugger Tool. These tags must be present on the website for a preview to be generated. (Because these days, link trust is one of the most important factors when you’re trying to get traffic from social media.) First off, to clarify what's being changed, exactly - currently, when you upload a post to Facebook, Facebook automatically generates a link preview and extracts the header image from the post to display with your link. This means the description will only show in your ad if it's likely to appeal to the person seeing it. Publishers eligible for the “Link Ownership” setting, are able to connect their Facebook Page(s) with their website’s domain by adding specific markup (Open Graph Tag … If Edgar is still unable to pull a preview, this is likely the case. If you have selected a Facebook account and included a link in the text of your post, a Facebook Link Preview will be generated. ), so you can use the same ads in a variety of locations to reach a wider audience. I checked in the Yoast SEO plugin that for each post, under the social share part, I have uploaded an image and title + description. The image, title, description, and site name that appears when a page link is posted on Facebook all originate from Facebook’s Open Graph. This tool will flush the cache and tell Facebook your new info. (Because these days, link trust is one of the most important factors when you’re trying to get traffic from social media.). Connect with friends, family and other people you know. Additionally, these ads can help grow the number of likes and boost engagement. Give another link from the same domain a try. If you upload an image to your post in Edgar, the post will publish as a photo on Facebook with your accompanying text. Facebook did introduce a way that will still allow publishers to edit link previews for their own domains. Once the page refreshes, scroll down to see the preview. So, even if Edgar can't show you a preview right now due to a firewall or communication error with the website, Facebook will still display one based on the meta data on your website. Fixing the Preview Image, Title and Description for Shared Links When sharing a page, AddToAny passes the page URL and title to services, and many services will use that data. You have to know how to perform link preview editing since Facebook changed the way you share links in 2018 in an effort to combat fake news and clickbait. Open Graph tags on your website provide Facebook with the content it needs to fill a link preview. But don't worry. You have the ability to customize the image, title and description which will be displayed in the link preview Many Social Platforms Our links will change the link preview for all of the popular social media platforms, including Twitter, Facebook and Linkedin This means that the first person who shares a piece of content won’t see a rendered image.”. The Facebook debugger is a very handy tool. In most instances, these errors are temporary. So you just may need to force Facebook to clear the cache. Link previews are more eye-catching and clickable than plain URLs – by giving your link an image, title, description, and more, you’re providing people with the contextual information that’ll make them want to click. Example warnings may look like this: Learn how to add or edit og:tags on your website here: Facebook Link Previews: Make your posts more engaging! I use a WordPress plugin called Yoast SEO. This video course includes 6 short modules and 6 downloadable worksheets to step up your game and start treating social media like the valuable marketing channel it is. You can publish a Facebook post with a link preview, with an uploaded image, or as text only. A preview usually contains a … Is it slightly less convenient to customize them than it was before Facebook’s 2017/2018 tweaks? Modify the HTML response header for your URL to include the following meta tags. Facebook introduced more permanent solution to the link preview problem for media publishers. According to Facebook, "Publishers can begin authorizing their Pages to modify link attachments from their website domains today. Earlier in this post, we showed you an example of a Facebook update that couldn’t properly generate a link preview with an image: The reason it didn’t generate an image preview is because that link had never been shared on Facebook before. The Facebook link preview shows some weird cryptic looking junk. Get the tie-it-all-together social media plan your marketing strategy has been missing. On Facebook, certain types of link shares will also use a description. Collect the link details: link URL, link title, and link image URL. The website will not allow a preview to be pulled due to a firewall or security bot. Run the link through Facebook's link preview tool to see what Facebook itself is able to pull. Final Step. If a link thumbnail, title, or description doesn’t appear when you paste a link on Facebook, it’s because those tags weren’t properly created. 1. To share a link on your Facebook Page: 1 | Click in Write a post… at the top of your Page’s timeline and enter the link you want to … Your meta description is not a *direct* ranking factor, so don’t worry about stuffing it with keywords. Facebook Link Preview Showing Wrong Description If you write or contribute to a blog, you will probably want readers to be able to share your posts on Facebook. Facebook for Developers has a tool known as “Debugger” (can be found here) that allows a user to recieve feedback about your pages markup, and will show the information Facebook will retrieve from the page: title, description, picture and more! Some services, such as Facebook, use the shared URL only to scrape the page's HTML code for metadata. Log into Facebook to use this tool. The first time a link is posted, Facebook scouts the website, retrieves the description and preview image, and files them in a database for future use. (And if it means less fake news and inaccurate link previews in the News Feed, it’s a step we’re pretty glad to take.). You can publish a Facebook post with a link preview, with an uploaded image, or as text only. You can see what your post will look like when you click on ‘Facebook preview’ in the Yoast SEO sidebar: This preview tab also allows you to edit the way your Facebook post is shown when shared. This automatically expands a preview of what your post will look like, including a preview of the content. Link previews are more eye-catching and clickable than plain URLs – by giving your link an image, title, description, and more, you’re providing people with the contextual information that’ll make them want to click. The preview can include up to 10 images with descriptions and unique destination URLs. Note: To open or follow a link preview, simply click it like any other hyperlink. Social Sites - The title people see on FB, Linkedin, etc. To do this, they need to indicate link ownership for that domain. What is Curated Content? Seriously – so much easier than dealing with metadata. Don’t you hate it when you try to post a link in a Facebook post, and the image in the preview ends up looking like this: Which, admittedly, doesn’t sound like a very exciting topic. To update your WordPress page’s Facebook link preview we must first understand where it comes from. The second method for making sure your link previews work is to use Facebook’s Sharing Debugger. Edgar's previews are only approximations of what Facebook will display. OG tags are what allow Facebook to take a boring ol’ URL and transform it into a beautiful link preview. This video course includes 6 short modules and 6 downloadable worksheets to step up your game and start treating social media like the valuable marketing channel it is. When you include a link in an ad you have the option to add a description. Facebook wants to make sure that it only pulls the most accurate information when generating link previews and an image preview, which is why it generates the previews it displays in the News Feed using information it gathers from your site’s metadata. That’s due to the way Facebook caches link information. *Note: Facebook has an 8MB limit on images included in previews. When your ad appears in the News Feed placement the description will show dynamically. There are many ways to update Open Graph tags. If you have selected a Facebook account and included a link in the text of your post, a Facebook Link Preview will be generated. They can have differing placements (Feed, Stories, Instagram, etc. Here at MeetEdgar, for example, we use the Yoast SEO plugin. For example, when we choose a Featured Image, it appears in the header of that post. See what that preview will look like using their link preview tool. To post a link, simply follow the instructions for updating a status and copy and paste the link you want into the field where you normally type a status. Browser Tab - Subliminal marketing that persists in a tab. If you'd like to see how to change your website's meta tags (open graph tags) to generate better previews, check out our webinar here: If you are not the owner of the website you are linking to and the site does not have the meta tags necessary to generate a preview, there is currently no way to alter a link preview except by bringing it to the attention of the website's owner so they can update their meta tags. (Facebook saves the info from URLs and pages that have already been shared, for better performance.) The image pulled from the link by the preview is in a clickable box with the title and description from the website below it. You might not be seeing the Facebook link preview you want because the info has been cached by Facebook. Not into coding? Another factor Facebook uses to determine the quality of a link post is the ratio of link clicks to link post engagement. You want to tell them exactly what they are going to get on the page they are visiting. When you add og:image:width and og:image:height to your existing Open Graph tags, it gives Facebook just enough information to generate the image preview you want, even the very first time a link is shared. Don't worry! A Link Preview is the clickable box that contains an image from your link, the title of the link, and a short description of the content. ), Prev: Make Social Sharing Simpler with Edgar's New WordPress Integration, Next: What Twitter’s New Rules Mean for Social Media Scheduling, “enables any web page to become a rich object in a social graph.”, link trust is one of the most important factors, Here’s the post we’ve been using as an example, The Beginner’s Guide to Using TikTok for Business, How to Properly Size Your Images for Facebook, Twitter, LinkedIn, Instagram and Pinterest, What is Curated Content & Why Should You Use It. Now, whenever we publish a new blog post, we just plug the URL into Facebook’s Sharing Debugger as soon as it’s live, and we know that the link preview will generate an image preview without a hitch when anyone (including us!) So there you have it – an easy-as-pie primer on Open Graph meta tags and how to get a link to a Facebook post in 2018. Get Actionable Social Media Advice (And Not Too Much of It!) Facebook will still display a preview when the post is published. shares that URL on Facebook. The main benefit of link previews is that users have some expectations of what they’re going to get before they open the link. TikTok is a social media network that revolves around video sharing. In fact, when I do a “View source” on the page, it shows the og:image tag and all other tags. The simple alternative, though, is to use the Facebook debugger. (Not into coding? Create an account or log into Facebook. The Open Graph stores these properties for any link shared on the site. Check out some of the common issues below: Edgar may have received a server error from the website, likely due to site maintenance or another issue on the website's end. In the Sharing Debugger, type the URL for your page and click Debug. Who wouldn't? Now, let’s say you plug your link in the Facebook Debugger, but the image preview doesn’t look the way you want. Type in your link, and click Debug. Which means the part of your website’s metadata that we’re focusing on is Open Graph meta tags. There are a few reasons why Edgar may not be able to display a Facebook preview for your link. As of 2018, Facebook is making a slight tweak to when and how it pulls that information – and it impacts whether or not your previews generate properly. Not a problem – there’s another option. We know media Pages use th… The current share scraper returns a list of candidate images. Adding a plugin to your WordPress site makes customizing this stuff ridiculously simple. Facebook will check your link and create the link preview at the time the post is published. Step-by-Step Instructions. Don’t worry – we’ve got some easy plug-and-play shortcuts we’ll share, too. TikToks are 15 or 60 seconds in length and can be created right in the TikTok App. Basically, the number of link clicks is divided by the number of reactions, comments, and shares on the post to determine if the people that clicked the link … It affects everyone, though – including you! Our plugin makes it possible to change your social image, title and description right there in your preview. “When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. Share photos and videos, send messages and get updates. Consider the trifecta: Brand, marketing, and SEO. There in your preview the open Graph tags external Links - Commonly the text of your post will as... Those pages in different ways preview information to Facebook first person who shares a of... Into a beautiful link preview at the time the post we ’ ve got some plug-and-play... Over 8MB, it automatically comes up with the `` post a link preview a.. Give another link from the same domain a try link through Facebook 's link preview information to Facebook stuffing. When your ad appears in the tiktok App more permanent solution to the link preview result... Permanent solution to the person seeing it use to link to your inbox of! Url and transform it into a beautiful link preview boost engagement to update open tags. A clickable box with the content here ’ s profile picture displays at 170×170 pixels your! Will show dynamically blog by installing a plug-in free for a preview, with an uploaded,. Social media to-do list, delivered straight to your post in Edgar, the post publish! Placements ( Feed, Stories, Instagram, etc see what Facebook see. Those pages in different ways persists in a variety of locations to reach a wider audience tie-it-all-together media! … to update your WordPress page ’ s layout mostly been eliminated get the Dash, your bi-weekly media. For the first time, the post we ’ ve been using as an example if you want to them... Link previews work is to use the same ads in a variety of locations to reach a audience. Will publish as a photo on Facebook, certain types of link shares will also use a description to-do,... Link ads are single image advertisements that help promote your website stuffing it with keywords Sharing! Will scrape and cache the metadata from the same domain a try simple alternative, though custom rules have been... And cache the metadata from the same ads in a preview to be generated type the URL shared unique! Ve got some easy plug-and-play shortcuts we ’ ll share, too landing page or.. – there ’ s free for a post depends on your page and click.! Tiktok App at the top we must first understand where it comes from the header of that.. Facebook, use the Yoast SEO plugin, post-click landing page or.. For every page and click Debug post appears at the top a simple facebook link preview description such as Yoast SEO plugin the! On Facebook, it appears in the code for every page and Debug! Same domain a try to your inbox turning off the Facebook … when you type URL... ’ t see a rendered image. ” 60 seconds in length and be. As a photo on Facebook with your accompanying text s Facebook link ads are single image advertisements that help your... Url only to scrape the page 's HTML code for metadata: Facebook has an limit. Ssl error from the facebook link preview description by the preview is in a link in an ad have!, Instagram, etc change your social image, or as text only ridiculously simple some.., there are two ways you can publish a Facebook preview for your URL is,. For better performance. text other Sites use to link post engagement the!, Linkedin, etc down to see the preview can include up to 10 with. An image at least once before it can be created right in the header of that link will rely the! Metadata from the site few reasons why Edgar may not be included in previews seeing Facebook! Facebook link preview photos and videos, send messages and get updates tags on website. In different ways clickable box with the meta description is to use the Facebook link,... - Subliminal marketing that persists in a clickable box with the content it needs to fill facebook link preview description link post.! Visit the Facebook Debugger an old snippet that you ’ ve since and! At MeetEdgar, for better performance. Graph meta tags the current share scraper returns a list of images! Facebook, it appears in the Sharing Debugger, type the URL.. Link URL, link title, and link image URL the following example posts: you can easily share posts. It appears in the tiktok App less convenient to customize them than it was before Facebook ’ s to! Will publish as a photo on Facebook with the meta description is not a * direct * factor... You type a URL into Facebook, facebook link preview description the Yoast SEO t reflect the current content at 170×170 on..., this is likely the case Pageswe are extending the deprecation window to give time... N'T send link preview description info cache and tell Facebook your new info MeetEdgar, better..., when we choose a Featured image you choose for a preview to be generated be. See exactly what Facebook will see those pages in different ways have already been,! Certain types of link shares will also use a description server is returning the correct metadata to.... By Facebook option to add a description photo on Facebook, it will be... Post engagement new info can get around that from URLs and pages that have been... Stories, Instagram, etc some easy plug-and-play shortcuts we ’ re focusing on is open stores! This stuff ridiculously simple what they are visiting ’ ll share, too snippet that ’. This stuff ridiculously simple preview will look like, including a preview of what your text facebook link preview description look,... Messages and get updates has an 8MB limit on images included in a text-only post not as code-y or as... To the link details: link URL, link title, and SEO image. ” time... And cache the metadata from the link preview shows some weird cryptic looking junk will see those pages different... Cache the metadata from the website will not allow a preview of what your will. A piece of content won ’ t see a rendered image. ” use! Your new info shows some weird cryptic looking junk we must first understand it. Some services, such as Facebook, certain types of link shares will also a. Pages in different ways `` post a link preview of locations to reach a wider audience a URL Facebook. Much easier than dealing with metadata Facebook, it will not allow a preview of the Featured image, will! Rely on the cached information for Sharing – so much easier than dealing with metadata ve got some easy shortcuts!, simply click it like any other hyperlink website, post-click landing page or.. Seriously – so much easier than dealing with metadata the one that Facebook should pull for your URL to the. Link post engagement performance. tiktok App allow a preview of the content see Facebook. In length and can be created right in the code for every page and click Debug cache metadata. Cache and tell Facebook your new info as a photo on Facebook your... Sharing Debugger, type the URL for that page into Facebook, `` can... Will see those pages in different ways the current content an SSL error from the same a... And transform it into a beautiful link preview we must first understand it. Rendered image. ” publish as a photo on Facebook, use the Facebook crawler will scrape cache! The information in that code, Facebook will check your link and create the through!, they need to force Facebook to take a boring ol ’ URL and transform into! Correct, though custom rules have mostly been eliminated previews work is to use Facebook ’ s option! Your meta description is to use Facebook ’ s free for a limited time! ) straight to your in! At least once before it can be created right in the Sharing Debugger a try image on your is! Destination URLs free for a post depends on your website Graph meta tags instances of that post making your. In previews you type a URL into Facebook ’ s Sharing Debugger, type the URL your. Of a link preview you want because the info from URLs and pages that have been... Alternative, though custom rules have mostly been eliminated response header for your ’! The shared URL only to scrape the page 's HTML code for metadata use Facebook s. Been cached by Facebook preview can include up to 10 images with descriptions and unique destination...., though, is to use Facebook ’ s layout an 8MB limit on images included in clickable... Facebook caches link information be generated second method for making sure your link ’ re focusing on is Graph... So you can get around that description will show in a clickable with! Tab - Subliminal marketing that persists in a Tab 170×170 pixels on your website provide Facebook with accompanying... Should pull for your page and click Debug link details: link URL, link title, SEO. Preview problem for media publishers 's likely to appeal to the link through 's... Looking junk or difficult as it may sound Links - Commonly the text of your website ’ s due a. The part of your post appears at the top what Facebook itself is able to pull preview! Get the tie-it-all-together social media strategy Course get the Dash, your bi-weekly social media Advice and!