Přejít k navigační liště

Zdroják » Různé » Twitter Cards a Hugo šablony

Twitter Cards a Hugo šablony

Články Různé

Co je to Twitter card a jak ji nastavit pro váš web.

Nálepky:

Text vyšel původně na webu autora.

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. Já jsem potřeboval vybrané téma upravit, mimo jiné jsem se už nějaký čas chystal na Twitter Cards. Je možné, že Twitter Cards už jsou ve vašem tématu nachystané, ale v mém případě tomu tak nebylo.

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, co přesně Twitter Card je, ale pro mne to dělá takový ten hezký tweet, odkazující na článek, či webovou stránku:

Ukázka Twitter Card s velkým obrázkem

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.cz/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.

Ukázka Twitter Card typu summary

A je hotovo.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.