search

mmistakes / jekyll-theme-skinny-bones

A Jekyll starter with a variety of flexible layouts and components.
https://mmistakes.github.io/jekyll-theme-skinny-bones
MIT License
802 stars 907 forks source link

Teaser images in sharing #65

Closed michaellevy closed 8 years ago

michaellevy commented 8 years ago

Michael, I'm sorry to have to bother you with this, but I can't get teaser images to show up right in Twitter or Facebook. I notice the sharing links don't show up at all on the skinny-bones demo site. On mine Twitter Cards will appear, but with either the default site teaser or Twitter's no-image image, and the default shows up on Facebook. It's working fine at mademistakes.com, and _includes/open-graph.html is the same there, and the issue isn't in _includes/share-this.html as far as I can tell. Any ideas?

mmistakes commented 8 years ago

Are you certain you've assigned a feature image to a post? The large summary Twitter card meta pulls in page.image.feature. If you don't have something like:

image:
  feature: your-large-feature-image.jpg

Then it falls back to using whatever the site.logo in _config.yml is.

For example one of the sample media posts on the demo site shows this as it's Twitter card.

screen shot 2016-04-29 at 11 20 53 pm

Also if you happened to test a page with Twitter either by tweeting it or the card validator site it's likely been cached. If you change it and test again it doesn't always act like it's been updated. I don't know if there's a way to force Twitter to rescrape the page like Facebook's Open Graph debugger.

In my experience social sharing has been a mixed bag when it comes to Twitter, Facebook, or Pinterest properly pulling in the correct images and meta info. Images can be particularly dicey if you don't have them sized in the correct proportions and minimum sizes. Check the dev sites as they specifically outline the requirements.

michaellevy commented 8 years ago

Ah, I had teaser and feature images mixed up. I don't much use feature images, but changing the two references to page.image.feature in open-graph.html to to page.image.teaser produces the behavior I wanted. Thanks so much!