[fastpages] No Twitter card for main page? (Solved)

nbdev
1

Hi, I must be doing something wrong.
Individual posts preview fine on Twitter (with images, etc.), but the main blog site does not. The Card Validator shows

Unable to render Card preview
and the log shows:

INFO:  Page fetched successfully
INFO:  11 metatags were found
ERROR: No card found (Card error)

I thought I was following the Setting an Image For Social Media instructions. For the main blog I put the image: YAML in the front matter of index.html, and it looks (from the HTML source) like og:image is getting set.

But it also looks like og:type is getting set to article for the posts, whereas nothing is set for the main blog.

What to do? Thanks.

2

Follow-up: If I add the following to _includes/head.html:

  <meta name="twitter:card" content="summary_large_image">

…then I can get a default card to appear for the main page, however even with og:image: set, no image appears, only the default blank icon.

Also, manually going into the gh-pages branch on GitHub and adding

<meta property="og:type" content="website" />

seems to have no effect: the field gets set in the final html, but still no image in the card/preview.

EDIT: ‘Minimal example’ follow-up:
All this is also true for the main Fastpages demo site: Try plugging https://fastpages.fast.ai/ into https://cards-dev.twitter.com/validator and you’ll see the same error(s) that started this thread.
Maybe worth @'ing @hamelsmu at this point.

Since most usage will likely involve people sharing individual posts (which work fine) rather than the main blog page, this issue is probably low-priority.
Also note that Facebook preview of the main page works fine; this issue only affects Twitter.

UPDATE: An easy solution!

I find these criteria to be necessary and sufficient to make it work:

  1. Some kind of twitter:card meta tag needs to be set, e.g. by adding a line in _includes/head.html. To match the style for the posts, the content field should be "summary" (although "summary_large_image" would also work).
  2. In index.html, the image: YAML should be set to your preview image, same as with regular posts. If not, you’ll get the default icon from Twitter.
  3. The image in question should not be an off-site image, as noted in the Fastpages README: “Note: for this setting you can only reference image files and folders in the /images folder of your repo.” So external URLs – while some may work – will usually fail.

Demo: https://drscotthawley.github.io/devblog4/
Submitted Pull Request with the fix.