表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


ファビコンの表示やOGP対策に今までJUGEMブログで設定していたこと

ファビコンを表示させる設定
<link rel="icon" href="URL/***.gif" type="image/gif">
<link rel="shortcut icon" href="URL/***.ico">
  • 上記のどちらかを<head>〜</head>内に記述してファビコンを表示させていた。

Facebookへの連携投稿やいいねに対応するための設定
<meta property="og:type" content="article" />
<meta property="og:title" content="{site_title}" />
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/180" />
{og_image}
<meta property="og:url" content="{mobile_url}" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:description" content="ブログやるならJUGEM" />
  • OGPの設定方法を調べてこのブログに設置していた例。

JUGEMからの告知は今のところ見当たりませんが、最近のJUGEMブログでの<head>〜</head>内に自動で出力される記述


出力されるHTML:メインページ[http://jugemtemplate.jugem.jp/]
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="My First JUGEM Template!" />
<meta property="og:title" content="My First JUGEM Template!" />
<meta property="og:description" content="ブログやるならJUGEM" />
<meta property="og:url" content="http://jugemtemplate.jugem.jp/" />

<link rel="canonical" href="http://jugemtemplate.jugem.jp/" />
<link rel="shortcut icon" href="http://imaging.jugem.jp/portal/img/favicon.ico" />
<link rel="apple-touch-icon" href="http://imaging.jugem.jp/portal/img/apple-touch-icon.png" />

<link rel="next" href="http://jugemtemplate.jugem.jp/?page=1" />

</head>
出力されるHTML:個別記事ページ[http://jugemtemplate.jugem.jp/?eid=118]
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="My First JUGEM Template!" />
<meta property="og:title" content="このテンプレートで使用しているカレンダーについて | My First JUGEM Template!" />
<meta property="og:description" content="このテンプレートで使用しているカレンダーについてQ. カレンダーの遷移リンク | JUGEM ユーザー助け合い掲示板https://secure.jugem.jp/support/bbs/alldis.php?id=3050上記のユーザー助" />
<meta property="og:url" content="http://jugemtemplate.jugem.jp/?eid=118" />

<link rel="canonical" href="http://jugemtemplate.jugem.jp/?eid=118" />
<link rel="shortcut icon" href="http://imaging.jugem.jp/portal/img/favicon.ico" />
<link rel="apple-touch-icon" href="http://imaging.jugem.jp/portal/img/apple-touch-icon.png" />

</head>
  • 自動でOGP対応の記述が<head>〜</head>内に追記されるようです。
上記の自動的に出力される記述の中にファビコンの設定を指定する記述が含まれています。
<link rel="shortcut icon" href="http://imaging.jugem.jp/portal/img/favicon.ico" />

自動で<head>〜</head>内の下部(</head>のすぐ上)に追記されるのでHTMLにてファビコンを設定しても、こちらのファビコンが最終的に読み込まれてしまいます。


このブログで見なおした<head>〜</head>内の記述


自動でOGP対応の記述がされるようなので独自タグ:{og_image}を設置すれば記事内に画像がある場合はその画像情報も記述されます。

独自タグ:{og_image}の設置例
<head>

…中略…

<!-- OGP -->
{og_image}
<!-- /OGP -->

</head>
出力されるHTML:記事内に画像のある個別記事ページ[http://jugemtemplate.jugem.jp/?eid=109]
<!-- OGP -->
<meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120611_2384740.jpg" />
<meta property="og:image" content="http://imaging.jugem.jp/template/img/jugem_ogicon.jpg" />
<!-- /OGP -->

<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="My First JUGEM Template!" />
<meta property="og:title" content="今日から三連休 | My First JUGEM Template!" />
<meta property="og:description" content="あじさい海の日が制定された時(1995年 - 平成7年)は7月20日でしたがハッピーマンデー制度(2003年 - 平成15年)で7月の第三月曜日になったので今週末は三連休ですがどうやら不安定な天候なのでこの三連休はどうなることやら…久々の三" />
<meta property="og:url" content="http://jugemtemplate.jugem.jp/?eid=109" />

<link rel="canonical" href="http://jugemtemplate.jugem.jp/?eid=109" />
<link rel="shortcut icon" href="http://imaging.jugem.jp/portal/img/favicon.ico" />
<link rel="apple-touch-icon" href="http://imaging.jugem.jp/portal/img/apple-touch-icon.png" />

</head>
記事内に画像のあるの記述
<meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120611_2384740.jpg" />
記事内に画像がない場合の記述
<meta property="og:image" content="http://imaging.jugem.jp/template/img/jugem_ogicon.jpg" />

記事内に画像がない場合はこの画像[jugem_ogicon.jpg]が表示されます。

JUGEMでブログを書いています的な画像です。サイズは180px×180px。

この画像にオリジナルの画像も含めたい場合はその画像を指定すれば表示することが可能です。今回は「ブログ設定」→「ユーザー設定」→「プロフィール画像」を使用してみることにしました。

プロフィール画像

http://i.jugem.jp/user/jugemtemplate/180
プロフィール画像を指定する
<!-- OGP -->
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/180" />
{og_image}
<!-- /OGP -->
プロフィール画像を指定後:記事内に画像のある個別記事ページ[http://jugemtemplate.jugem.jp/?eid=109]
<!-- OGP -->
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/180" />
<meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120611_2384740.jpg" />
<meta property="og:image" content="http://imaging.jugem.jp/template/img/jugem_ogicon.jpg" />
<!-- /OGP -->

これで記事内に画像がない場合でもプロフィール画像(オリジナル)を選択できるようになります。


ファビコン(オリジナル)の設定はどうすればいいの?


<head>〜</head>内にファビコンの指定が自動的に記述されています。
<link rel="shortcut icon" href="http://imaging.jugem.jp/portal/img/favicon.ico" />

他のブログ記事にも書きましたがこちらのブログ記事が参考になりました。

faviconを動的にスマートに変える - 素人がプログラミングを勉強していたブログ

この記事に書かれているJavascriptを使用してファビコン(オリジナル)に置き換えてみます。

下記をHTMLの</body>の真上に追記
<script>
function replaceFavicon(url){
var fav=document.evaluate('//head/link[@rel="shortcut icon"]',document,null,9,null).singleNodeValue||document.getElementsByTagName('head')[0].appendChild(document.createElement('link'));
var newFav=document.createElement('link');
newFav.rel='shortcut icon'; newFav.href=url; fav.parentNode.replaceChild(newFav,fav); }
replaceFavicon('ファビコンのURL');
</script>

プロフィール画像:16px×16px

http://i.jugem.jp/user/jugemtemplate/16

この画像をファビコンのURLに指定しました。

ファビコンURLの指定
replaceFavicon('http://i.jugem.jp/user/jugemtemplate/16');

注記:「ブログ設定」→「ユーザー設定」→「プロフィール画像」を指定しても反映されるまで時間がかかる場合がありました。


スポンサーサイト


コメント
管理者の承認待ちコメントです。
  • -
  • 2015/04/05 6:03 PM
管理者の承認待ちコメントです。
  • -
  • 2015/04/21 8:35 PM
管理者の承認待ちコメントです。
  • -
  • 2015/04/21 8:43 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/11 4:08 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:42 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:42 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:42 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:43 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:44 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:44 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:45 PM
管理者の承認待ちコメントです。
  • -
  • 2015/05/14 5:46 PM
管理者の承認待ちコメントです。
  • -
  • 2015/08/26 5:03 PM
管理者の承認待ちコメントです。
  • -
  • 2016/04/09 12:03 PM
管理者の承認待ちコメントです。
  • -
  • 2016/06/23 6:49 PM
管理者の承認待ちコメントです。
  • -
  • 2016/07/20 12:11 PM
管理者の承認待ちコメントです。
  • -
  • 2016/07/20 4:19 PM
管理者の承認待ちコメントです。
  • -
  • 2016/09/02 4:21 PM
管理者の承認待ちコメントです。
  • -
  • 2016/09/09 5:39 PM
管理者の承認待ちコメントです。
  • -
  • 2016/11/01 12:15 AM
管理者の承認待ちコメントです。
  • -
  • 2016/11/04 11:43 PM
管理者の承認待ちコメントです。
  • -
  • 2016/11/04 11:48 PM
管理者の承認待ちコメントです。
  • -
  • 2016/11/17 12:21 PM
管理者の承認待ちコメントです。
  • -
  • 2016/12/12 12:51 PM
管理者の承認待ちコメントです。
  • -
  • 2017/03/10 6:36 PM
buytowe専売店

スーパーコピー時計の激安老舗.
最高級のスーパー コピー時計レプリカ時計を激安価格でお 届け!
★N品質シリアル付きも有り 付属品完備!
全品全国送料無料。
客を歓迎して買います!

IWCスーパーコピー:http://www.buytowe.com/brand-IWC/
ミュウミュウスーパーコピー:http://www.buytowe.com/brand-MiuMiu/
フランクミュラースーパーコピー:http://www.buytowe.com/brand-Franckmuller/
ボッテガ・ヴェネタスーパーコピー:http://www.buytowe.com/brand-Bottegaveneta/
  • buytowe専売店
  • 2017/04/11 11:02 AM
コメントする








   
この記事のトラックバックURL
トラックバック
ファビコンの表示やOGP対策に今までJUGEMブログで設定していたこと | My First JUGEM Template! http://jugemtemplate.jugem.jp/?eid=119
  • お気楽に行こう (^。^)y-.。o○
  • 2013/05/15 10:50 AM
気にはなってたんです。『J』のアレ。アレですよー! そうそう、ブラウザーの端っこんトコに出現する ←こいつです。フェイバリット・アイコン、略してファビコン。思い立ったが機知、いや、既知、あいや吉日。くどーい! 早速何とかしませう!! 参照:Favicon
  • [Bad Tongue Q]
  • 2014/08/18 12:09 AM