OGPの設定はお済みですか？
WebサイトやSNSでの集客に取り組んでいる方は、OGPという言葉を1度は目にしたことがあるかと思います。 OGPは、SNS上で記事をたくさん拡散してもらうために必須の仕組みです。 今回は、OGPとはどのような仕組みであるのか、各種SNSの具体的なタグの記述方法についてわかりやすく解説します。 OGPとは? OGPとは、Open Graph Protocol（オープン・グラフ・プロトコル）の略称で、Facebookやtwitter、LINEなどのSNS上でホームページの内容を伝えるための情報のことです。 SNSの記事の中で、リンク先の表示でアイコンやタイトル、紹介文が表示されているのを見たことはありますか？ これらはOGPと言って、表示内容を自分で設定することが可能です。OGPを設定すれば、SNS上で拡散された際の、ページのタイトルやURL、アイキャッチ、コンテンツの概要、画像などを自分で
Open Graph protocol
Introduction The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any
HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要
概要 ▶ HTML5はXHTMLではありません。このためOGPの設定で必要とされるxmlnsは不要なのです。代わりに「prefix」という記述を行います。 Geek_Tatoo by Massimo Valiani HTML5でウェブサイトを作成していて、気になったことがありました。 気になった瞬間はFacebookやGoogle+で使用されるOGP（Open Graph protocol）のためのメタタグを設定していた時のことです。 ネットで検索すると必ずと言っていいほど「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" を<html>のタグに追加しましょう」みたいなことが書いてあります。 こんな感じですね。 <html xmlns:og="http://ogp.me/ns#" xmlns:
Facebook・X（Twitter）のOGP設定ガイド【2023年10月時点】｜ブログ｜ウェブスタジオTANI
普段WordPressでの対応がほとんどでプラグインで対応しているんですが、たまに独自で設定する必要があるときに記述方法を忘れてることがしばしばあります。 Basic認証がかかってるテスト環境で確認するのが大変で、公開後に確認したらきちんと表示されないこともあったりで大変なのでまとめました。 OGPってなに？Open Graph Protocolの略で、X（Twitter）やFacebookなどのSNS上でウェブページの情報を連携できるよう記述するHTMLタグのことです。 主にX（Twitter）、Facebookでシェアするときに見やすくわかりやすくなるためほとんどのサイトで設定しています。 基本設定まずはHTML5で利用する場合の基本のソースコードを記述しておきます。 <head prefix="og: http://ogp.me/ns#"> <!-- 共通設定 --> <meta p
2020年以降のIE11対応に関する意見 ～ Internet Explorerを終わらせるのは、誰か？
HOMEポエム2020年以降のIE11対応に関する意見 ～ Internet Explorerを終わらせるのは、誰か？ あと1年足らずで2020年になりますね。東京オリンピック？2020年問題？まあ世間でも節目だのなんだの言われておりますけれども。んなこたぁーどうでもいいんです（※真面目な話をすると需給に影響があるので実際はどうでもよくはない）。我々にとって重要なことは、2020年1月14日でWindows 7のサポートが切れるということ。え？だから何だって？いよいよ要らないIE11を窓から投げ捨てるチャンスってことです。 ※本記事は読み物系の内容なので、いつもよりは（ウェブ関係者寄りの）万人向けに書いていますが「Internet Explorer」と「Yahoo!」の違いが分かる程度の知識レベルは要求する内容となっておりますのでご理解のほどよろしくお願いいたします。あとめっちゃ長いんで超
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
【CSS】レスポンシブ対応の方法や作り方を徹底解説【メリット＆デメリット】
レスポンシブ対応は難しい、と学習を始めたばかりの人は思いませんか。 そして、意外なところでレイアウトが崩れ、その修正に時間がかかりすぎるという問題に直面した人もいませんか？ 確かに難しい、でも、制作回数を増やすことで慣れていくしかありません。様々なデバイスに対応できるレスポンシブ対応は今や一つの大きなテーマです。 サイト制作を売りにしたり、Webデザインに携わる者にとって、必ずマスターが求められます。 時間がかかるなあともうかもしれませんが、手を動かし、その都度間違いを克服していく経験の積み重ねが大切です。 安心してください。この記事では少しでも時間が短縮できるように、レスポンシブの方法だけでなく、陥りがちな誤りなども説明していきます。一通り読んでいただければレスポンシブ対応のイメージがついていることでしょう。この記事は、初学者向けに書いていますので、すでに実務でレスポンシブ対応のサイトを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
