Featured image of post Cara Mengatur Twitter Card (X Card) di Tema Hugo PaperMod

Cara Mengatur Twitter Card (X Card) di Tema Hugo PaperMod

Menjelaskan cara mengatur Twitter Card pada tema PaperMod di Hugo. Memperkenalkan cara menulis di config.toml untuk menerapkannya ke seluruh situs, dan cara menentukan gambar satu per satu di header Markdown setiap artikel. Ini adalah prosedur pengaturan yang berguna untuk menampilkan gambar utama saat dibagikan ke media sosial.

Pendahuluan

Tema PaperMod mendukung Twitter Card. Namun, pengaturan Twitter Card harus ditulis dalam config.toml atau di informasi header *.md pada setiap artikel. Jika diatur di artikel maupun di config.toml, informasi header dari setiap artikel akan diprioritaskan.

Cara Pengaturan

config.toml

Di config.toml, tambahkan item bernama images di bawah [params]. Di images, tulis path ke gambar yang akan ditampilkan di Twitter Card. Jika Anda menempatkan gambar di folder static, Anda hanya perlu menentukan nama filenya saja.

1
2
[params]
  images = ["twitter_card.webp"]

Struktur folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
root
│  config.toml (Tulis di sini)
├─content
│  └─posts
│      └─folder artikel
│         │  index.md (Tulis di sini)
│         └─images
│             cover.webp (Tempatkan di sini)
└─static
    twitter_card.webp (Tempatkan di sini)

Informasi header setiap artikel

Di informasi header setiap artikel, tambahkan item bernama image di bawah cover. Jika Anda mengatur relative menjadi true, Anda dapat menentukannya dengan path relatif dari *.md artikel tersebut.

1
2
3
cover:
  image: "images/cover.webp"
  relative: true

Jika Anda tidak ingin menampilkannya di bagian atas artikel

Jika Anda tidak ingin menampilkan gambar sampul di bagian atas artikel, tambahkan item bernama hidden di bawah cover dan atur menjadi true.

1
2
3
4
cover:
  image: "images/cover.webp"
  relative: true
  hidden: true

Tentang Ukuran Gambar

Berdasarkan spesifikasi PaperMod saat ini, ukuran Twitter Card tampaknya hanya mendukung summary_large_image. Ukuran yang tepat (resolusi) untuk summary_large_image bervariasi, namun sekitar 800 x 418 (rasio gambar 1.91:1) tampaknya sudah baik.

Situs referensi 1 Situs referensi 2

Jika memungkinkan, kami sarankan mengubah ukuran gambar sebelum mempublikasikannya.

Cara memeriksa pengaturan

Untuk memeriksa pengaturan Twitter Card, gunakan Twitter Card Validator. Namun, di lingkungan saya, pratinjau tidak ditampilkan dengan benar, jadi jika pratinjau tidak muncul, kami sarankan untuk memeriksanya sekali sebelum mempublikasikannya dengan menggunakan akun privat atau sejenisnya.

comments powered by Disqus