CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
最近見つけた現象で既に論じられているかと思ったがちょっと解説が見つからなかったのでまとめておく。 手短に X(旧Twitter)クライアントで表示されるTwitterカードについてカードに表示されるドメインとは違うページにリンクさせる手法が存在する この手法は第三者のTwitterカードを利用することができる つまり悪用者は第三者のTwitterカードを表示させながら自身の意図するページに閲覧者を誘導することができる これはフィッシングの手法になりうる 見つけたツイート 以下のツイートはGoogle、Bloomberg、日経ビジネスのTwitterカードが添付されているがクリックするとそれらとは異なる情報商材サイトにジャンプする。リンク先に危険な仕組みはないと思われるがクリックは自己責任で。念を入れたい人は curl -L で。 PCブラウザでカーソルを合わせてもXの短縮URLサービスであ
自作 OSS のためのロゴを作る | micnncim
著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。 OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。 また、SNS でシェアされる際もロゴがあればより良いでしょう。 はじめにソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。 今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。 慣れれば上の画像のようなロゴが 5
React ユーザー向けの Next.js ガイド
最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。 つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材 とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、 ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか 元々は SSR のための煩雑な手続きをしなくてい
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
これからはXのリンクカードを小さいやつにするのが良さそう
Xでの大きいタイプのリンクカード（summary_large_image）からタイトルが消えたことで、さっそく悪用する人が出てきたようです。 写真を4枚並べた投稿を装いスパムサイトに誘導するポスト、X（旧Twitter）で増殖中 - やじうまWatch summaryならこれまで通りタイトルが表示される 一方で小さいタイプのリンクカード（summary）の表示のされ方は変更されていません。サムネイルは小さな正方形ですが、Webページのタイトルはこれまで通り表示されます。 今後は基本summaryがよさそう 情報のほとんどが画像となってしまったsummary_large_imageは、新規サイトにおいてはよっぽどの理由がない限り選ばない方が良いと思います。画像の中にタイトルを入れたとしても、リンクごとに画像のレイアウトやデザインがバラバラで見る人の負担は大きくなります。悪用が増えれば、ますま
2022年版：OGPの正しい設定方法まとめ。確認方法や画像サイズも | Web Design Trends
OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 ただしくOGPが設定されていないと、せっかくSNSでURLがシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があります。 今回は、WebサイトにおけるOGPの正しい設定方法や、適切な画像サイズ、OGPが正しく設定されているかの確認方法をご紹介したいと思います。 OGPとは？ OGPとは、「Open Graph Protcol（オープングラフプロトコル）」の略称で、TwitterやFacebook、LINEやSlackなどでWebサイトをシェアした時に表示されるタイトルや画像を設定するためのものです。 例えば、TwitterでWebサイトをシェアすると上記の画像のようにリンクがカードで表示されますね。 このように、OGPが正しく設定されて
セガサミーホールディングス（ＨＤ）は、エピックゲームズの人気ゲーム「フォートナイト」のような世界的ヒットの創出を目指し、巨額の予算を投じて過去の人気タイトルである「クレイジータクシー」と「ジェットセットラジオ」の新作を開発している。この計画に詳しい関係者が明らかにした。 実現すれば、これら２つのタイトルは同社が１年前に発表した「スーパーゲーム」構想の最初の作品となるだろう。同社は2024年３月期までの中期計画の中で、この構想について既存の知的財産（ＩＰ）を使ったグローバルブランド化による収益基盤の強化や、オンラインコミュニティーの構築を目指す取り組みだと説明した。 同社が手本とするのは「フォートナイト」の手法だ。プレーは無料でどのプラットフォームかも問わず、ときに大々的な競技大会を開催する。そこでは通常のバトルだけではなく、ソーシャルイベントなどの開催や、乗り物や建物など追加アイテム販売で
サーバーサイドで動的にOGP画像をシュッと作る方法 - FastAPIとCairoSVGで作る画像生成API - JX通信社エンジニアブログ
JX通信社シニア・エンジニアの@shinyorke（しんよーく）です. 最近は色んなエンジニアリングをしつつ, イベントの司会業をしています（詳細は最後の方を見てね）. 開発しているサービス・プロダクトの要件で, TwitterやLINE, FacebookでシェアするOGP*1コンテンツ（タイトル・本文・画像）が欲しい コンテンツはユーザーさんの操作で動的に変わる テキストだけじゃなくて, 画像も変えたい←これ なんて事は非常によくある話だと思います. 私はちょっと前に開発したAIワクチン接種予測でそれがありました. こういうやつです 例えば上記画像のテキスト（地域・年齢・接種可能時期）は予測の結果を動的に画像テンプレートに入れて都度作っています. 上記のOGPを生成するために必要なことはこういう感じだろうなー, と以下の絵の通り整理し, やったこと 結果的に, OGPを生成するためのサ
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Twitter、Card Validatorからプレビュー機能を削除。カード情報のキャッシュは最大7日 Twitterは今月、開発者コミュニティサイトにおいて、Card Validatorからプレビュー機能を削除したことを告知した。また、Twitterカードの情報が通常、最大7日キャッシュされることもあわせてコメントした。 Card Validator - preview removal - Twitter Developer すこし前まではCard Validatorを使うことでTwitterカードをプレビューできていたが、Twitterは、異なるプラットフォーム環境において正しいプレビューとは限らなかったとし、プレビュー機能を削除することにした。Card Validatorは引き続き、ほかのデバッグ目的で提供を続けるとのこと。 Twitterカードのプレビューについては、ブラウザやiO
ブログカードを支える技術 - Qiita
ブログカードとは以下のようにリンクをちょっとリッチに表示してくれる機能のことです。以前はこれってどうやって実現しているんだろうと不思議に思っていました。 上記のようなブログカードは「はてなブログ」や「WordPress」等のブログサービスでよく見かけますが、基本的にこれらのブログカードはリンク先のURLを指定するだけで自動的に生成されています。本記事では上記のようなブログカードを支える技術について解説します。 (本記事は自分のブログからの転載記事です。) はじめに 本記事では、ブログカード1の表示に使われる一般的な技術の解説およびJavaScriptによる実装を行います。普段何気なく見たり使ったりしているブログカードの技術に興味がある人におすすめします。 ブログカードの要素技術 まずはブログカードを実現するための要素技術について解説します。 ブログカードの構成 ブログカードは主に「タイトル
Twitter, Facebook, Pinterestなどソーシャルメディア、Googleの検索用のmetaタグのコードを1クリックで簡単に生成できるオンラインツールを紹介します。 日本語のコンテンツにも対応しており、各サービスでどのように表示されるのか確認しながら簡単にコードを生成でき、コピペで利用できます。
こんにちは、クックパッドでエンジニアをやっている @morishin です。入社してわりと長い間 iOS アプリやそのバックエンドの開発を中心にやってきましたが、最近は専らウェブフロントエンドとその基盤をいい感じにするというのをやっています。先日クックパッドウェブサイトのレシピページの OGP 画像を素敵に刷新したのでそのお話をしたいと思います。 ※ ここで OGP 画像と呼んでいるのは Open Graph Protocol で定義されている og:image プロパティに指定する画像のことです。 ※ OGP 画像と呼んでいますが厳密には今回変更したのは Twitter Card (twitter:image) 用の画像のみなので、その他の SNS に表示される画像 (og:image) は変わっていません。 できたもの これまではレシピ作者さんがアップロードされた料理写真を単にクロップ
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
We’re excited to announce Vercel OG Image Generation – a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Dynamic with limitsThe engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social image
サイトのOGP画像を自動生成する
最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツで紹介できるというものです。 サイトのタイトルやページのコンテンツをイメージさせる画像などを meta タグを使って HTML に埋め込みページの内容を表現できます。 Twitter や Slack、Line で URL を貼り付けると URL とは別に表示される物がこれにあたります。サイトのページが増えるとページ一つ一つに OGP 画像を用意することは手間がかかります。そこでこの記事では、OGP 画像を自動生成する方法を紹介します。 OGP 画像の作成方
Nuxtで毎日やりたいことを習慣づけるWebアプリ「コツコツ忍者」を作った🏃♀️【個人開発】 - Qiita
お久しぶりです。 以前、Nuxt.jsとFirebaseでchocottoというTwitterでお菓子と一緒にメッセージを送れるサービスを作ったG4RDSです。 先週、二十歳を迎えて成人しました🎉 今は高専五年で、編入試験を受けている真っ只中です。 適度にお酒を入れて、今後も個人開発頑張っていこうと思います！ さて、今回作ったWebサービスは「コツコツ忍者」というWebアプリです。 昔ばなしに、忍者は跳躍力向上のために毎日成長していく小さな木を飛び続けた、というお話があるのをご存知ですか？ ある能力を向上させたいのであれば毎日継続してやり続けることが大事である、ということですね。 自分が好きなことは続けられますが、好きではないけど上達したいことは続かないからなかなか上達しません。 そんな「上達したいけど続けられない」ことがある人のために、毎日やったことを記録できるWebアプリを作りました
吉川@広島です。 案件でCloudFront+S3なSPAに対してOGP対応が必要になってきそうなため、Lambda@Edgeを使った対応について検証しました。 現状、FacebookやTwitterのBotは基本的にクライアントサイドJSを解釈できず、SPA単体でのOGP対応は難しいとされています。OGPメタタグはSSRで返してあげる必要があるため、「UserAgentでBot判定し、その時だけOGPメタタグ入りのHTMLをエッジサーバでレンダリングして返す」というのが基本戦略になります。 SPAをホスティングするCloudFront+S3を作成する S3バケットを作成する バケット名だけ入力し、後はデフォルト値で作成します。 そして、本来であればSPA用のHTML/JS/CSSリソースをアップロードするのですが、今回はLambda@Edgeの動作確認ができれば良かったためパスしました（
2023年10月5日頃、X (Twitter) でOGP画像が設定されたWebページの URLをツイート（ポスト）しても従来のようにページのタイトルや概要が表示されなくなり、OGP画像とドメイン名だけが表示されるようになりました。 このままでは、画像の投稿 なのか、リンクの投稿なのかが分かりにくくなり、「画像だと思ってタップしたら外部のページに遷移してしまった」とか、逆に「リンクだと思ってタップしたら画像だった」ということで困っている方もいらっしゃるようです。 Webメディアを運用している方や、 私のようにブログを運用している場合などは、 このままではサイトへの流入が減少するため困ると言う方もいらっしゃると思います。 そこで、この記事では、「閲覧者側」と「メディア運営者側」と「ツイート（ポスト）投稿者側」それぞれにできる対策をまとめました。 投稿者側の対策については、閲覧者側の対策の下に書
Twitter, Facebook, Instagram, TikTok, YouTubeなど、各ソーシャルメディアに最適なサイズで画像をトリミングしてくれる無料ツールを紹介します。 AIで自動化されているので、1枚の画像をアップロードするだけで各ソーシャルメディア用の画像102サイズに自動的にサイズが変更されます。もちろん、必要な画像のみでも全部まとめてもダウンロードできます。
🍪 Cookies are not set and no personal data is collected. Just a website in the Internets™️
ブックマークバーなどにドラッグ＆ドロップで登録しておくと、クリックするだけで閲覧中のサイトのOGP設定がすぐに確認出来ます。
Cloudflare Workersを利用した静的配信ページへの動的なOGPメタタグの挿入 - pixiv inside
こんにちは、ピクシブでエンジニアをしているnamazuです。 ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。 本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。 課題 pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。 CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配
どうも、 uzimaru です。 最近、Vercel が @vercel/og という package をリリースしました。 これは、Vercel Edge Functions で OGP 画像を生成するための package です。 Vercel はすでに vercel/og-image というリポジトリを公開しており、それを Fork して画像生成をしていた人も多いと思います。（自分もやってました） こちらのリポジトリと違い @vercel/og は、ReactLike な Object や HTML を元に直接画像を生成するというアプローチを取っています。 そこで今回は、Edge 環境の一つである Cloudflare Workers で同じようなことをしてみたので記事にします。 @vercel/og の仕組み まずは、 @vercel/og の仕組みから説明します。 こちらのライブ
EngineeringProductA framework for building Open Graph imagesWe recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub. You know that feeling when you make your latest hack project public, and you’re ready to share it with the world? And when you go to Twitter to post a link to your repository, you just s
Instagramはこの機能を無効にした際、「Instagramの写真を開くのはInstagram.comであってほしい。その方が良いユーザー体験を提供できるからだ」と語った。 この件とは無関係かもしれないが、Instagramは本稿執筆現在、繋がりにくくなっている。Instagramが公式Twitterアカウントで「可能な限り早く復旧させる」とツイートした。 関連記事 Instagram、Twitterで完全非表示に Twitterは独自フィルタを年内公開か InstagramからTwitterに投稿したツイートの画像が、Twitter上で表示できなくなった。コメントとURLだけが表示され、URLをクリックするとInstagramのWebサイト上で画像が開く。 Instagram、Twitterでの写真プレビュー機能を不能に InstagramのTwitterでの画像プレビューが正常に表
タイトルの通りこの hiroppy.me のサイトを 1 から刷新し、そこにブログページが入ったことによりブログもはてなから移管することにしました。 特に意識してなかったのですが、はてな ブログの方が、ちょうど 100 記事目の時に移行するという流れになってしまいました。。 はてな ブログは有料会員で 4 年間ぐらいやっていたのですが、最近は使えておらず、そうなると当初の目的である独自ドメインでのはてブ通知も今はあまり必要なくなりました。 また、ブログの名前が技術探しですが、最近はプライベートの話や技術を昔以上に探せてない点があり、もう自分としては役割を終えたのかなと思っています。 359 人の方に購読してもらい、多くの方に閲覧してもらって本当にありがとうございました。1 年半も技術の記事を投稿していなかったのに未だにアクセスがあり、嬉しく思います。 過去の記事もこちらへ移動させてますが、
by www_slon_pics チャットやSNSでの「リンクの共有」がウェブサイトが見られるきっかけになることが近年急激に増加しています。アプリを使っていると、URLを貼り付けた時にウェブサイトの中身が「チラ見」できる画像や説明文が表示されるのを目にしますが、作家であり研究者でもあるコリン・ベンデルさんはこれを「マイクロブラウザ」と呼び、その効果を重要視しているとのこと。ウェブサイトへの流入を急増させる可能性を持つマイクロブラウザとはどういったもので、どう扱うべきなのか、ベンデル氏が解説しています。 Microbrowsers are Everywhere ◆ 24 ways https://24ways.org/2019/microbrowsers-are-everywhere/ 一般的にスマートフォンなどの携帯機器向けに開発されたウェブブラウザをマイクロブラウザと呼びますが、ここでベ
2023/01/24 Serverless Frontend Meetup #1 「Cloudflare Workers」のLT枠で発表した資料です。 https://serverless-frontend.connpass.com/event/271894/
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 こんにちは、ハルです。推してるアイドルが新曲を出してイベントをするたびにCDを買うので、どんどんCDが増えています。 Google Chromeの拡張機能を作ったので、「こんなの作ってみたよ！ よかったら使ってね！」という記事を書きたいと思います！ アドベントカレンダーでの記事ということもあり、「ワイからの皆さんへのプレゼントやでっ！」というよくわからない意気込みで作りました（ただ拡張機能を何か作りたかっただけ）。 LIGアドベントカレンダー2019は こちら！ どんなものを作ったか TDK Meta Checker TDK Meta Checkerという拡張機能をつくりました！ 閲覧中のheadタグ内のtitleタグやmetaタグのdescriptio
『画像操作が苦手な方への3つの提案』
WEBディレクターやWEBマスターと言われる人たちにも得手不得手があるのです。 中でも筆者の場合は、画像操作が超苦手です。 えって思われます？ WEBデザイナーではないからです。 今回は、画像操作が苦手な人にも簡単に見栄えする画像が作れる方法を紹介します。 使うところで若干やり方が変わります。 ソーシャルメディアで使う画像 スマホアプリでPhotoLABやパソコンでPhotoFuniaを使ってFacebookなどに投稿する方も多いですね。 筆者も昔の写真などを使ってよくやります。 普通に写真出すより面白かったりしますね Facebookのプロフィール写真を重要視してますか？で書いたようにプロフィール写真を装飾するだけではちょっともったいない気がします。 ブログで使う画像 ブログの中にもさまざまな画像が使われますね。 上記は、見出しにあわせてPhotoFuniaを使って作成したものです。 見
せっかく作り、運営しているWEBサイトであれば、なるべく多くの方に見てもらいたいですよね。 今回は、SNSで多くの方に目にしてもらう、知ってもらうために大切なOGP設定について解説します。 ＞＞【企業向け】SNS運営ができる複業人材をお探しなら「カイコク」 OGP（Open Graph Protocol）とは OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。 これを設定しておくと、SNS上でURLが共有された際にタイトルや画像、説明文などが表示されるようになり、ユーザーに対してページの内容を詳しく伝えることができます。 例えばこちらの枠で囲まれた部分。ここがOGPです。 OGPを設定するべき理由 OGP設定をしていなかった場合、
manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。 OGPとは？ OGPとは、Open Graph Protocolの頭文字をとったもので、Webサイトのコンテンツの内容をSNSで伝える際に使用する仕組みです。例えば、SNSでWebの記事をシェアしたときに、その記事のURLとタイトル、簡単な内容やサムネイル画像がボックスにまとめられて表示されるのを見たことがあると思います。OGPはこのボックス内のタイトルは何を表示するか、URLは何か、画像は何か、といった部分を設定するために使います。 OGPの設置場所 OGPは、HTMLファイルの中のheadタグ内に設置します。me
OGP の生成をAIですれば楽な気がしてきた
この OGP は "Draw open graph protocol by AI." っていう言葉で作った OGP だ。graph に引っ張られすぎだろ... ブログの OGP このブログの入稿は のようにフォルダに visual.png という名前でフォルダに保存して、 --- path: /draw-ogp-by-ai created: "2022-08-24" title: OGP の生成をAIですれば楽な気がしてきた visual: "./visual.png" tags: ["OGP"] userId: sadnessOjisan isFavorite: false isProtect: false --- の visual でパスを visual.png に指定すれば適用できるようになっている。 なので日頃は ユーモア ある画像を入稿するようにしている。 が、最近はそれがめんど
GitHub - vercel/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc
This repository has been archived by the owner on Jan 21, 2023. It is now read-only.
いまさら聞けない！OGPとは？
webサイトを制作していざ公開！という時に、「OGP」の設定をし忘れていることはありませんか？ この「OGP」の設定、webページやブログの記事をSNS上でシェアしたい、シェアされたい方にとってはとても重要な設定事項です。 「Open Graph Protocol」の略。 FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。 OGPを設定するメリットは？ OGPを設定することによって、ページや記事の内容を分かりやすくユーザーに伝えることができます。 例えば、SNSを見ている際、タイムラインに誰かがシェアしたページや記事が流れてくることがあります。 その時にページの概要が書かれていたり、関連する画像が一緒に表示されていたら
こんにちは、Qiita開発チームのharekuです。 以前、Qiitaではビジュアルアイデンティティの再定義を行いましたが、それに伴い、OGPイメージも新しくなりました。 新しいOGPイメージ新しいOGPイメージでは、記事のタイトルとユーザー名が大きく表示されます。 Twitter上での表示過去のデザイン 以前まではこのような小さな表示でした。 新しいデザイン 新しいデザインでは記事のタイトルがより分かりやすくなり、タイムライン上で視認しやすくなりました。 画像はどのように生成しているかQiitaではimgixを使用しており、今回のOGPイメージもimgixのMulti-line Text & Overlaysを使って生成しています。 ご意見をお待ちしております現在は全ての記事に新しいOGPイメージが適用され、個別に旧タイプへ戻すことはできません。 もしご意見がありましたら、いつでもこちら
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
Twitterカードが貼られたツイートはすべて詐欺です、という時代 - Qiita
![さくらインターネットで活躍中の id:y_uukiを訪問 | はてな卒業生訪問企画 [#9] - Hatena Developer Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b5961cfe7e9736ef0e88bc0290b1599481d2626/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenatech%2F20240319%2F20240319125826.jpg)
セガサミー、クレイジータクシーなどの新作でフォートナイト追撃へ
Twitter、Card Validatorからプレビュー機能を削除。カード情報のキャッシュは最大7日 | gihyo.jp
metaタグに記述するソーシャルメディアや検索用のコードをまとめて簡単に生成できるオンラインツール -Meta Tags
レシピページのOGP画像を動的に生成する - クックパッド開発者ブログ
CloudFront+S3なSPAにLambda@EdgeでOGP対応する | DevelopersIO
X (Twitter) で従来のようにOGP画像にタイトル等のテキストを表示する方法まとめ
各ソーシャルメディアに適した画像サイズは102種類！画像を1クリックでトリミングしてくれる無料ツール
OGimage.gallery | The finest hand-picked OG Images ✨
OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ🔧
Cloudflare Workers で画像生成
A framework for building Open Graph images
Meta（旧Facebook）傘下のInstagram、Twitterでの画像表示を復活 9年ぶり
Astroでサイトを作り直し、ブログをはてなから移管しました - hiroppy's site
WebページがSNSで共有された際の見栄えを手軽にチェックできる「TDK Meta Checker」／“Open Graph Protocol（OGP）”のメタデータを表示するGoogle Chrome拡張機能【レビュー】
ウェブサイトへの流入を爆増させる可能性を持つ「マイクロブラウザ」について知っておくべきこと
Cloudflare Workersで動くOG画像生成器
OGPとは？設定するべき理由と設定方法について | デジマギルド
OGPとは？OGPの基本からOGP画像のサイズや設定方法を分かりやすく解説
Qiita記事のOGPイメージが新しくなりました - Qiita Blog
note.com
kabutan.jp
pirorinsensei.com
www.at-s.com
blog.goo.ne.jp/hide_ohoh
kabutan.jp