Twitter Cards a Hugo šablony

Obsah

Když jsem před časem začal psát blog v Hugo, byl jedním z kroků výběr (grafického) tématu. Témata udržuje komunita a tak nepřekvapí, že jsou rozdílné kvality.

U obou blogů, které momentálně provozuji jsem potřeboval vybraná témata upravit. Kromě různých CSS úprav a přizpůsobení layoutu a dalších feature jsem se už nějaký čas chystal na Twitter Cards.

Je dost možný, že Twitter Cards už jsou ve vašem tématu nachystaný, ale v mém případě tomu tak nebylo ani v jednom případě. I když úplně ochuzen jsem taky nebyl — v mých tématech byly alespoň (některá) metadata pro Open Graph, který je Twitterem částěčně podporovaný. Ale úplně správný výsledky mi to nedávalo.

Co je to Twitter Card #

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

Neznám marketingový mumbo-jumbo o tom, co přesně to Twitter Card je, ale pro mne to dělá takovej ten hezkej tweet, odkazující na článek, či webovou stránku:

Existují čtyři druhy karet:

Summary Card — základní jednoduchá karta: má titulek, popis a náhled obrázku.
Summary Card with Large Image — stejný jako Summary Card, ale s velkým obrázkem.
App Card — karta s odkazem na mobilní aplikaci.
Player Card — karta se zobrazením videa/audia.

Jak vytvořit Twitter Card #

Vytvoření Twitter Card je jednoduché — stačí do hlavičky stránky umístit potřebná metadata:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sw_samuraj">
<meta name="twitter:title" content="Cesta samuraje, rok devátý">
<meta name="twitter:description" content="Člověk se ani nenaděje a už jsou
    tady další narozeniny. Tentokrát to pojmu trochu jinak a nebudu psát
    o osobních věcech, ale podívám se statisticky trochu zpět.">
<meta name="twitter:image" content="https://sw-samuraj.blog/img/hero.jpg" />

Referenci všech dostupných tagů lze nalézt v dokumentaci, navrženou kartu je možné si prohlédnout ve validátoru.

Jak dostat Twitter Card do Hugo šablony #

V případě použití Hugo (či jiného generátoru statických stránek) je otázka, jak hodnoty pro Twitter Card generovat dynamicky. 🤔 Jednoduše — odpovědí jsou šablony, proměnné a různé funkce.

Příklad Twitter Card v Hugo šabloně (plná verze na GitHubu):

{{ if .IsPage }}
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@{{ .Site.Params.twitter }}" />
  <meta name="twitter:title" content="{{ .Title }}" />
  <meta name="twitter:description" content="{{ .Description }}" />
{{ if isset .Params "thumbnail" }}
  <meta name="twitter:image"
        content="{{ .Site.BaseURL }}{{ .Params.thumbnail }}" />
{{ else }}
  <meta name="twitter:image"
        content="{{ .Site.BaseURL }}{{ .Site.Params.avatar }}" />
{{ end }}
{{ end }}

Aniž bych příliš zabředával do Golang templatování (Hugo používá přímo template balíček z core knihovny):

Twitter Card se generuje, jen pokud je daný objekt typu page.
Hodnoty pro metadata twitter:title a twitter:description se berou z parametrů title a description z Front Matter.
Hodnota pro metadata twitter:site se bere z parametru twitter ze souboru config.toml ze sekce [params].
Obrázek (twitter:image) se generuje buď:
- z parametru thumbnail ve Front Matter, pokud je přítomen,
- nebo z parametru avatar z globálního config.toml.

Co je to Twitter Card #

Jak vytvořit Twitter Card #

Jak dostat Twitter Card do Hugo šablony #

Související články #