Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add meta og tags #39

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open

Add meta og tags #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
95af35c
Update jolla-blue.html
monkeywithacupcake Apr 2, 2021
33a021c
Update jolla.html
monkeywithacupcake Apr 2, 2021
e31ec66
Update onofre.html
monkeywithacupcake Apr 2, 2021
6c7b220
Update trestles.html
monkeywithacupcake Apr 2, 2021
c096717
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
e1cbc2a
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
ba39b43
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
a2062fe
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
15e670b
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
6036204
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
c82eaaf
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
a684d49
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
c15fe7a
Update jolla.html
monkeywithacupcake Apr 2, 2021
2d698d9
Update jolla.html
monkeywithacupcake Apr 2, 2021
67c5323
Update jolla-blue.html
monkeywithacupcake Apr 2, 2021
451960b
Update onofre.html
monkeywithacupcake Apr 2, 2021
d98947f
Update trestles.html
monkeywithacupcake Apr 2, 2021
0487ace
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
ba7b13f
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
9764340
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
9e14b5e
Update skeleton.Rmd
monkeywithacupcake Apr 2, 2021
8114fe8
Update onofre.html
monkeywithacupcake Apr 2, 2021
9f9f049
Update onofre.html
monkeywithacupcake Apr 2, 2021
9a7a863
Update onofre.html
monkeywithacupcake Apr 2, 2021
bada64e
Update onofre.html
monkeywithacupcake Apr 2, 2021
d2c4b8b
Update trestles.html
monkeywithacupcake Apr 2, 2021
4ec0b48
Update jolla.html
monkeywithacupcake Apr 2, 2021
4db11da
Update jolla-blue.html
monkeywithacupcake Apr 2, 2021
a509da9
Update README.md
monkeywithacupcake Apr 2, 2021
71a9066
Update README.md
monkeywithacupcake Mar 12, 2022
2198d4f
Update onofre.html
monkeywithacupcake Mar 12, 2022
ab1bcb6
Update trestles.html
monkeywithacupcake Mar 12, 2022
7d5395b
Update inst/pandoc_templates/jolla-blue.html
monkeywithacupcake Mar 12, 2022
c724bc3
Update jolla-blue.html
monkeywithacupcake Mar 12, 2022
9c10dfe
Update jolla.html
monkeywithacupcake Mar 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,23 @@ in New York City. "ГУМ" is their latest project which examines the rise of
consumerism in post-Soviet republics.
```

## Meta tags

Each of the templates has an optional meta section. If you include it, the values
will be used to create social cards, like for twitter.

```
meta:
description: "floatplane data artist"
url: "yoursite.com"
twitter: "yourname"
```
These tags assume that `@yourname` is your twitter handle. Do not include the "@" because it confuses pandoc.
The code also assumes that your image is going to be at the first level of your site, like: `yoursite.com/herzl.jpg`.

Check your card with the twitter card validator.


## Troubleshooting

Most issues that people have using this package are related their installation
Expand Down
17 changes: 17 additions & 0 deletions inst/pandoc_templates/jolla-blue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,23 @@
<style type="text/css">body {background-color: #3A66B7;font-family: 'Merriweather', serif;color: #FEFEFA;}</style>

<title>$title$</title>

$if(meta)$
<meta name="description" content="$meta.description$"></meta>
<meta name="twitter:description" content="$meta.description$"></meta>
<meta name="og:description" content="$meta.description$"></meta>
<meta name="twitter:title" content="$title$"></meta>
<meta name="og:title" content="$title$"></meta>
<meta name="twitter:url" content="$meta.url$"></meta>
<meta property="og:url" content="$meta.url$"></meta>
<meta name="twitter:image:src" content="$if(meta.image)$$meta.image$$else$$meta.url$/$image$$endif$"></meta>
<meta property="og:image" content="$meta.url$/$image$"></meta>
Copy link

@gadenbuie gadenbuie Jan 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to og:image, I recommend that postcards also support the og:image:alt and twitter:image:alt tags as well. One option would be to add image_alt or meta.image_alt (or both) to the YAML:

meta:
  description: "floatplane data artist"
  url: "example.com"
  twitter: "yourname"
  image: https://example.com/social.png
  image_alt: Short description of social card image.
image: avatar.png
image_alt: Short description of avatar image.

The two tags to add would be something like

<meta name="twitter:image:alt" content="$if(meta.image_alt)$$meta.image_alt$$else$$image_alt$$endif$"/>
<meta property="og:image:alt" content="$if(meta.image_alt)$$meta.image_alt$$else$$image_alt$$endif$"/>

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Relatedly, image_alt could be added here

postcards/inst/pandoc_templates/solana.html

Line 68 in daad882

<img src="$image$" style="height:15rem" class="rounded float-right">

<meta name="twitter:card" content="summary"></meta>
$if(twitter)$
<meta name="twitter:creator" content="@$meta.twitter$"></meta>
monkeywithacupcake marked this conversation as resolved.
Show resolved Hide resolved
<meta name="twitter:site" content="@$meta.twitter$"></meta>
$endif$
$endif$

$if(favicon)$
<link rel="shortcut icon" href=$favicon$>
Expand Down
17 changes: 17 additions & 0 deletions inst/pandoc_templates/jolla.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,23 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<title>$title$</title>

$if(meta)$
<meta name="description" content="$meta.description$"></meta>
<meta name="twitter:description" content="$meta.description$"></meta>
<meta name="og:description" content="$meta.description$"></meta>
<meta name="twitter:title" content="$title$"></meta>
<meta name="og:title" content="$title$"></meta>
<meta name="twitter:url" content="$meta.url$"></meta>
<meta property="og:url" content="$meta.url$"></meta>
<meta name="twitter:image:src" content="$meta.url$/$image$"></meta>
<meta property="og:image" content="$meta.url$/$image$"></meta>
<meta name="twitter:card" content="summary"></meta>
$if(twitter)$
<meta name="twitter:creator" content="@$meta.twitter$"></meta>
<meta name="twitter:site" content="@$meta.twitter$"></meta>
$endif$
$endif$

$if(favicon)$
<link rel="shortcut icon" href=$favicon$>
Expand Down
17 changes: 17 additions & 0 deletions inst/pandoc_templates/onofre.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,23 @@
</style>

<title>$title$</title>

$if(meta)$
<meta name="description" content="$meta.description$"></meta>
<meta name="twitter:description" content="$meta.description$"></meta>
<meta name="og:description" content="$meta.description$"></meta>
<meta name="twitter:title" content="$title$"></meta>
<meta name="og:title" content="$title$"></meta>
<meta name="twitter:url" content="$meta.url$"></meta>
<meta property="og:url" content="$meta.url$"></meta>
<meta name="twitter:image:src" content="$meta.url$/$image$"></meta>
<meta property="og:image" content="$meta.url$/$image$"></meta>
<meta name="twitter:card" content="summary"></meta>
$if(twitter)$
<meta name="twitter:creator" content="@$meta.twitter$"></meta>
<meta name="twitter:site" content="@$meta.twitter$"></meta>
$endif$
$endif$

$if(favicon)$
<link rel="shortcut icon" href=$favicon$>
Expand Down
17 changes: 17 additions & 0 deletions inst/pandoc_templates/trestles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,23 @@
<style type="text/css">body {font-family: 'Roboto Slab', serif;}</style>

<title>$title$</title>

$if(meta)$
<meta name="description" content="$meta.description$"></meta>
<meta name="twitter:description" content="$meta.description$"></meta>
<meta name="og:description" content="$meta.description$"></meta>
<meta name="twitter:title" content="$title$"></meta>
<meta name="og:title" content="$title$"></meta>
<meta name="twitter:url" content="$meta.url$"></meta>
<meta property="og:url" content="$meta.url$"></meta>
<meta name="twitter:image:src" content="$meta.url$/$image$"></meta>
<meta property="og:image" content="$meta.url$/$image$"></meta>
<meta name="twitter:card" content="summary"></meta>
$if(twitter)$
<meta name="twitter:creator" content="@$meta.twitter$"></meta>
<meta name="twitter:site" content="@$meta.twitter$"></meta>
$endif$
$endif$

$if(favicon)$
<link rel="shortcut icon" href=$favicon$>
Expand Down
4 changes: 4 additions & 0 deletions inst/rmarkdown/templates/jolla-blue/skeleton/skeleton.Rmd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ links:
url: "https://github.com/"
- label: Email
url: "mailto:email@email.com"
meta:
description: "floatplane data artist"
url: "yoursite.com"
twitter: "yourname"
output:
postcards::jolla_blue
---
Expand Down
4 changes: 4 additions & 0 deletions inst/rmarkdown/templates/jolla/skeleton/skeleton.Rmd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ links:
url: "https://github.com/"
- label: Email
url: "mailto:email@email.com"
meta:
description: "floatplane data artist"
url: "yoursite.com"
twitter: "yourname"
output:
postcards::jolla
---
Expand Down
4 changes: 4 additions & 0 deletions inst/rmarkdown/templates/onofre/skeleton/skeleton.Rmd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ links:
url: "https://twitter.com/"
- label: Email
url: "mailto:email@email.com"
meta:
description: "floatplane data artist"
url: "yoursite.com"
twitter: "yourname"
output:
postcards::onofre
---
Expand Down
4 changes: 4 additions & 0 deletions inst/rmarkdown/templates/trestles/skeleton/skeleton.Rmd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ links:
url: "https://github.com/"
- label: Email
url: "mailto:email@email.com"
meta:
description: "floatplane data artist"
url: "yoursite.com"
twitter: "yourname"
output:
postcards::trestles
---
Expand Down