Tweet Open Graph protocolとは Open Graph protocolとはTwitter ,Facebook などのSNSにURLを載せたときに、サイト名や記事のタイトル、サムネイル画像、説明などが、カードの形で表示されるというものです。 以下は自分のブログをTwitterにあげた時の画像です。 OGPに対応することで、記事の概要が把握できるようになりクリック率の増加にもつながるのではないでしょうか。 サイトをOGPに対応させるには以下のメタタグを書くことが必要です。 og:title og:type og:url og:image og:description また、Twitterでogp対応し、カードを表示するには別途以下のメタタグが必要です。 twitter:card twitter:image twitter:title twitter:descriptio
今回はHUGOのOGP画像を自動生成する方法をまとめたので紹介します。 3パターンの自動生成方法の比較と一番カンタンなCloudlinaryでの、自動生成方法を紹介します。 前提:OGP画像の基本とHUGOでOGP画像を自動生成する方法 OGP画像を作る前にカンタンにOGP画像の仕様や、HUGOでOGP画像を自動生成する方法一覧を紹介します。 OGP画像のサイズHUGOのOGP画像生成する方法一覧サクッと説明します。 OGP画像のサイズそもそものOGP画像のサイズですが、1200×630pxで作れば間違いありません。 OGP画像はメディアごとにサイズが異なりますが、横長のTwitterと正方形の表示にさえ対応すれば実質OKです。 なので、1200×630pxで画像をつくって、できるだけ中央部分にテキストなどを寄せるのがセオリーです。 HUGOのOGP画像生成する方法メディアごとにOGP画像
git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane $ git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane Cloning into 'themes/jane'... remote: Enumerating objects: 250, done. remote: Counting objects: 100% (250/250), done. remote: Compressing objects: 100% (226/226), done. remote: Total 250 (delta 17), reused 137 (delta 3), pack-reused 0 Recei
いまのところ,はてなブログにてブログを作成していますが,静的サイトジェネレーターであるHugoというサービスを使えば,下記のような利点があることから,将来の移行を見据えつつ,環境構築をした際のメモになります.ホスティングサービスには,Netlifyを使用しました. よさそうな点 ・提供される様々なテーマから好みのものを選択可能 ・markdownで記事を作成可能 ・ソースはGitHubで管理可能 ・変更内容をプッシュすれば,自動でサイトも更新される 作成したブログはこちらです. https://www.data-blog.site/ 前提条件 下記の環境で実施しています. Ubuntu 20.04 on Windows hugo_extended_0.101.0_Linux-64bit Hugoのインストール 下記の通りインストールし,解凍します. wget https://github.
Hugo や Hugo extended が動作する Docker image の作成方法について知見をまとめます。 Hugo の Docker image 現在 Hugo 公式 (gohugoio) が提供する Docker image はありません。 Docker Hub に gohugoio のアカウントがありますが、あれは GoHugoIO が管理しているものではありません。 手っ取り早く Hugo の Docker image が欲しい方は私が管理しているものを良かったら使ってください。新しいリリースがあればその日のうちに更新するようにしています。 CircleCI や GitLab CI/CD で使いたい場合は以下のイメージをどうぞ。 peaceiris/hugo-extended-docker: Docker image of Hugo (Hugo extended and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く