My automated twitter cards are not showing up on Twitter?

[thegilpatrick]

Description

Hey,

I just created a blog via Quarto and tried enabling the automated twitter cards for my posts.

Here is my shortened _quarto.yaml.

website:
  favicon: thegilpatricklogo.png
  open-graph: true
  twitter-card: true
  site-url: https://thegilpatrick.com

When I try to post a link to a blog post webpage for example: https://thegilpatrick.com/posts/recipe-web-scrape/ Nothing shows up on Twitter. Even though when I view the page source search the html I found the twitter card stuff near the bottom of the page.

<meta property="og:title" content="Recipe Web Scraping in Observable">
<meta property="og:description" content="Tutorial on how to web scrape recipes with Observable.">
<meta property="og:image" content="https://thegilpatrick.com/posts\recipe-web-scrape\recipe.webp">
<meta property="og:site-name" content="The Gilpatrick">
<meta property="og:image:alt" content="Zucchini Courgette">
<meta name="twitter:title" content="Recipe Web Scraping in Observable">
<meta name="twitter:description" content="Tutorial on how to web scrape recipes with Observable.">
<meta name="twitter:image" content="https://thegilpatrick.com/posts\recipe-web-scrape\recipe.webp">
<meta name="twitter:image:alt" content="Zucchini Courgette">
<meta name="twitter:card" content="summary_large_image">

Why do you think the Twitter web crawler cannot find it? Could it have to do with it being too far down the page starting on line 25304?

[dragonstyle]

I ran the URL through their validator and it complained about the size being too large:

https://cards-dev.twitter.com/validator

I'm not sure what is making the page excessively large though - not sure if that is a helpful clue. I also noticed that the image path itself is mixing forward and backward slashes, which may work for twitter but is clearly a bug in Quarto. What version of Quarto are you using - I feel like we may have fixed this but would be good to confirm that you're on the latest released build of Quarto 1.3.

[mcanouil]

I highly recommend, you to follow the documentation on how to start a website and how to deploy the website to GitHub Pages.

With the current state of your repository, it's unlikely we can figure out what's wrong with social media cards amongst everything else.

Once, you get a clean repository that we can render, if after reading the documentation on publishing your website you still have issues to publish it, please do come back to us.

[thegilpatrick]

Sounds good. Just to be clear is there a reason the standalone html files can't use OpenGraph or Twitter Cards yet?

[mcanouil]

As I said, there are currently many things wrong in your repository not allowing us to render your project, thus we can't investigate properly.

[thegilpatrick]

That's fair. I will try to publish tomorrow and turn off the embed-resources: true option. I think you are right that is creating the file size problem.

[mcanouil]

There is also no use to do that for website, it increases a lot the loading time, since libs are no longer shared by multiple pages but embedded in each.
embed-resources is useful when you want to send the file, because you can send one file and not an archive.

1. Cleanup your repository
2. Change the output directory as explained in the documentation (see https://quarto.org/docs/publishing/github-pages.html#render-to-docs).

   project:
     type: website
     output-dir: docs

3. Render your website
4. Go to your repository page setting and select the proper branch and directory

5. Enjoy your website on GitHub Pages

[thegilpatrick]

Okay I republished to Github Pages without embed-resources: true and the twitter cards are still not working.

[thegilpatrick]

Here is the repository: https://github.com/thegilpatrick/Blog

[mcanouil]

You still have issues in your website:

• I add to exclude the R Tidycensus post
• you still have pages with embed-resources: true
• your site-url is wrong for some reason (probably a bad setup of your domain in Netlify): https://www.opengraph.xyz/url/https%3A%2F%2Fthegilpatrick.com%2Fposts%2Frecipe-web-scrape%2F
• Also you still have weird backslashes in the URLs which I can't explain (Windows?).

See https://www.opengraph.xyz/url/https%3A%2F%2Fm.canouil.dev%2Fquarto-issue5973%2Fposts%2Frecipe-web-scrape%2F from my fork at https://github.com/mcanouil/quarto-issue5973 and published to GitHub Pages (https://m.canouil.dev/quarto-issue5973/).
For short, it is working "fine" for me.

What's the output of quarto check?

EDIT: reproducible example/fork moved to https://github.com/mcanouil/quarto-issues/tree/main/quarto-cli-5973

[thegilpatrick]

your site-url is wrong for some reason (probably a bad setup of your domain in Netlify):

Yeah sorry I tried publishing with Netlify earlier and was in the process of switching the domain over to Netlify. But then eventually went back to publishing with Github pages. I need to re-render to the docs directory.

See https://www.opengraph.xyz/url/https%3A%2F%2Fm.canouil.dev%2Fquarto-issue5973%2Fposts%2Frecipe-web-scrape%2F from my fork at https://github.com/mcanouil/quarto-issue5973 and published to GitHub Pages (https://m.canouil.dev/quarto-issue5973/).
For short, it is working "fine" for me.

Now I can see the cards but the image preview is still not showing in your forked version. Any guesses as to why that would be?

[mcanouil]

What do you mean by "image preview"?
I updated the site-url since I renamed the fork.

[thegilpatrick]

This is how it shows up when I link it in Twitter

Here is how a normal twitter card looks when I link in Twitter.

[mcanouil]

You need to wait for the DNS cache to propagate.

It's working fine on LinkedIn

And working fine on Twitter