GitHub Actionsを使ってテックブログの執筆を省力化する

2024/10/04 14 users GitHub Actions 省力化 執筆 figma ＣＴＯ

ツール導入前の課題GitHub Actionsを用いた運用を開始するまで、テックブログを公開するにあたり以下の手順を実施していました。 Notion上で執筆を行う CTO, 上長がNotion上でレビューをおこなう Mediumのアクセス権をもらい、入稿を行う テックブログ運営チームがFigmaでOGP画像を作成する 公開 この運用では3つほど課... 続きを読む

unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。

2023/12/08 6 users unjs SHARP くらげ nitro Satori

Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それを参考に実装してみた satori+sharpを使った画像生成 この3つ... 続きを読む

X (Twitter) で従来のようにOGP画像にタイトル等のテキストを表示する方法まとめ

2023/10/06 25 users Twitter 従来 テキスト 概要 ドメイン名

Web技術 X (Twitter) で従来のようにOGP画像にタイトル等のテキストを表示する方法まとめ Friday, October 6th, 2023 2023年10月5日頃、X (Twitter) でOGP画像が設定されたWebページの URLをツイート（ポスト）しても従来のようにページのタイトルや概要が表示されなくなり、OGP画像とドメイン名だけが表示されるように... 続きを読む

PHP カンファレンス沖縄 2022に3名のメンバーが登壇・ゴールドスポンサーとして協賛しました - BASEプロダクトチームブログ

2022/08/29 8 users ゴールドスポンサー 補足 登壇 登壇者 メンバー

PHPカンファレンス沖縄2022のOGP画像 この度は、8/27(土)に開催された PHP カンファレンス沖縄 2022 にゴールドスポンサーとして協賛し、また 3 名のメンバーが登壇しました。 登壇者 3 名からオンラインで参加した感想や発表内容の補足など、PHP カンファレンス沖縄 の参加レポートをお届けします！ 発表内容と補足 プ... 続きを読む

レシピページのOGP画像を動的に生成する - クックパッド開発者ブログ

2022/02/17 21 users iOS OGP morishin クックパッド開発者ブログ

こんにちは、クックパッドでエンジニアをやっている @morishin です。入社してわりと長い間 iOS アプリやそのバックエンドの開発を中心にやってきましたが、最近は専らウェブフロントエンドとその基盤をいい感じにするというのをやっています。先日クックパッドウェブサイトのレシピページの OGP 画像を素敵に刷新したの... 続きを読む

サイトのOGP画像を自動生成する

2022/02/02 10 users 自動生成 OGP 略語 パンダ 念願

最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツ... 続きを読む

Qiita記事の新しいOGP画像が中華フォントな件 - Qiita

2020/01/23 26 users Twitter Qiita imgix Qiita記事 漢字

TwitterにQiitaのURLを貼った際、大きな画像が表示されるようになりましたね。これはOGP画像と呼ばれるものです。 Qiita記事のOGPイメージが新しくなりました - Qiita Blog ……ん？ 漢字が少し変ですね？ Noto Sans CJK JPと比較してみましょう。 Qiita Blogによると、imgixのMulti-line Text & Overlaysを使って実装して... 続きを読む

SNSに特化したソースコード共有サービス「ReviewMe」をリリースしました｜ちゃんなか｜note

2019/02/13 28 users プロトタイプ 瞬時 ソースコード SNS URL

ReviewMeは、「誰でも気軽に技術発信が出来る」SNSに特化したソースコード共有サービスです。 ソースコードをReviewMe上に貼り付けると、SNSに投稿するためのOGP画像とURLが瞬時に自動生成され、誰でも気軽にソースコードをSNS上でシェアすることが出来ます。 何故ReviewMeを作ったのか プロトタイプを開発し、ユーザー... 続きを読む

SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita

2018/12/06 16 users Twitter Qiita Firebase yuneco

SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった この記事はFirebase Advent Calendar 2018 6日目の記事です。 はじめまして、ゆき(@twitter:yuneco)です。日頃は絵を描いたりちょっとしたWebアプリを個人開発したりして遊んでいます。今日は個人でTwitter連携アプリを... 続きを読む

FacebookとTwitterのOGP画像を両方キレイに表示するためのPSD

2017/03/22 7 users Twitter Facebook psd アイキャッチ 両方

ブログやメディアを運営されている方で、OGP画像の切り取りが微妙だな〜と思われたことはありませんか？ 当ブログでも失敗したのですがこのブログのアイキャッチを1200px × 900pxで作ってFacebookやTwitterなどでシェアすると上記のように失敗して表示されてしまいました。 このようなことがないようにOGP画像を作る際にTwitterやFacebookでどのように表示されるのか意識して... 続きを読む

WordPressでFacebookのOGP画像が正しく反映されない時の対処法 | なちブ〜living freely〜

2016/01/09 8 users Facebook WordPress 対処法

サーバーはあまり関係ないかもしれませんが念のため…(；・∀・) ワードプレス4.3.1にAll in one SEO packプラグインインストールし、 All in one SEO packでFacebook OGPを設定。 Stinger5-Cheetahとは、 ブログマーケッターのJUNICHIさんがリリースしているワードプレスのテーマです。 本家のStinger５より記事幅が広かったり、 ... 続きを読む

FacebookでシェアしたときのOGP画像、大きな表示で出てますか？ | 編集長ブログ―安田英久 | Web担当者Forum

2015/03/24 34 users Facebook 安田英久 Web担 Web担トップ なか

Web担トップ » 編集記事一覧 » [コラム] Web担のなかの人――編集部ブログ » 編集長ブログ―安田英久 » FacebookでシェアしたときのOGP画像、大きな表示で出てますか？ 編集長ブログ―安田英久 FacebookでシェアしたときのOGP画像、大きな表示で出てますか？ Facebookで自社サイトの記事がシェアされたときに、大きな画像で表示されるようにする方法 安田英久（Web担 ... 続きを読む

これで一撃！簡単にOGP画像をつくれる2つの秘密道具！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2014/01/27 103 users KAYAC DESIGNER のび太 りえもん 一撃 必需品

これで一撃！簡単にOGP画像をつくれる2つの秘密道具！ こんにちは！デザイナーのわりえもんです！ ドラえもんみたいな見た目の、のび太みたいななにかです。 デザイン制作に役立つ秘密道具を紹介します！ さて今回はサイト・アプリ制作に必需品な Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします！ 2014年1月現在、OGP画像の表示には大きくわけて2種類あります。 一つの画像で、どっ... 続きを読む

FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版） | Sunday In The Park

2013/09/13 155 users Facebook ニュースフィード 帰り道 青い部分 仕様

↑こういう画像にすればOK。青い部分は、実際には白余白にします。 FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。 って記事を昨日書いたんですが、記事中にもある通り、PCでのみ検証してました。 で、昨日の帰り道にスマホで見てみたら、残念ながら↑のサイズではうまくいかないケースもあるようで。 仕方ないので泣きながら山のようなサイズの画像を作っ... 続きを読む