Hugo 静的サイトジェネレーターブログを開設してみる⑥twitterカードを作成する

16483 ワード
Twitter SSG Blog netfily Hugo Twitter テキストリンク

前回はカスタムCSSを当てることができたので、今回はTwitterカードのセッテイングをしていく！

前回の記事

Hugo 静的サイトジェネレーターブログを開設してみる①Hugoインストール編
Hugo 静的サイトジェネレーターブログを開設してみる②Netlifyでホスト＆デプロイ実行まで
Hugo 静的サイトジェネレーターブログを開設してみる③トップページの編集
Hugo 静的サイトジェネレーターブログを開設してみる④記事contentの作成
Hugo 静的サイトジェネレーターブログを開設してみる⑤カスタムCSSを編集する

OGP Open Graph Protco

FacebookやTwitterなどででシェアするとき、
ページタイトル・URL・概要説明・アイキャッチ画像をく表示させるもの
これを設定することになります。

head.htmlにmetaタグを書く

色々試したところ、この状態でTwitterカード表示できました。
省略できそうな部分はコメントアウトしています。
今回フェイスブック対応はしていない状態です。

Blog/layouts/partials/head.html
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup -->
<!-- twittercardtag -->
<!-- twittercard  summary、summary_large_image、app、player -->
    <meta name="twitter:card"           content="summary_large_image">
<!-- OpenGraph -->
    <!-- マークアップにog：type、og：title、og：descriptionが存在するが
        twitter：cardが存在しない場合、サマリーカードがレンダリングされることがある-->
    <meta property="og:type"            content="article">
    <meta property="og:title"           content="{{ .Params.title }}" />
    <meta property="og:description"     content="{{ .Params.description }}" />
    <meta property="og:image"           content="{{ .Site.BaseURL }}{{ .Site.Params.Twitterthumbnail }}" />

<!-- summary、summary_large_image、プレーヤーカードで使用 -->
<!-- twitterユーザー名 -->
    <meta property="twitter:site"        content="{{ .Site.Params.Twitterusername  }}">
<!-- twitterID -->
    <meta property="twitter:site : id"   content="{{ .Site.Params.Twitterid  }}">
<!-- @コンテンツ作成者のユーザー名 --><!-- summary_large_imageカードで使用 -->
    <meta property="twitter:creator"     content="{{ .Site.Params.Creator }}">
<!-- @コンテンツ作成者のユーザーID summary、summary_large_imageカードで使用 -->
    <meta property="twitter:creator:id"  content="{{ .Site.Params.Creatorid }}">
<!-- コンテンツの説明（最大200文字） summary、summary_large_image、プレーヤーカードで使用 -->
    <!-- <meta property="twitter:description" content="{{ .Params.description }}" /> -->
<!-- コンテンツのタイトル（最大70文字） summary、summary_large_image、プレーヤーカードで使用 -->
    <!-- <meta property="twitter:title"       content="{{ .Params.title }}" /> -->
<!-- カードで使用する画像のURL。画像のサイズは5MB未満。JPG、PNG、WEBP、GIF形式がサポート。
    アニメーションGIFの最初のフレームのみが使用。SVGは非サポート。 -->
<!-- summary、summary_large_image、プレーヤーカードで使用 -->
    <!-- <meta property="twitter:image"       content="{{ .Site.BaseURL }}{{ .Site.Params.Twitterthumbnail }}" /> -->

<!-- Facebook用設定 -->
<!-- <meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
もしくは
<meta property="fb:admins" content="adminID（15文字の半角数字）" /> -->
    <!-- <meta property="og:url"             content="{{ .Site.BaseURL }}" />
    <meta property="og:site_name"       content="{{ .Site.Params.Twitterusername  }}" />
    <meta property="og:description"     content="{{ .Params.description }}" /> -->

</head>

.Site.Params変数、 .Params変数

.Site.Params変数

.Site.Params変数は、config.tomlに記述している [params]以下を参照します。

Blog/config.toml
[params]
header_image   = "/img/coffee.jpg"

# twittercard画像設定で参照(Blog/layouts/partials/head.html)
twitterusername  = "sakaP🌈さかぴ 如実知見"
twitterid        = "@slope_top_kei"
creator          = "KEISUKE_SAKAGAMI"
creatorid        = "@slope_top_ke"
description      = "私の価値観、学び、人生経験をありのままにアウトプットするブログです"
twittertitle     = "sakaP🌈さかぴのBlog"
title            = "sakaP🌈さかぴ"
twitterthumbnail = "/img/coffee.jpg"

.Params変数

.Params変数は、content/post/記事.mdファイルのフロントマター（---で囲まれている記述のこと）を参照します。

Blog/content/post/20210117-1.md(記事ファイル)
(↓フロントマター)
---
title:       "sakaP🌈さかぴのブログ: 記事 1 のタイトルテキスト"
subtitle:    "subtitle: 記事 1 のサブタイトル"
description: "article_discription: 記事1の概要説明文"
date:        2021-01-17T14:13:08+09:00
author:      "KEISUKE SAKAGAMI"
image:       "img/sozai.jpg"
eyecatch:    "img/sozai.jpg"

# table of content
toc:         true
#true=未完成記事扱い  hugo -Dで表示
draft:       false
tags:        ["プログラミング", "ライフハック", "カフェ", "生活コスト", "what?", "経済マネー", "健康", "思考感情メモ", "書評", "スピリチュアル", "夢日記", "エンジェルナンバー", "趣味", "サーフィン", "その他"]
categories:  ["PROGRAMMING", "LIFE_HACK", "CAFE", "LIVING_COST", "WHAT?", "ECONOMY", "HEALTH", "THOUGHTS_EMOTIONS_", "BOOK_REVIEW", "SPIRITUAL", "DREM_ANGEL_NUMBER", "HOBBY", "NON_GENRE"]
---
(↑フロントマター)

# はじめに
# 結論
# ~~~について
# ~~~~問題点
# ~~~~解決策
# まとめ

public/index.html　をチェックする

Blog/layouts/partials/head.htmlに記述をして、hugoコマンドでビルドすると
本番で使用されるBlog/public/index.htmlにコードがレンダリングされる

ターミナル
//ビルド実行
% hugo
Blog/public/index.html
<!DOCTYPE html>
<html lang="ja-jp">
<head>
　　 <meta name="generator" content="Hugo 0.79.1" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="twitter:card"            content="summary_large_image">
    <meta property="og:type"             content="article">
    <meta property="og:title"            content="" />   <!-- 記事.mdを参照 -->
    <meta property="og:description"      content="" />　　<!-- 記事.mdを参照 -->
    <meta property="og:image"            content="https://relaxed-swirles-2507d0.netlify.app/img/coffee.jpg" />
    <meta property="twitter:site"        content="sakaP🌈さかぴ 如実知見">
    <meta property="twitter:site : id"   content="@slope_top_kei">
    <meta property="twitter:creator"     content="KEISUKE_SAKAGAMI">
    <meta property="twitter:creator:id"  content="@slope_top_ke">
ターミナル
//変更の確認
% git status
//変更のステージング
% git add .
//ローカルリポジトリにコミット
% git commit -m "任意のコミットメッセージ"
//リモートリポジトリにプッシュ
% git push origin (リモートブランチ: 例master 例HEAD)　

Netfilyブラウザでデプロイ実行します

Card validator でチェックする

https://cards-dev.twitter.com/validator

フォームに記事ページのURLを貼り付け、Preview cardボタンを押します。

The card for your website will look a little something like this!
あなたのウェブサイトのカードはこのように少し見えるでしょう！

Twitterカードをクリックすると、指定した記事URLにアクセスしました！

参考になった記事

twitterドキュメント
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup

Facebook・TwitterのOGP設定方法まとめ
https://ferret-plus.com/610

Facebookインサイト設定の落とし穴、app_id, admins の違いとは
https://blog.sixapart.jp/2012-04/fb-app-id.html

【2020年版】Twitterカードとは？使い方と設定方法まとめ
https://saruwakakun.com/html-css/reference/twitter-card

Twitterカードの使い方と設定方法
https://www.howtonote.jp/twitter/helpful/index5.html

Hugo のテンプレート 基本
http://takunagai.github.io/post/hugo/template/

ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた
https://www.granfairs.com/blog/staff/setting-twitter-cards