Fixed: Image Not Showing (or Incorrect) When Sharing URL on Facebook
Fixed: Image Not Showing (or Incorrect) When Sharing URL on Facebook
Have you ever shared a link of your own on Facebook and Facebook either doesn’t show an image or it pulls up the wrong one? In this tutorial, I show you why this happens and what you can do to fix it.
Here is an accompanying article mentioned in the video:
https://turbofuture.com/internet/Imag…
Link to Facebook Open Graph (Sharing) Debugger:
https://developers.facebook.com/tools…
#Facebook #Tutorial #FacebookShares
Content
0.02 -> Have you ever shared a URL on Facebook
of your own or someone else's and the
4.92 -> image that shows up is not the image
that you expected to show up or there's
16.014 -> So here I have an article that I've written
and I've posted it on Facebook and since
21.424 -> I've posted it I've actually updated the
image. You can see the image here
26.014 -> is not very pretty; it actually just
shows more of the technical part of the
30.724 -> article and not really explains, in an
image, what my article is actually about.
36.374 -> This is not the image I really want
to appear when I'm sharing it on social
40.374 -> media. If you go over to my article, which
is actually very similar to what this
44.464 -> video is about, you can see that I've got
a nicer image that explains what
49.773 -> the article is about before I share
images that dive into the technical
54.544 -> issue at hand. This, right here, is what
I want to show up on Facebook.
60.094 -> Unfortunately, I get this. When this
happens (or you get no image at all),
65.184 -> Facebook has a page where you can debug a URL to see what's going on; why your
72.513 -> image is not appearing correctly or at
all.
75.034 -> so that page is developers.facebook.com/tools/debug I'm going put the
81.964 -> link in the description box below, so you
can check that out in order to use this
86.674 -> tool. You take the URL of your page that
you're sharing (so I'm gonna copy this
92.374 -> and paste it in this box.) When you click
this debug button, what it's going to do...
97.863 -> It's going to pull information directly
from your page, so if you have, as in my
104.134 -> case, an older image showing up that you don't want to
108.394 -> appear (you've updated your article with
something nicer), just press this
112.653 -> button and Facebook will actually re-pull
your article and pull up the latest
118.054 -> image. I'm going to hit "debug." I can see
that this was scraped on June 4th, and, as
123.633 -> you can see down here,
it is June 24th. If I hit "scrape again",
127.444 -> warnings will come up and it will
explain what's wrong with my article; why
132.964 -> the new image is not appearing. Here
it's saying that my image could not be
137.464 -> downloaded and there's a couple
different reasons why this can happen.
140.254 -> Here it's saying that my og tag image
and this image right here just could not
147.334 -> be downloaded. Other reasons why
your image might not be showing up are
150.993 -> that you don't have an OG tag specified
at all for your image or you have OG
156.064 -> tags for multiple images on a page and
Facebook is having trouble determining
160.174 -> which image it should pull up. Now, if
you're using something like WordPress,
164.754 -> this can be fixed by changing out some
of your image plug-ins. If you have
169.984 -> multiple image plug-ins, they could be
competing for which image it wants to
175.743 -> pull up, so try not to have too many
WordPress image plug-ins. If you're able
181.354 -> to look at the HTML your page
is producing, you can actually search for
186.604 -> your og tags. Just ctrl+F and type in OG
and see which images have those tags.
194.344 -> (OG stands for "open graph.") If you
page down, you can see what it's actually
199.884 -> pulling from your site. Here it's
pulling the correct title (this is the
205.174 -> title of my article.) It's pulling the
correct URL, it's able to tell that it is
210.363 -> an article, and here it shows the
description (which is actually about og
214.504 -> tags because that's what my article is
about.) I'll link the article in the
218.374 -> description box below because it's very
similar to what this video is about. It
221.944 -> can offer some tips on debugging this as
well. Here, it's pulling my alt tag. So
227.044 -> when you click this button, "see exactly
what our scraper sees for your URL", you
232.053 -> can see the HTML that comes up and you
can search and see where the og tags are
238.564 -> it should be up here in the metadata. If you have too many tags, you'll see
243.724 -> multiple image tags like this. If that's
the case, you want to make sure you only
248.763 -> have one og image, and, of course, if you
have no og image, at all, you'll want to
254.644 -> add one. I'm going to scrape this
again and see if I can get Facebook to
258.334 -> pull up the correct image. Here
finally it's scraped it and pulled up
263.224 -> the correct image. Here I have my post.
I'm going to press these three dots and
268.254 -> "Refresh share attachment".
274.464 -> and hit save and there we go, it looks a
lot better. Of course I can't see, you
279.664 -> know, the top and the bottom, but I do
have the image that I intended to share
283.354 -> on Facebook. I hope this video was
helpful.
286.084 -> If you would like more tips on how to
handle this, head to the article in the
290.824 -> description box below. Thank you for
watching and don't forget to subscribe!
Source: https://www.youtube.com/watch?v=HzbRGFa0Xcw