ブログカードを支える技術 - Qiita
ブログカードとは以下のようにリンクをちょっとリッチに表示してくれる機能のことです。以前はこれってどうやって実現しているんだろうと不思議に思っていました。 上記のようなブログカードは「はてなブログ」や「WordPress」等のブログサービスでよく見かけますが、基本的にこれらのブログカードはリンク先のURLを指定するだけで自動的に生成されています。本記事では上記のようなブログカードを支える技術について解説します。 (本記事は自分のブログからの転載記事です。) はじめに 本記事では、ブログカード1の表示に使われる一般的な技術の解説およびJavaScriptによる実装を行います。普段何気なく見たり使ったりしているブログカードの技術に興味がある人におすすめします。 ブログカードの要素技術 まずはブログカードを実現するための要素技術について解説します。 ブログカードの構成 ブログカードは主に「タイトル
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita
はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ
pelletkachels | blog over bedrijven en feitjes en de pelletkachel
Welkom bij Pelletkachels.nl, jouw ultieme bron voor alles wat met pelletkachels te maken heeft! Maar we zijn meer dan alleen een platform voor het bespreken van warmtebronnen. Bij Pelletkachels.nl geloven we dat het delen van kennis en ervaringen over bedrijven en gebeurtenissen ook essentieel is voor het creëren van een betrokken en geïnformeerde gemeenschap. In dit blog duiken we dieper in de we
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！ - Qiita
SEO好きですか？私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは１日で終わらせてもっと生産的な仕事に集中しましょう！ まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト（日本語）より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の４０字は大事。" name="description"> <meta content='キーワ
プラグイン無しで WordPress に OGP & Twitter Cards を設定する方法 - Webrawl
サイト作りに OGP 設定がほぼ必須になってきたので、通常の OGP & Twitter Cards の設定に加え WordPress 用の記述 (わりと適当) をまとめておきます。参考までにどうぞ。 1. function.php に説明文を取得する記述をするWordPress の場合、記事ごとに説明文やサムネイルを変える必要があるので functions.php に記述をしておきます。以下は本文の一部を抜粋して改行をなくした状態で表示するための設定です。サムネイルの設定はおそらく既にしていると思うので今回は省略。 // TEXT LENGTH SETTINGS function textexcerpt($length) { global $post; $content = mb_substr(strip_tags( $post -> post_content), 0, $length)
SEO基礎 ソーシャルメディアでシェアされたとき思い通りの表示をさせる OGP (Open Graph Protocol) のおさらい | Stronghold Archive
SEO基礎 ソーシャルメディアでシェアされたとき思い通りの表示をさせる OGP (Open Graph Protocol) のおさらい こんにちは Honma です。今回の Tips は最近では常識となった OGP (Open Graph Protocol) のおさらいです。 OGP とはOpen Graph Protocol の略で、各種ソーシャルメディアにシェアされた際のタイトルや説明、サムネイルなどをあらかじめ指定しておけるプロトコルです。 head 内に metaタグを打つだけで実装できるので、面倒くさがらず設定しておくといいかと思います。 OGP 基本項目 <meta property=”og:title” content=”現在のページ名” /> <meta property=”og:type” content=”オブジェクトのタイプ” /> <meta property=”o
OGP設定不要！Facebookのshareが便利
twitter facebook hatena google pocket Facebookからshareボタンがなくなって、share自体もできなくなったかと勘違いしていましたが、下記のような設定で対応可のなようでした。 備忘録がてらエントリーにしておきます。 sponsors #1 リンクでShare 気軽にできるタイプのShareで、下記のような表示となるものです。 いたって簡単です。 <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.skuare.net/" target="_blank">シャア</a> ということでu=のあとに対象のURLを記載すればOKです。 この場合は開くウィンドウのサイズなどを指定してあげたほうが良いかもしれません。 Facebook上では以下のように見えます。 ※この手法はO
OGPを超簡単にパース可能なPHPスクリプト OpenGraph.php
OGPを超簡単にパース可能な OpenGraph.php Open Graph protocolを超簡単にパースするスクリプトを見つけましたのでご紹介します。 その前にOGP(The Open Graph protocol)とは何ですか？ 割と最近までOGPの存在すら知らなかったのですが、FacebookなんかであるURLをシェアしたり、タイムラインの中にURLを書き込んだりすると それがOGPですね。 FacebookOGPの書き方 タイムラインなど、URLがシェアされたとき ここぞ、と言うところの画像やテキストを指定します。 ヘッダー内に書くのが基本ですね。 これはある日あるときの私のTweetpicのOGP情報です。 こんな風に、metaタグとして、ヘッダーに書いてあげまず。 <meta property="og:title" content="A photo from @chihi
コピペでOK！2秒でTumblrにOGPを設置する方法 – @attrip
最近Tumblrでブログをやる人も増えて来ていますね。 そうなると、普通のブログのように、Facebookいいね！や+1ボタンとか設置したくなるよね？ しかし、ソーシャルボタンを付けただけでは、サムネイル画像や記事のタイトル、ブログタイトルが出ない！ 本当は↓こうなったらいいよね。 そのためにはOGP（オープングラフプロトコル）コードをTumblrのテーマのhtmlソースに追加しなければならないよ。 といっても、下のコードをコピペで貼り付ければ良いだけなので、かんたんOK！ ※FacebookIDを入れないとうまく動きません。Facebook IDの調べ方は facebookにログインした状態で下のリンク先をクリック。 {block:Posts}{block:Photo}{/block:Photo}{/block:Posts} {/block:PermalinkPagination} {b
FacebookのOGPをチェックする方法
すでにご存知の方も多いと思いますが、FacebookのOGP（Open Graph Protocol）がウェブサイトのページ上に適正に設定されていることをチェックする方法を紹介します。 １．OGP（Open Graph Protocol）とは OGPとは、ソーシャルグラフ内で任意のウェブページを表現するための情報を提供する技術で、次のようなmeta要素を指します。 <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia
Facebook OGPの「og:locale」について
Facebook OGP（Open Graph Protocol）をブログやウェブサイトに設定されている方は多いと思いますが、2011年の後半に「og:locale」というパラメータが途中で追加されています。すでに修正されている方も多いと思いますが、本エントリーで紹介しておきます。 １．「og:locale」とは Facebookのオープングラフ（Open Graph）のアクション／オブジェクトは多言語対応しており、サポートしているロケールを「og:locale」に定義することで適切な翻訳が行えるようです（説明が大雑把過ぎるかもしれませんが）。 本エントリーでお伝えしたいのはこの部分で、日本語しかサポートしていない場合は次のように「ja_JP」を設定したmeta要素を追加すると良いでしょう。 <meta property="og:locale" content="ja_JP" /> 複数の
企業サイトで最低限入れておきたいソーシャルに対応する為のwordpressプラグイン | さぶみっと！JAPAN
２０１２年 企業サイトもFacebookに対応する事でより多くの人にシェアしてもらいと思いませんか？スマートフォンユーザが増え、ソーシャルでシェアされる事で沢山の人に見てもらえるチャンスがあります。 このサイトは、沢山の人に見てもらえるようにするためwordpressでリニューアルしました。 wordpressには、豊富なプラグインという拡張機能があります。 そこで企業のサイトとして最低限入れておきたいwordpressプラグインの紹介です。 最低限この二つを入れておけば、現状のソーシャルには対応できます。 一つ目は、 WP Social Bookmarking Light http://wordpress.org/extend/plugins/wp-social-bookmarking-light/ このプラグインは、あなたのwordpressで構築したサイトにソーシャルボタンを簡単につ
facebookいいねボタンをWordPressに追加する時に参考にする情報色々 - Shinichi Nishikawa's
WordPressにいいねボタンを設置するときに考えたことメモ。そして、今後また設置する機械も増えるのでメモ。 オープングラフプロトコル Facebookのいいねボタン生成ページで作ったものを埋め込んだだけじゃ、足りない。 以下をやると誰かがいいね押したら、その人の友だちのフィードに流れるようになる。 htmlタグにxmlns:og="http://ogp.me/ns#"を追加して、下記コードをheadに入れる <meta property="og:site_name" content="サイトの名前" /> <meta property="og:url" content="該当URL" /> <meta property="og:title" content="title要素" /> <meta property="og:image" content="フィードに表示されるべき画像URL
TumblrにOGP設定してみた | Creazy!
【2011/06/21：追記】 あまりにも適当に書きすぎて分かりにくかったのでサンプルコードの中で差し替えが必要な部分について説明加筆しました。 メインブログのMTにOGP設定をしたのが良いキッカケになったので、クリッピング兼ネタポストとして使っている Tumblr にもOGP設定してみました。Tumblrのテンプレートをいじる場合、独自のタグになりますのでカスタムHTMLテーマのリファレンスを参考にすると良いと思います。 で、早速ボクのTumblrに設定したOGPタグです。 {block:PermalinkPagination}<!-- Permalink --> <!-- OGP --> <meta property="og:title" content="{block:Description}{MetaDescription}{/block:Description}" /> <met
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/fukumotoy/items/917272f8428908637d3c
IDEA * IDEA
OGPジェネレータこれいいね。自分が表示したいOGPソースを視覚的に作れる。 | A!@attrip
Code1616.net
gadget-or-gimmick.com