Facebook Instant Articles Top Image Question

Good Morning,

So i just started using facebook instant articles, pulling from a wordpress site.   So the very top image, above the logo and like button.  For the life I can't figure out how to get that picture there.  I thought it was the featured image that would get pulled from wordpress, but I don;'t think that is it.   And I was alway looking at example code from facebook developer, but can't see where the picture might go.   Here is the code
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://instantarticles.fb.com/example1">
    <link rel="stylesheet" title="default" href="#">
    <title>Instant Articles</title>
    <meta property="fb:article_style" content="Test Article Style">
  </head>

Open in new window


Any thoughts or advice?

Thank you,

Rich
Richard BarryAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hi Rich!
Do you have the Yoast SEO plugin installed?
Yoast has a great feature for setting your facebook post image.

Once the plugin is installed, you'll find this panel at the bottom of every post or post type edit page.

Edit-Musician---Lucidity-Festival-20.jpg
0
Allie WattsDemand Generation & Digital Marketing SpecialistCommented:
Rich, I think it is in this part of the code.  
code-image.JPGAdd your png/jpeg image after the href and a title prior to that if you want to. You may need to change the link rel= to be "icon" but this may not matter.
Facebook and other social sites pull og metadata from our links. Here are two resources for more information on that for the future.
Let me know if this works.
0
Alicia St RoseOwner & Principle Developer/DesignerCommented:
I'm a designer/developer/coder and not versed in Facebook marketing, but I do know that rel="stylesheet" means that it's referencing a CSS stylesheet. So, it probably will matter.

Rel="icon" is for the Favicon. The little square on a browser tab.

I just looked at some Instant Article info. Facebook is trying to pull in a featured image but sometimes it's a default image for the whole site.  It looks like you need more control per article. Yoast will give you that. I use Yoast to grab featured images for a huge festival site I've built. When the musicians share their profiles, it's nice to have their face and not the Festival logo/header.
1
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Richard BarryAuthor Commented:
Hello,

So i do use Yoast, but for the life of me I can't get the cover image to show up.  I have no idea what I am doing wrong.  I have found this code and tried this, but it didn't seem to help.

<head>
  <meta property="og:title" content="Article title">
  <meta property="og:description" content="Article description">
  <meta property="og:image" content="http://myserver.com/image.jpg">
</head>

Thank you,

RIch
0
Allie WattsDemand Generation & Digital Marketing SpecialistCommented:
Rich,

When I tried to view your image in a separate tab I got the below error message.

error-message.JPG
Try inserting your jpg or png image you wish to have associated with your article in the og metadata line for og image after content=

It looks like the current image is not available for Facebook to scrape when creating posts.
0
Richard BarryAuthor Commented:
Yes.. I didn't put my real information in.. that was just an example code.

Rich
0
Alicia St RoseOwner & Principle Developer/DesignerCommented:
How did you insert that code? You'd have to insert a different one for each post. And since you've probably added it to the header, then it will show the same image for all posts or maybe not work at all. So, the Yoast plugin isn't working?

See if this article is of any help:

http://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
0
Richard BarryAuthor Commented:
Good Morning, I figure out what the issue was.  I was not using the actaully facebook IA rss feed.  Once I change the feed like, all the images came through with no issues.

Rich
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard BarryAuthor Commented:
I figured out the issue myself
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Facebook

From novice to tech pro — start learning today.