Can Change the Picture of Links in Facebook Again
Don't you hate it when you endeavor to mail a link in a Facebook post, and the paradigm in the preview ends up looking similarthis:
B-o-o-o-o-band.
Where'due south the paradigm, right?
Information technology's supposed to be there automatically!
This all comes downwardly tometadata.
Which, admittedly, doesn't sound like a very heady topic.
It affects anybody, though – including you!
Think of metadata like your website's Deoxyribonucleic acid – coded information that determines how a network like Facebook sees the pages on your site. And just like DNA, if y'all modify the data in that code, Facebook volition see those pages in different means!
If you lot want your Facebook links to look equally good every bit possible, and so yous've gotta know how sure parts of your metadata piece of work.
We're gonna cut through all the technical details and give you lot the short version of what matters in your metadata, and then y'all can make sure your Facebook link previews generate those beautiful images you're looking for every time!
Which means the part of your website'due south metadata that we're focusing on is Open Graph meta tags.
(Non into coding? Don't worry – we've got some like shooting fish in a barrel plug-and-play shortcuts we'll share, too.)
Here's how it all works!
What are Open Graph meta tags, exactly?
Past definition, Open Graph "enables whatever web page to get a rich object in a social graph."
Which is really just a fancy way of saying it turnsthis…
…intothis:
OG tags are what let Facebook to take a boring ol' URL and transform information technology into a cute link preview.
Link previews are more centre-catching and clickable than plain URLs – by giving your link an epitome, title, description, and more, you lot're providing people with the contextual information that'll make them want to click.
(Because these days, link trust is one of the near important factors when you're trying to get traffic from social media.)
OG tags alive in the lawmaking for every folio and mail service on your website. Hither'southward what they look similar for that update above (nosotros highlighted the text that corresponds to different parts of the link preview):
In the past, this has been about as complicated equally it got – only in 2017 and 2018, Facebook has fabricated changes to how to share a link on Facebook, including how link previews and tags work.
(Long story curt, information technology's mostly related to fighting the spread of false news – which is a pretty good priority, even when information technology makes things similar thisslightly more than involved.)
Facebook wants to make sure that information technology only pulls the near 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.
In their own words:
"When content is shared for the first time, the Facebook crawler volition scrape and cache the metadata from the URL shared. The crawler has to see an prototype at least one time earlier information technology tin can be rendered. This ways that the starting time person who shares a slice of content won't see a rendered prototype."
Translation: when you add a link in a Facebook post for the outset time, Facebook hasn't all the same cached all the data it needs to generate a preview – therefore, Facebook can't create the image preview you expect until someone shares your link a second time.
Fortunately, there are two ways you can go around that.
Here's what you demand to know:
How to share a link on Facebook
The first method is to add together an additional piece of data to your OG tags: the elevation and width of the epitome preview you want in the link preview.
When yous addog:epitome:width and og:image:elevationto your existing Open Graph tags, it gives Facebook just enough information to generate the prototype preview you want, even the very starting time time a link is shared.
Not into coding? Not a problem – at that place's another pick.
The second method for making sure your link previews work is to use Facebook's Sharing Debugger.
The Facebook debugger is a very handy tool. When yous plug a URL into this tool, it pre-loads all the information Facebook needs in order to generate a link preview in the future. Facebook stores that info, and then when you get around to actually sharing the link, they're able to generate the preview – fifty-fifty the very first fourth dimension you share it.
Hither's what that looks like in action.
Before in this mail, we showed you an example of a Facebook update that couldn't properly generate a link preview with an epitome:
The reason it didn't generate an epitome preview is because that link had never been shared on Facebook earlier.
If we wanted, we could swoop into that page's metadata and add theog:image:width and og:epitome:peaktags to our Open Graph tags.
The simple alternative, though, is to use the Facebook debugger. Just pop the URL for that page into Facebook'due south Sharing Debugger. When we practice, Facebook shows us the link preview that they're now able to generate:
And when we try to share that URL on Facebook once more later on using the Facebook debugger, we can encounter that they're now able to generate a preview that includes an prototype:
Ta-daa!
And then bada-bing, bada-boom – we accept one little extra step to our social sharing workflow.
Now, whenever we publish a new weblog mail service, nosotros just plug the URL into Facebook's Sharing Debugger as soon equally it's live, and we know that the link preview will generate an image preview without a hitch when anyone (including united states of america!) shares that URL on Facebook.
(And if it means less fake news and inaccurate link previews in the News Feed, it's a footstep we're pretty glad to have.)
Now, allow'due south say yous plug your link in the Facebook Debugger, just the paradigm preview doesn't expect the style you want.
There'south a style to gear up that, too!
Customizing your link previews with plugins
If you want to customize the unlike elements of your link previews, similar the image or the meta description, y'all can do that by hand past editing your OG tags.
If the thought of going elbows-deep into your site's metadata makes you feel nice, though, we'll make i thing nice and clear:
You practice NOT demand to know how to code to customize your link previews.
You lot merely need the right plugin!
Adding a plugin to your WordPress site makes customizing this stuff ridiculously simple. Here at MeetEdgar, for example, nosotros employ the Yoast SEO plugin. It even gives you a little preview of what your text volition look like!
Seriously –so much easier than dealing with metadata.
As for the image preview that shows upwards in your link preview, WordPress gives yous the selection to add together aFeatured Image to your post. The image yous choose is the one that Facebook should pull for your link preview!
(Notation: The location of the Featured Paradigm you choose for a postal service depends on your blog's layout. For example, when we cull a Featured Image, it appears in the header of that postal service. Here's the post we've been using as an instance if you want to run across for yourself!)
Keeping upwards with Facebook's changes
And then there you have it – an easy-as-pie primer on Open Graph meta tags and how to get a link to a Facebook postal service.
Whether you use the sharing debugger or manually adjust the code when y'all you put a link in a Facebook post, it'south nevertheless pretty easy to bespeak Facebook in the right direction regarding what you want, whether or not you lot have a ton of technical know-how – and then make sure you're adjusting your workflow accordingly!
Source: https://meetedgar.com/blog/facebooks-new-link-previews-need-know-2018/
0 Response to "Can Change the Picture of Links in Facebook Again"
Postar um comentário