すべてのカテゴリ

こんにちは。ココナラでWeb制作をしているタケです。普段XやFacebookを使っている人は、SNS上でURLを貼り付けた際に表示されるカードのようなものをご存知でしょうか？今回は、WebサイトをSNSでシェアする際に重要となる「OGP」について、簡単にご説明します。OGPとはOGPとは、「Open Graph Protocol」の頭文字をとったもので、SNS上でWebサイトをシェアしたときに、サムネイルやタイトル、説明文などを表示させるための仕組みのことです。SNSを使っている人は見たことがあるかと思いますが、投稿にURLを貼り付けて送信すると、以下の画像のようなカード（赤枠）が現れます。簡単に言えば、これがOGPです。上の画像は、X Developer Platformのページより引用しましたOGPを設定することで、シェアしたページがどんな内容なのか分かりやすくなります。SNSが普及している現代では、WebサイトにOGPの設定をしておくことはとても大切です。OGPはHTMLで設定できるOGPは、次のようなHTMLを書いて設定できます。<meta name="twitter:card" content="summary"></meta>主にサムネイル画像・タイトル・説明文の3つを設定すれば、完了です。OGP設定ができるコーディングはいかがですか？OGPの設定は難しくありませんが、実際はHTMLの知識が必要です。思い通りの内容をきちんと表示させたいなら、コーディングのプロに頼みましょう。もし、「OGP込みでWebサイトのコーディングをお願いしたい」という

当記事は、下記サービスのSEO対策箇所（OGP設定）の補足説明として書かせていただいております。下の画像の例は、Google検索した際に表示されるものです。・(A) GoogleやYahoo等の検索サイトに表示される際の、タイトル名 　　（titleタグ） ・(B) GoogleやYahoo等の検索サイトに表示される際の、ページ説明文章 　　（name="description"）続いて、下の画像の例は、URLをslackに貼った際に自動的に表示されるものです。・(B) GoogleやYahoo等の検索サイトに表示される際の、ページ説明文章 　　（name="description"） ・(C) OGP設定としての、サイト名 　　（og:site_name） ・(D) OGP設定としての、簡単な要約（約20文字以内） 　　（og:title） ・(E) OGP設定としての、画像（横1200px 縦630px） 　　（og:image）