Using OpenGraph to get the right image on Facebook - Website Design | Naperville | DNN | Social Media | WordPress
Search
× Search

Sprocket Websites - Blog / News / Updates

Using OpenGraph to get the right image on Facebook
Don Gingold
/ Categories: DotNetNuke

Using OpenGraph to get the right image on Facebook

To drive traffic to your website from Facebook, you copy/paste your website address into the status line, and voila! Facebook puts a picture and a description. But wait, that's the wrong picture! Here's the OpenGraph way to fix that.

Facebook visits the page and first looks for OpenGraph content. In a nutshell, OpenGraph is a standard way of describing objects on the web. If it finds the OpenGraph descriptions, it uses them; if not, it does other stuff. While the details don't matter, the result is it somehow manages to pick the one picture on the page that you don't want!

Step 1: add some open graph code. You can google OpenGraph and you'll get a very long tutorial with lots of great info, but the quick and dirty is this: add these lines to the header of your page:





How do you add them to a DNN page? Logged in with enough permissions, click the blue [Edit Page] button on the top control bar and then click Page Settings (in version 7+; in v6+, goto the page menu in the top control bar and click Page Settings)

Look for the text box that's labeled "Add to Page Header" and add those lines into the box. Of course, change the content to match your own website name, URL and some image on your website. The image doesn't have to be on the page by the way. In my case, I grabbed a screen shot of the page and shrank it down and uploaded it to the site via DNN's File Manager.

Step 2: tell Facebook about it.

Facebook likely remembers what it served up last time, so you need to ask it to go look again. Here's how.

Visit https://developers.facebook.com/tools/debug/og/object/

It's been a while since I've been doing things on the developer section, so it may have changed, but I believe it'll ask you to create a developer account if you've not done it, but it's free and relatively easy to do.

The page I just sent you to has an address form at the top. Put your URL in there. If you [Show existing scrape information] you'll see what exactly Facebook found before. If you're in a hurry, click [Fetch new scrape information]. Now look down the page and confirm that Facebook found the image you specified in that og:image tag. Did it? You're good to go.

Jump over to you Facebook page and paste that same URL into the status line. Facebook should serve up the correct picture.

Was this helpful? Please let me know.

Previous Article 5 Ways You’re Diverting Traffic FROM Your Website
Next Article 5 Free Small Business Social Media Tools
Print
2023 Rate this article:
No rating
Don Gingold

Don GingoldDon Gingold

Co-Founder and Managing Director of Sprocket Websites, Inc.; Co-Founder Chicago Area DotNetNuke User Group

Other posts by Don Gingold

Leave a comment

This form collects your name, email, IP address and content so that we can keep track of the comments placed on the website. For more info check our Privacy Policy and Terms Of Use where you will get more info on where, how and why we store your data.
Add comment

Theme picker

Contact author

x

About Us

We turn surfers into visitors and visitors into customers.

We'll make you a beautiful, interactive website. Then we'll help drive traffic to it.

Stay In-The-Know...

... With Every-Other-Week Tips!

Every other Tuesday, you'll receive the Sprocket Report completely free! Learn the latest business tip or news about what's currently happening in internet marketing. You get:

  • A web marketing tip from Kate
  • Another one from Breanne, and
  • Bonus! Tips curated from around the web

That's three valuable posts that you can read, plus a quick look at upcoming events and what's being discussed on Twitter. 

You'll want to get this info for yourself, in your own inbox. It's easy!

Type your email in the box above. OR scroll to the bottom of any page on this site. We have our subscription box there, too!

We NEVER give out your email address to anybody else and we don't flood you with ads. It's just good, free information. 

Read Archived Articles

Search

GET SOCIAL

LEARN MORE

Get The Sprocket Report

Terms Of UsePrivacy StatementCopyright © 2020 by Sprocket Websites, Inc.
Back To Top