Question: trying to get social cards to work properly

[lwasser]

Hi there - i am struggling to get social cards to work as i'd like them too. but i did see this issue and pr from @choldgraf that seems to do exactly what I want!

At the top of my sphinx book i have this:

---
:og:description: Learn how to setup and run tests for your Python package locally on your computer using automation tools such as Nox. Also learn about other tools that scientific Python community members use to run tests.
:og:image: https://www.pyopensci.org/python-package-guide/_images/packaging-lifecycle.png
:og:image:alt: An image showing the Python packaging lifecycle
:og:title: Sdf
---

here is a PR with that metadata added to a page. note locally when i build the page i don't see any of the info actually updated as i would expect it to.

Here in the preview you can see from that PR. Notce that the updated metadata for the page is not being recognized by opengraph. the previews seem to have the info from my conf.py (our logo but not the titel and decription from the page metadata that i added.

# Social cards
ogp_site_url = "http://www.pyopensci.org/python-package-guide"
ogp_image = "https://www.pyopensci.org/python-package-guide/_static/logo-light-mode.png"

I'm curious if you can help me understand what i'm doing wrong with this extension and how i can make better cards with a custom description and title if i want those elements to be custom. And with an image that only takes up a part of the card which is what i saw in Chris' pr linked above.

Thank you for any help / guidance!

[hugovk]

I'm not very familiar with CircleCI, but I think the problem might be with the CircleCI build preview or link?

When I build locally with nox -s docs-live, open http://127.0.0.1:8000/tests/run-tests.html and view the HTML source, I see:

<meta property="og:title" content="Run your tests" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.pyopensci.org/python-package-guide/tests/run-tests.html" />
<meta property="og:site_name" content="python-package-guide" />
<meta property="og:description" content="Running your tests is important to ensure that your package is working as expected. However, it’s also important to think about your code running, not only on your computer, but also on the compute..." />
<meta property="og:image:width" content="1146" />
<meta property="og:image:height" content="600" />
<meta property="og:image" content="http://www.pyopensci.org/python-package-guide/_images/social_previews/summary_tests_run-tests_25202a2b.png" />
<meta property="og:image:alt" content="Running your tests is important to ensure that your package is working as expected. However, it’s also important to think about your code running, not only o..." />
<meta name="description" content="Running your tests is important to ensure that your package is working as expected. However, it’s also important to think about your code running, not only on your computer, but also on the compute..." />
<meta name="twitter:card" content="summary_large_image" />

Here we can see the "Run your tests" title.

Also the image link is http://www.pyopensci.org/python-package-guide/_images/social_previews/summary_tests_run-tests_25202a2b.png

Obviously the images haven't been uploaded there yet, but if replace it with the localhost:

http://127.0.0.1:8000/_images/social_previews/summary_tests_run-tests_25202a2b.png

Then I get this generated image:

---

PS You probably want https here in conf.py:

ogp_site_url = "http://www.pyopensci.org/python-package-guide/"

PPS And I noticed CONTRIBUTING.md mentions some nox session names with underscores (docs_build, docs_live), but nox -l shows: docs, docs-live, docs-clean.

[willingc]

Thanks @hugovk 😄

@lwasser In general, we'll want to default to using https unless there is a specific need for http.

[lwasser]

Hi @hugovk 👋 Thank you!! I just created a small PR to fix the CONTRIBUTING file and the https call!! @willingc i agree!! :) that was my mistake!

So my followup question is : If i add custom front matter to a page in our sphinx book like so:

---
:og:description: Learn how to setup and run tests for your Python package locally on your computer using automation tools such as Nox. Also learn about other tools that scientific Python community members use to run tests.
:og:title: A random title
---

I expect the resultant metadata in the tags to look like :

<meta property="og:title" content="A random title" />

But instead it's taking the title from the page which i think is the default:

<meta property="og:title" content="Run your tests" />

Is my expectation for individual page overrides incorrect?

You can see the frontmatter on this page in github.

many many thanks!

[hugovk]

Hmm, I see what you mean. I think your expectation is reasonable.

I tried adding this to the very top of an RST file for a project that uses this extension (the CPython devguide), without any dashes:

:og:description: Learn how to setup and run tests for your Python package locally on your computer using automation tools such as Nox. Also learn about other tools that scientific Python community members use to run tests.
:og:title: A random title

And the HTML source did have those custom values.

I didn't check the image; we have the static one for that site.

So maybe it's an issue with using Markdown? Or perhaps with using per-page overrides with custom images?

[lwasser]

@hugovk THANK YOU for the tip. that was it. i'm using myst markdown and i needed the eval-rst

```{eval-rst}
:og:description: Learn how to setup and run tests for your Python package locally on your computer using automation tools such as Nox. Also learn about other tools that scientific Python community members use to run tests.
:og:title: A random title

to tell it to process the block as it would with rst syntax! I am going to close this as you helped me sort everything out today! 
And now i know i can view the cards locally as well in my build. 

Many many thanks for all of the help!!

[willingc]

@hugovk is the best! Glad it got resolved @lwasser

[Daltz333]

I wonder if it'd be worthwhile to add to the docs or README here 🤔

[lwasser]

@willingc agreed that @hugovk is the best!! so appreciative.

@Daltz333 i'm happy to submit a documentation pr.

i'm happy to describe the sphinx / md / myst fix for reading the custom metadata from a page's frontmatter - this fix:

```{eval-rst} 
:og:description: text here