Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by William J. Terrell
William J. Terrell
17,403 Points

Open Graph Images

Our website has an Employment page, that used to have an image of a chalkboard with "Now Hiring" written on it.

This image was removed from the page itself, but we would like it to appear as the image on social media releases, without having to enter it in manually.

I assume I can set the og:image meta property with the URL for the image, but out site uses an include file for the header, and I'm not sure how I might go about setting a meta property specifically for this one page...

Any assistance or insight would be appreciated. I've never bothered much with metadata, but would be interested in learning anything I can :)

Thanks!

2 Answers

David Thomas
David Thomas
Courses Plus Student 21,263 Points

Are you using a CMS like Wordpress or Just PHP or some other CMS or Programming Language?

You might be able to put the a section in the header include inside a conditional statement such as if url = employment show meta tags - without knowing a little bit more about the website code its a little bit hard to give a specific example.

i'd also recommend reading http://ogp.me/ this is all about The Open Graph protocol and shows that there are four required properties (og:title, og:type, og:image & og:url)

OG is supported on Facebook, I'm not too sure on twitter - I think they use Twitter Cards instead

William J. Terrell
William J. Terrell
17,403 Points

Thanks for that resource. I feel like I am getting closer.

This is what I have so far:

I have this page:

https://www.williamwoods.edu/employment/current_positions_fs.aspx

And this is the JavaScript I'm running in the console...

var url = window.location;
console.log(url);

var ogimage = document.getElementsByName("ogimage");
console.log(ogimage);


if (url.pathname.indexOf("employment")){

  document.getElementsByName("ogimage").content = "/employment/images/hiring.jpg";
  console.log(ogimage);

} else {
    console.log("Could not associate image with metadata.");
}

I just need to get it to set the content property on this meta tag:

<meta name="ogimage" property="og:image" content="" />

to 

<meta name="ogimage" property="og:image" content="/employment/images/hiring.jpg" />

Thanks!

William J. Terrell
William J. Terrell
17,403 Points

Or might this be something that needs to be done on the server side? It looks like it's putting that value into the content thing, but it doesn't seem to show when FB scrapes it...

David Thomas
PLUS
David Thomas
Courses Plus Student 21,263 Points
David Thomas
David Thomas
Courses Plus Student 21,263 Points

excellent news glad to hear you are making progress - for it to work properly you need to put the full link to the image for e.g

<meta name="ogimage" property="og:image" content="http://mywebsite.com/employment/images/hiring.jpg" />