2012年6月アーカイブ

以前ご紹介しましたリッチスニペットですが、レシピのスニペットを別サイトに設定していましたが、ようやく画像など反映され表示されるようになりました。 表示されるまでにだいたい2週間くらいでした。 6月19日にmicrodataのdata-voacabularyのコードで設定して、6月30日の時点で表示されているのが確認できました。

イベントのリッチスニペットらしきものも一部表示されています。

 

ちなみに抹茶の点て方レシピで検索するとおそらく1ページ目に表示されているかと思います。以前から著者情報の顔写真が小さいのでどういう表示になるかと思っていましたが、レシピで指定した画像が大きく表示され、著者の顔写真は小さ目に表示されています。

リッチスニペットレシピの検索結果

上記の検索で表示されるページはこちらです。 ※検索キーワードの良し悪しはとりあえず無視しておいてください。

 

上記画面が実際に抹茶の点て方レシピで検索した際の検索結果です。赤枠の部分がリッチスニペットを設定することにより、追加で表示されている部分です。 13分というのは合計の調理時間です。 やはり写真がでてくるのは見た目的に大きいですね。 著者情報が小さくなったのは残念でもありますが。

 

料理をレシピで検索した時にcookpadや味の素など大手のサイトは設定してあるため、検索結果に画像つきで表示されていたのを確認された方もいるかもしれません。例) カレーピラフで検索

 

他のサイトでみていますと約1ヶ月くらいかかると記載がありましたが、ちょっと早くなったような感じですね。

食品関連を取り扱っていて、レシピなどが紹介できるようであれば、レシピのページを作って、リッチスニペットを設置してみるといいかもしれません。検索ででてくると画像が一緒に表示されますので、こちらも著者情報と同じで結構目立ち、クリック率はあがるような気がします。

 

今回使用したリッチスニペットのコードは前回紹介しましたschema.orgではなく、同じmicrodataという形式ではありますが、Googleが以前から推奨していたdata-vocabulary.orgというものです。若干指定する単語が変わってきますがほぼ同じように設定できます。ただし難易度はやはり高いと思います。ということで今回はご紹介のみで設定の方法は別途ご紹介しようとは思います。

 

ちょっとだけご紹介しますと、下記画面の主としては青文字部分のitempropなどの単語を指定して、これは準備時間ですよ、などの指定語をいれてあげる作業になります。

リッチスニペットのコード挿入

 

私の場合は弊社サービスの「すこぶるCMS」を利用して書いていますので、通常のブログ記事作成画面で記事を書いた後で、ソース(コード)表示にして上記のように<span itemprop=・・・>などを追記しています。

今のところ手間の割に・・・という感じでしょうか。

 

設定し終わったらリッチスニペットテストツールというサイト(Google ウェブマスターツール内)がありますのでそこにURLを入れてきちんと設定できたかを確認して終了です。

 

実際に下記がリッチスニペットテストツールでの確認画面です。 著者情報の確認方法の記事へ。

一番上がグーグル検索結果のプレビューです。 ただしこのように表示されるかは保証できませんとは書いてあります。その下が著者情報の確認結果です。

リッチスニペットテストツールでの確認

 

以下の部分がリッチスニペットで設定したレシピ情報の登録状況です。エラー表示がなければ問題なしです。

下記のように準備時間(preptime)、調理時間(cooktime)、合計時間(totaltime)、調理方法(instructions)などをitempopという単語で指定しています。

リッチスニペットテストツールでの確認

 

今後の検索の流れとしてセマンティック(意味を理解しての)検索ということに移っていくようですので、このように意味を伝えるコードを追記することにより、閲覧者によりよい検索結果を与えられますので、将来的には取り組むことも必要になってくるかもしれません。

 

難易度は高いですが、指定の仕方はまたご紹介したいと思います。

前回Twitterのツイートボタンの設置方法を説明しましたが、Twitterのウィジェットの設置についても何件か質問をいただいていますので、こちらの設定方法を今回はご紹介いたします。ブログは弊社サービス「すこぶるCMS」で使用していますMovable Type バージョン5で説明します。

facebookのウィジェット(Like Box)の設置方法の記事へ。

まずはTwitterのウィジェットを取得するサイトへ移動し、コードを取得する必要があります。

 

それでは、Twitterのウィジェットを取得するサイトを開きます。 http://twitter.com/goodies/widgets

 

サイトへアクセスすると下記画面が表示されるはずです。そこで画面左サイドの「自分のサイト」をクリックします。

Twitterウィジェット取得サイト

 

次に「プロフィールウィジェット」をクリックしてください。

Twitterウィジェットプロフィール

 

下記画面がでましたら、ユーザー名にTiwtterで使用しているIDを入力します。 画面下の「プレビューで確認」ボタンをクリックすると、画面右側にプレビューが表示されるはずです。確認ください。

また、左サイドのカスタマイズ、デザイン、サイズで背景色やサイズなどを調整できます。

※ブログへ埋め込む場合、サイズの横幅を150pxくらいにしておいてください。このサイズはテンプレートによって違ってきます。 挿入したい位置の横幅を事前に確認しておくとよいでしょう。今回のブログであれば150ピクセルくらいでOKです。

Twitterアカウントの入力

 

例えばデザインをクリックすると背景色などを変更することができます。

ウィジェットデザインのカスタマイズ

 

サイズ項目でウィジェットの横幅や高さのサイズを変更できます。 横幅を自動調整にしてもよいです。

横幅縦サイズの変更

 

次に画面下にあります「設定を終了し、コードを生成する」ボタンをクリックします。 上部赤枠の位置にコードが生成されますので、コード全てをコピーします。

ウィジェットコードの取得

 

今回ブログに設置するテンプレートは下記の種類とします。

設置位置は下図赤枠の部分に設置します。

ブログTwitterウィジェット追加位置

 

ブログ管理画面を開き、左サイドメニューの「デザイン」→「ウィジェット」→「ウィジェットテンプレートの作成」をクリックします。

ウィジェットテンプレートの作成

 

ウィジェットの編集画面が表示されたら、タイトルの入力欄に「Twitter」と入力します。※任意の文字列でわかればいいです。

本文欄にTwitterのサイトで取得したコードを貼り付けます。

最後に必ず画面下にある「保存」ボタンをクリックしてください。

ウィジェットテンプレートの作成

 

次に左サイドメニューの「デザイン」→「ウィジェット」→「3カラムのサイドバー(サブ)」をクリックします。

一番右のカラムに設置したい場合は「3カラムのサイドバー(メイン)」をクリックして、以下の作業を実施ください。

ウィジェットテンプレートの位置設定

 

ウィジェットセットの編集画面が表示されますので、右側の「利用可能」欄の中から、先ほど作成した「Twitter」をドラッグアンドドロップで左側の「インストール済み」欄に移動します。

縦の位置もドラッグアンドドロップで移動できますので、検索の上や下側など好みで変更してください。

ここでも最後に画面下の「変更を保存」ボタンをクリックし、再構築を実施してください。 

Twitterウィジェットセットの設置

 

ブログを確認すると下記のようにTwitterのウィジェットを設置できていることを確認できるはずです。

twitterウィジェット設置イメージ

 

Facebookなどのウィジェットもコードを取得した後は、同様の方法で設置することができます。

 

今回はまずTwitterの設置方法でした。 お試しください。

 

静岡の(有)アイ・リンク・コンサルタントでは、静岡・浜松・豊橋・群馬伊勢崎にてWEB勉強会「駿河友の会」を開催しています。

検索エンジン対策、画像加工方法、facebookなどwebに関する最新情報と設定方法など様々なテーマで実施しています。ご興味のある方は弊社事務局までお問合わせください。 
TEL 054-205-3320。

過去に開催した勉強会テーマは下記よりご確認できます。

平成24年度の勉強会テーマ

平成23年度のweb勉強会テーマ

平成22年度のweb勉強会テーマ

本日(6月28日)朝にGoogle+にログインしたら、Google+イベントというもののアナウンス画面が表示されました。左サイドメニューにもイベント項目が新しく追加された「New」という赤文字で新規追加されたことが明示されています。

それではと思い、早速イベントを試しに入力してみましたので、手順を簡単にキャプチャしていますので、ご確認ください。

 

下はGoogle+へログインした状態でのGoogle+イベントのお知らせ画面。

そのまま画面下の「イベントの作成」ボタンをクリックします。(赤枠では囲んでいませんが)

google+のイベント

 

次に下記の画面が表示されてきます。

ここでイベントのタイトルや開催日時、場所などのオプション詳細情報を入力していきます。

ここではまだ「招待」ボタンはクリックせずにテーマなどを変更してみましょう。

Google+2イベント設定画面

 

イベント情報入力欄の上部の画像、これも変更することができます。

画像の左下に表示されている左右の矢印か下赤枠の「テーマを変更」をクリックすると画像がいくつか表示されますのでその中からも選択できます。 用意されているのはどうもプライベートなイベントだけのようです。

ビジネスイベントは対象ではないのかもしれませんね。

イベントテーマ変更

 

テーマの選択画面でおすすめやステーショナリー、もしくはアップロードで画像をアップロードすることができます。

この際画像のサイズは横幅を915ピクセル以上の画像にしないとエラーメッセージで「915ピクセル以上の画像を用意してください」と表示されアップできませんでした。ご注意ください。

イベントテーマの変更画面

 

今回は取り急ぎ友の会の画像を915ピクセルに拡大して設置しましたので、多少ぼけてしまっていますが・・・。

これで最後に公開範囲(今回は一般公開にしてみました)を設定して、「招待」ボタンをクリックして終了です。

Google+イベントの投稿

 

イベントの設定は誰でも簡単に設定できますね。 

 

こちらが作成したイベントの画面です。

 

知り合い同志のプライベートなイベントの招待など使いやすいと思いました。 Facebookを利用している人はFacebookにあるイベントとほとんど同じなのでわかりやすいかもしれません。

ただしもしかしたら細かい部分で何か違いがあるのかもしれませんが。 あくまで個人的な推測で記載してます。

 

Google+のほかの記事(+スニペットの設定)へ、 関連するリッチスニペット設定記事はこちら

Google検索時に表示される著者情報に関する記事

 

(有)アイ・リンク・コンサルタントではIT勉強会「駿河友の会」を静岡、浜松、豊橋、群馬で開催しています。 Web関連のノウハウをテーマに勉強会を実施しています。ご興味のある方はお問い合わせください。

駿河友の会 運営事務局 TEL 054-205-3320

今後の開催日程ページ

ホームページやブログではよく写真を掲載しますが、この掲載する写真の画像ファイルの保存の仕方を簡単にご説明いたします。 この点もたまにご質問をいただきますが、PhotoshopPhotoshop elementsではホームページ用に最適化された画像ファイルにすることができます。

通常デジカメで撮影した写真ファイルは、撮影したカメラや撮影の設定値が保存されており、プロパティ画面で確認することができます。

 

デジカメから保存したファイルを右クリックしてプロパティを確認することで、確認することができます。

写真データのプロパティ確認

 

通常であれば、下記のようにいろいろな撮影時の設定値を確認することができます。 その分データ自体も多少はファイル容量が大きくなってしまいます。

ネット環境では最近は光回線の普及でだいぶ通信速度は早くなってきましたが、それでもモバイル環境で閲覧するユーザーもいるため、できるだけホームページに掲載するデータは小さくする方がよいです。 その方が閲覧者のとってももちろんよいですから。

最近では画像ファイルだけではないですが、ページの表示速度を早くすることが検索結果のランキングに影響するという報告や、離脱率やコンバージョン率に影響しているという調査もありますので、できるだけファイルを小さくする取り組みは必要かもしれません。(ページ表示速度の影響に関する参考記事

property120622.gif

 

Photoshop elementsでwebように保存する方法ですが、画像ファイルをまずホームページ用のファイルサイズに変更しておいてください。(500ピクセルくらい) 

ファイルメニューから「Web用に保存」をクリックすることでホームページに最適化した形式で保存することができます。

web用に保存

 

次に下記画面が表示されますので、赤枠でファイル形式をjpegもしくはgifに設定しOKボタンをクリックし保存します。

Jpegは1670万色を表現できる写真データ用のファイル形式です。写真であればこの形式で問題ありません。

またgifファイルはイラストなど用で256色しか表現できませんが、その際には最適化して保存できますので、色数の少ないイラストなどはこの形式にします。

web用に最適化

 

画像用に最適化されたファイルのプロパティでは下記のように、写真の設定値などのデータも削除され、ファイルサイズも小さくなっています。

 

詳細データ確認

 

ホームページ用のファイルを作成する場合にはこのように保存するようにしましょう。

 

Photoshop elementsを利用した画像加工方法に関してはほかに、サイズ縮小方法縁取り(枠を付ける)文字装飾方法画像の切り抜きなどを紹介した記事もありますので、画像加工についてはそちらもご確認ください。

 

ちなみにアドビ社の無料WEBサービスの「Photoshop express editor」で保存した場合、同じサイズに縮小しても多少サイズが大きくなっています。また撮影したカメラの情報なども一部残っていました。 多少このあたりの機能についても多少差別化されているようです。

Photoshop express editorの操作方法に関する記事

出来ることなら、有料版のPhotoshop elementsの方がいいかもしれません。

 

静岡の有限会社アイ・リンク・コンサルタントではこういった画像加工やブログシステム、検索エンジン対策などのWebをより活用するための勉強会「駿河友の会」を開催しています。

ご興味のある方はぜひお問い合わせください。

以前にご紹介しました無料のフォームサービス「フォームメーラー」ですが、今回はこのフォームメーラーで作成したお問い合わせフォームからお問い合わせを受けた際に、自動で返信メールが出るように設定する方法をご紹介いたします。

フォームメーラーサービスは無料のサービスで、標準で暗号化(SSL)も対応していますので、セキュリティ的にも安心してご利用いただけます。お問い合わせフォームやアンケートなどご利用いただけます。 無料版では5個のフォームまで作成することができ、各フォームとも7項目の入力項目を設定できます。
必要であれば有料版も用意されており、フォーム項目や広告をなくしたりといったことも可能です。

弊社のホームページサービス「すこぶるCMS」をご利用の方も、このサービスを使用しておりますので、自動返信メールを設定したい方はご参考にしてみてください。

 

このフォームメーラーの登録および初期のお問い合わせフォームの作成方法は過去の記事をご参照ください。

 

お問い合わせフォームが出来ましたら、フォームメーラーログイン画面からログインしてください。

自動返信メールを設定したいフォームをクリックします。 下記例では一番下の「お問い合わせ」というフォームをクリックしています。

 

フォームメーラー画面へアクセス

 

次に画面が下図のように切り替わりましたら、メールアドレスをクリックします。

もしメールアドレスが無い場合は左サイドのプリセットから「メールアドレス」を画面右サイドへドラッグアンドドロップで移動し、メールアドレス部分をクリックしてください。

メール設定をクリック

 

メールアドレス項目の編集画面が表示されますので、「自動返信メール」の項目で「自動返信先に設定する」にチェックをいれます。

また一番したの「確認用入力欄」も「使用する」にチェックを入れておきましょう。
※メールアドレスの入力間違いを防ぐためにもチェックを入れておくのをお勧めします。

最後に「設定を保存する」ボタンをクリックします。 ※この作業を忘れられる方が結構多いので、忘れないように。

メール設定変更

 

次に「環境設定」タブをクリックします。

環境設定画面へ移動

 

環境設定画面が表示されますので、左サイドメニューの中で「各種メール設定」をクリックしてください。

下図の赤枠部分のお問い合わせがあった際に届く送信先メールを必要であれば変更してください。 またお問い合わせのお知らせメールの差出人名やユーザーの回答内容などの設定を行ってください。通常は下記のような設定で問題ないと思います。

※ここは既に設定してあると思いますので、特に設定は必要ありません。必要であれば適宜変更ください。

各種メール設定画面へ

 

更に画面下に移動しますと、自動返信メール設定画面がありますので、一番上の「使用する」にチェックをいれます。

他、「自動返信メールの件名」、「自動返信メールの本文」、「自動返信メールの差出人アドレス」、「ユーザーの回答内容」の各項目にそれぞれ入力してください。

自動返信メールの本文などは、インターネットでショッピングした際によく自動返信メールが届いていますので、そういったものを参考にして書くとよいでしょう。

最後にここでも忘れずに「設定を保存する」ボタンをクリックして、自動返信メールの設定は終了です。

自動返信文章などを記載

 

ここまでの作業で自動返信メールの設定が終了します。

あとは「コード表示」タブへ移動してソースコードをコピーしてホームページに貼り付けたり、リンク先アドレスをお知らせすれば利用可能です。 リンク先をお知らせする方法は過去の記事をご参照ください。

※尚弊社サービスの「すこぶるCMS」をご利用の方は、コード表示画面で埋め込みコードをコピーし、すこぶるCMSの管理画面へ移動して、ブログ記事からお問い合わせなど対象のブログ記事を開きます。 埋め込みコードを貼り付ける際は必ずツールバー左上の「ソース」ボタンをクリックしてから、コードを貼り付けてください

ホームページやブログ記事など、こつこつと以前ご紹介しましたリッチスニペット情報microdataschema.org)を記載していましたが、どうもようやく検索エンジンに、インデックスされなおしたようです。 その際リッチスニペット情報らしきものが表示されるようになりました。但しその該当ページそのものではなく、現状、一覧(アーカイブ)ページのみの状況です。

レシピのリッチスニペットについては表示されるようになりました。

※理解度があまり高くないので、正確には他のサイトなども合わせてご確認ください。ご容赦ください。 但し内容は結構難しい内容になってしまいましたので、あくまで参考にどうぞ。

ちょうど下図の赤枠部分です。この部分はリッチスニペットのイベント(schema.org/event)としてstartDate(開始日時)とlocation(場所)に設定していたものがそのまま表示されています。 現状locationについてはこのページの一番下のキャプチャ画面のように各要素ごとに細かく分けて設定しなおしています。※手間の割には目立たないですね、現状は。今後はもっと目立ってくれるといいのですが。

このリッチスニペットはmicrodataという形式で記載しています。microdataのschema.org/Eventで記載してます。

検索結果にリッチスニペットらしきもの

 

表示されているホームページそのものでいうと下記赤枠部分の表示部分にコードで追記しています。弊社すこぶるCMSならば「ソース」ボタンをクリックしてプログラム表記にして追記します。

※追記はmicrodataフォーマットでschema.orgという規格のものになっています。

ホームページの画面

 

googleのリッチスニペットツールで確認した画面ですが、現状はGoogle search previewの下図のような表記(グレーの部分)になっています。

ここで著者情報も確認できます。author(著者)という部分。 ※著者情報の設定の仕方は過去の著者情報設定方法の記事をご参照ください。

リッチスニペットテストツールでの確認

 

さらに下に見ていくと、リッチスニペットとして設定してある情報を確認することができます。

検索エンジンなどのコンピュータでは文字列として単語は認識していますが、それが何を表しているのかはっきりしていないそうで、リッチスニペットにてイベント名前や会場、住所、 住所も都市名や番地等の情報、電話番号というふうにはっきりと認識させることが最近のセマンティックwebというものになります。

イベントのリッチスニペット設定確認

 

このページでは左サイドのナビに運営者としての駿河友の会、そしてその運営会社のアイ・リンク・コンサルタント、その住所、連絡先としてこの記事の作成者の私の名前と私のGoogle+プロフィールへのリンクを設定しています。

運営者のリッチスニペット情報

 

まだまだあまり理解できていないので、試しうちのような状態ですが、まあ、やってみないことにはわからないので、いろいろと試してみたいと思います。 これが正しいのかがあまりよくわかっていませんが、エラーは出ていないのでよいのでしょう。

結果として検索順位が大きく下がっても今のところ大きな影響はないですので・・・。残念ながら。

 

ちなみに上記は駿河友の会などのホームページで、下記がこのブログのリッチスニペット(microdataのschema.org)設定です。

ブログ記事の本体にはbolgpostingという指定(上から2行目のType:の項目の末尾)で、これはブログの投稿記事ですよと知らせていて、author(著者)として私の名前、そして私の名前にschema.org/Personという人を表す属性でmemberof(属する組織)というプロパティで、所属団体を指定しています。

なんだかわかりにくい表記になってしまっています。

ブログのリッチスニペット情報

 

こうしたリッチスニペットテストツールで確認できる情報に関する記事へ。

今回はソーシャルメディアのTwitterのボタンをmovable Typeのブログに設置する方法をご紹介します。ただしMovable Typeのバージョンは5です。それ以外の方は参考に適宜変更して設置ください。

追加した場合のイメージ画像は下記(赤枠部分)となります。

Twitterボタン設置イメージ

 

 

まず、おおまかな手順としては下記となります。

1、Twitterのサイトでボタンのコードを取得する。

2、Movable Typeの管理画面の「ブログ記事」テンプレートに、取得したコードを貼り付ける。

 

それではまず手順1からです。

Twitterのボタン取得サイトを開きます。 

 

Twitterボタン取得サイト

 

(1)でまずはボタンの種類を選択してください。 通常は初期の状態のままでいいと思います。

(2)で設置者のTwitterのユーザーアカウントを入力してください。

(3)で言語設定で日本語を選択します。

最後に(4)にコードが表示されていますので、このコードを全てコピーしておきます。 コピー後メモ帳などに貼り付けておいたほうが良いと思います。(途中ほかのものをコピーすると上書きされて、メモリから消える為)

 

ここまでいったら次に手順2のブログの管理画面を開きます。

 

Movable Type管理画面

 

管理画面の左サイドメニューから「デザイン」→「テンプレート」をクリックし、「ブログテンプレートの管理」を表示させます。

「アーカイブテンプレート」から「ブログ記事」をクリックします。

Twitterボタンのコード追加

 

ここで先ほどTwitterのサイトで取得したコードを貼り付けることになります。

貼り付け位置はだいたい60行から70行目あたりになります。 挿入位置を探す方法ですが、<mt:If tag="EntryBody">というコードがある場所の2行上の</div>の上に設置します。 (ちょっとここがわかりにくいところですが。)

 

コードの貼り付けが終了したら、「変更を保存」をクリックしして、「再構築」を実施してください。

 

これで下記のようにボタンが設置されていればOKです。 ずれていたりうまく表示されていない場合は挿入する行数の部分を再度確認してみてください。

 

Twitterボタン設置イメージ

 

また、今後はGoogle+の「+1」ボタンも設置しておいたほうが良いと思います。 

現在検索結果画面に著者情報が表示されGoogle+の顔写真が表示されるようになりましたが、今後よりGoogle+との連携が強まってくる印象を受けますので、ぜひ「+1」ボタンも設置しておきましょう。

5月24日頃からGoogle検索時検索結果画面に著者情報が表示されるようになりました。 この際著者のGoogle+プロフィールに登録している顔写真が表示されているので、目立つようですね。

検索結果の著者情報の表示

 

何回かこのための設定方法に関して問い合わせがありましたので、再度手順をご紹介いたします。 以前著者譲情報の導入手順の記事でご紹介はしていますが、若干細かな点で変わっていましたので、今回改めてMovable Type5への著者情報設定手順を掲載していきます。

著者情報の設定に関して、Google+のプロフィールへの登録は比較的簡単なので問題はあまりないと思いますが、今回は特にMovable Typeへの登録に関してわかりやすいように画面のキャプチャを入れて説明しています。 ※Movable Typeはバージョン5で説明しています。

 

おおまかな流れをまずはご紹介します。 Google+に登録されていない方は事前にGoogle+に登録してください。

手順1、Google+プロフィールページの「基本情報」の投稿先欄にブログもしくはホームページのURLを登録する。
  ※ここは著者として、自分で記事を書いているブログやホームページとなります。

手順2、著者として記事を書いているブログもしくはホームページの全ページに、Google+プロフィールページへのリンクを記載する。
  ※この際リンク先のアドレスに”?rel=author”という文字列を追記する。

※上記2つの手順が必要ですが、2の手順時に、ウィジェットセットを新規に作成してそこへ登録する方法を説明します。

 

それではまずGoogle+のプロフィールページを表示させ、自分のアドレスをコピーします。

google+プロフィール

 

アドレスをコピーする際、最後のpostsは必要なく、長い数字まででOKです。 このアドレスをコピーしてメモ帳などに貼り付けておきましょう。

google+アドレス

 

ここまでは事前の作業です。

 

手順1のGoogle+のプロフィールへのブログもしくはホームページアドレスの設定です。

まずはGoogle+のプロフィール画面を表示させ、基本情報を開き、青い「プロフィールを編集」をクリックし、編集画面にします。

基本設定画面

 

画面下のほうに、「投稿先」という項目がありますので、そこへカーソルを持っていき、背景色が水色のところをクリックします。
(以前はカスタムリンクの項目だけでした)

投稿先への追加

 

下記画面でカスタムリンクを追加をクリックし、名称とURLを入力し、保存ボタンをクリックし、画面を閉じます。

リンク追加

 

最後に画面上部の「編集を終了」ボタンをクリックし、Google+への設定を終了します。 ここまでが手順1です。

編集画面

 

次に手順2に進みます。

まずはブログの追加する場所ですが、今回は下記のテンプレートのサイドバー左側部分の一番上、赤枠部分に追加する説明をします。

操作方法が分かる方は、それぞれ好きな箇所(全ページ共通部分の場所)に登録してください。

ブログ画面

 

ブログの管理画面を開きます。 ※今回はMovable Typeのバージョン5への設定方法で説明します。(弊社サービスすこぶるCMSの方はこの方法で行えます。)

管理画面、左サイドメニューの「デザイン」→「ウィジェット」とクリックし、「ウィジェットテンプレートの作成」をクリックしてください。

ウィジェット追加

 

「ウィジェットを作成」画面が表示されますので、タイトル部分には「著者情報」と入力、本文欄にはHTMLコードのリンクのAタグを記載します。

下画面の緑色の部分のみ自分Google+プロフィールページのURLを入力してください。※この際末尾に”?rel=author”を必ず追記してください。

また名前の部分も各自変更ください。

例)

< a href="https://plus.google.com/106528905662808924764?rel=author">xxxx</a>

プロフィールリンク先追加

 

上記リンクを入力したら、「保存」ボタンをクリックします。

再度左サイドメニューの「デザイン」→「ウィジェット」と進み、ウィジェットセットの中の「3カラムのサイドバー(サブ)」をクリックします。

サイドバーへの追加

 

ウィジェットセットの編集画面で、右側の利用可能の欄に先ほど作成した「著者情報」というウィジェットセットがあるはずですので、ドラッグアンドドロップで左側のインストール済みの欄に移動します。 最後に「変更を保存」ボタンをクリックするのを忘れないようにしましょう。

ウィジェットセットへの追加

 

それで再構築を実施すれば、下図のように上部に追加されているはずです。

 

著者情報追加

 

どうでしょうか、うまく設定できましたか。

設定できたかを確認するにはGoogleがサービス提供しているリッチスニペットテストツールにて確認してみましょう。

このツールの使い方は著者情報確認方法の記事を参照ください。

著者情報の記事もご参考までにご確認ください。

Photoshop elementsによる画像加工、今回はカスタムシェイプという機能を利用して、写真画像をお好みの形で切り抜く方法をご説明いたします。

前回まで記事でサイズ変更文字装飾画像の縁取り(枠をつける)の方法も既に説明しておりますので、そちらの記事もご確認ください。

 

それではカスタムシェイプを利用した画像の切り抜きの説明です。

 

まずは画像加工したいファイルを開きます。

ここでホームページに掲載するために、デジカメから取り出したファイルをホームページ用のサイズに変更をしておいてください。サイズは代替500、600ピクセルというサイズです。 (弊社サービスのすこぶるCMSの場合600ピクセルです。ブログの場合は500ピクセルとなります)

画像のサイズ変更については以前ご紹介した画像縮小の記事を参照ください。

 

次に左サイトのメニューからカスタムシェイプのボタン(左下の赤枠)をクリックし、 写真の上で切り抜く大きさをマウスで操作します。

※ここでの説明では「角丸」の四角を選択し、角丸画像に切り抜く説明をします。 角丸の半径は画面上部(赤枠)部分で変更できます。

切り抜く大きさにマウスで操作をしたら下記画面のようになるはずです。

カスタムシェイプ

 

次に画面右下のレイヤーパレットで「シェイプ1」となっているレイヤーをCTRLキーを押しながらクリックします。

そうすると、下記のように切り抜く灰色の枠の部分が点線で囲まれます。選択した状態になっています。

選択範囲の作成

 

次に画面右下のレイヤーパレットの「背景」レイヤーを選択(クリック)します。「背景」レイヤーが濃くなっているはずです。

その状態で、CTRL+C をクリック、CTRL+N をクリック、 出てきた画面をOKボタンで消して、CTRL+Vをクリックします。

選択範囲の切り抜き

 

そうすると下記のように新しい画面に角丸の画像は貼り付けられているはずです。

角丸切り抜き

 

上記画像をホームページに貼り付けると下記のように角丸の写真となります。(ブログの背景色が白色の場合)

ブログの背景色が白色で無い場合は、上の手順の新しい角丸画像を貼り付けた際に、そのファイルの背景レイヤーの色を、ブログの背景色に変更して保存してください。

 

切り抜き例

 

この応用で、カスタムシェイプの形を、先ほどは角丸を選択しましたが、画面上部のシェイプの部分をクリックして、様々な形状に変更できます。

シェイプの形状を変更することにより、いろいろな形で切り抜くことができます。

カスタムシェイプ

 

切り抜きで作成した画像ファイルの保存時は「Web用に保存」をしてください。 Web用に保存に関する記事へ。

 

以下シェイプを変更して切り抜いた事例です。

 

切り抜き例

 

もみじの形で切り抜き

切り抜き例

 

猫の形で切り抜き

切り抜き例

 

以上、応用でいろいろな形状で画像を作成できますので、お試しください。

 

静岡、浜松、豊橋、群馬のWEB勉強会「駿河友の会」ではこういった勉強会を開催しています。ご興味ある方はぜひお問い合わせください。

Photoshop exress editorによる画像加工編です。 今回は画像の回転と切り抜き方法の説明です。

パソコンに詳しい方であれば、なんとなく画面を見ながら挑戦できるかと思いますが、初心者向けに、Photoshop express editorを使用した画像の回転と切り抜き方法を説明させていただきます。

 

まずは画像加工したい写真ファイルをPhotoshop express editorサイトを立ち上げてアップロードします。

アップロード後、左サイドメニューの一番上「切り抜きと回転」をクリックしてください。

画像回転

 

画像の四隅に四角い点が表示されますので、そこにカーソルをもっていき、カーソルが回転の表示になったところで、クリックしながらマウスを動かせば、回転角度を調整できます。 

また画面上部赤枠の角度補正ダイヤルを左右に動かしても角度調整が可能です。

角度補正の際、画面には格子のガイドが表示されますので、水平線にあわせたりなど、基準としたい線に合わせて正確に角度を補正することもできます。

画像の四隅をクリックし回転する

 

ここでは角度補正の次に切り抜き(トリミング)として、ヘッダー画像などで使用する横長の長方形に切り抜き(トリミング)しますので、四隅の四角いポイントにカーソルをもっていき、カーソルの↓が斜めに表示されたところでクリックしながら動かせば、切り抜く画像の形を調整できます。

画像の切り抜きの形を変更

 

うまくいかなかった場合などは、画面下の「初期化」をクリックすれば最初の画面に戻りますので、最初から操作できます。もちろんその横にある「取り消し」をクリックして一操作ずつもどすこともできます。

初期化で最初からやり直せます

 

角度補正や切り抜く形に変更したら、次にホームページ用のサイズに縮小します。左サイドメニューの「サイズ変更」をクリックし、「カスタム」をクリック後、幅を500や600などホームページ用のサイズに変更し、画面下の「完了」ボタンをクリック、次に表示される画面で保存を選択しパソコンに保存して終了です。 サイズ変更に関しては画像縮小に関する記事をご確認ください。

最後にホームページ用に画像縮小

 

特定の色をつけたり文字挿入露光調整・イラスト風に画像加工する方法もご紹介しています。

 

※Photoshop express editorで作成したファイルとPhotoshop elementsで作成した画像の比較した記事「Web用に保存に関する記事」へ。

 

駿河友の会・三遠友の会では、こういったWEB関連の勉強会を開催しています。 ご興味のある方はぜひお問い合わせください。

画像加工ソフトPhotoshop elementsを利用した画像加工方法のご説明です。

今回は文字の入力と簡単な装飾方法を説明いたします。 ホームページでやはり一番目立つのは写真ですので、その写真に文字で装飾したりすることにより、より情報を伝えやすくすることができます。 操作が不安の方は、一度手順を確認いただき、操作してみてください。

慣れてくればいろいろな応用が出来るようになってきます。

 

まずはPhotoshop elementsを起動させ、編集する画像を開きます。

画像を開いたら、ホームページで利用するため、最適なサイズ(500とか600ピクセル)に縮小します。縮小方法は以前の記事をご確認ください。

 

そしてツールバー(画面左)の文字挿入ボタン「T」をクリックし、画像の上の文字を挿入したい部分で一度クリックします。

Photoshopで文字入力

 

カーソルが点滅しますので、その状態で文字を入力してください。

文字色やサイズ、太字にするなどの変更は、画面上部の文字用のツールバーで数値を変更することができます。

Photoshop 文字入力

 

ただ文字を入力するのみであれば、これで終了です。

 

今回はこれだけでなく、文字に縁取りをしたりといった作業の手順までご説明します。 以前の写真そのものに枠をつける方法の応用です。

一度すればそれほど難しくないので、挑戦してみてください。

 

文字に縁をつけるには、画面右横の「効果」欄でまずは「ドロップシャドウ」を選択します。下の画面でドロップシャドウと表示されている横の▼をクリックしてドロップシャドウを選択してください。

ドロップシャドウの効果でどれか(下図では右端)をクリックし、適用ボタンをクリックします。

下図のようにドロップシャドウが適用されます。

(なぜかはわかりませんが、直接レイヤースタイル設定画面を呼び出すことができない為の操作です。)

 

ドロップシャドウ効果の適用

 

次に「レイヤー」→「レイヤースタイル」→「スタイル設定」をクリックします。

レイヤースタイルの設定

 

下記スタイル設定画面が表示されますので、ここで、ドロップシャドウのチェックを外します。

(ドロップシャドウの効果をつけたい場合はここで各数値を変更し見栄えをよくしてください)

文字の縁取りをするために、「境界」にチェックを入れます。

縁取りの色や太さなど、各数値を変更してください。

レイヤースタイル設定画面

 

下記のように文字に縁取りをすることができます。

 

文字装飾完成

 

画面右下のレイヤーパレットで文字レイヤーをダブルクリックすれば、縁取りの効果を残したまま、入力した文字列を変更することもできます。

レイヤーの選択

 

さらに文字色やレイヤースタイル設定画面でドロップシャドウをつけることにより下記のような文字装飾を行えます。

文字装飾で作成した画像ファイルの保存時は「Web用に保存」をしてください。 Web用に保存に関する記事へ。

文字色やドロップシャドウで装飾

 

駿河友の会ではこういった勉強会を静岡、浜松、豊橋、群馬で開催しています。

ご興味のある方は「駿河友の会」ご案内サイトからお問い合わせください。

前回の記事で紹介しましたHTML5&CSS3で実現できた機能:Webフォントを実際にサイトに適用させてみましょう。

このWebフォントについての概要は過去の記事をご参照ください。

2013年4月25日現在のGoogle Webフォントサイトでの設定方法の記事

またWebフォントを利用した事例サイトは「ちょっと一服ブログ」にも掲載しています。ご確認ください。※こちらでは日本語のWebフォントの事例も記載されています。(ただし日本語については2012年末までの試用版です)

 

それではまず、GoogleのWebフォントを提供しているサイトを開きます。(左記リンクからどうぞ)

※Googleのサービスは現状、英語のみのフォント提供です。

下記サイトが表示されます。

googleのwebフォントサービス

 

ここでは練習で一番上のフォント(字体)を設定してみたいと思います。

そのフォントの右下のあたりに「Quick use」という文字がありますので、それをクリックしてください。

Webフォントの選択

 

そうすると下記画面が表示されます。 スクロールを下に動かしていってみましょう。

Google webフォント画面

 

スクロールして画面下の方に移動していくと下記の「3, Add this code to your website」という文字(青地で白文字)の部分が確認できるはずです。

Webサイトに貼り付ける必要があるコードは下記画面の「3」と「4」の2つです。 とりあえず「3, Add this code to your website」と「4, Intefrate the fonts into your CSS」の2つのコードをコピーして、メモ帳などに貼り付けておくか、このGoogleWebフォントのページとは別で、自分のサイトの管理画面もしくはHTMLファイルなどを開いてください。(以下Movable Type5での設定方法で説明します。それ以外の方はそれぞれの環境に合わせ適宜変更箇所は変えてください)

Google Webフォントのコード取得

 

コードを管理画面から貼り付けます。

貼り付けたイメージは下図をご確認ください。 この際右上のフォーマットが「なし」になっていることを確認しておいてください。

Webフォントコード貼り付け

 

次のWebフォントを適用させる文字列のところにGoogleのWebフォントのサイトの「4, Intefrate the fonts into your CSS」のコードを貼り付けます。

なので、「4, Intefrate the fonts into your CSS」のコードをまずコピーしておきましょう。

 

Webフォントを適用させる文字列(現状は半角英数字のみにしか適用できません)にスタイルシートで記載します。

ここでは<div>というタグに設定した例でご説明します。 文字列を<div></div>で囲って記載します。 その<div>タグにスタイルシートでコピーした「4, Intefrate the fonts into your CSS」のコードを追記します。

例)

オリジナル:
<div>This is a pen.</div>

Web フォント指定のコードを追記:
<div style="font-family: 'Butterfly Kids', cursive;">This is a pen.</div>

※青文字部分はGoogleのサイトからコピーした文字列。赤文字の部分もこの通り追記してください。

下が実際に適用した文字列です。

 

This is a pen.

 

1回操作してしまえばそれほど難しくはないかと思いますが、できましたでしょうか。

いろいろとお試しください。

 

詳しいかたでわかる方は、コードの貼り付けもHMTLのlinkではなくインポートで指定したりなど、コードが3種類提供されていますので、それぞれの環境ややり方に合わせ、お試しください。

 

また日本語のフォントも無料でいくつか利用できるものがあります。「webフォント 無料 日本語」などで検索でいくつかのサイトがでてきますので、お試しください。 (いいものは有料のものが多いですね。)

 

こういった内容の勉強会も静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからどうぞ。

Webフォントを設定

| コメント(0) | トラックバック(0)

新しいWebの規格 HTML5とCSS3によって「Webフォント」という機能が利用できるようになりました。

通常ホームページではフォント(字体)を変更することは基本できず、(変えたとしても、そのフォント:字体が入っていなければ他のパソコンで見たら反映されません) 通常のゴシックか明朝体程度での利用でしかできませんでした。

今回のHTML5&CSS3によって可能になったWebフォントという機能jですが、これはパソコンに入っているフォント:字体を使用せずに、サーバー上に保存してあるフォントを都度パソコンにダウンロードして表示するようにしたものです。

これによってパソコンに入っていないフォントでも表示できるようになりました。 様々なフォントを利用できるため(もちろんライセンスなど注意すべきことはありますが)、見た目上カッコいいものや手書き風のフォントをテキスト情報のままに使用できます。このテキスト情報のまま利用できるので、今まで見出しや目立つ部分の文字は画像として作成するしかなかったのですが、その必要がなくなりました。テキスト情報(文字情報)ですので、そのまま検索エンジンにもテキスト情報として伝わりますので、その点からも良い影響があります。

イメージとしてわかりにくい場合こちらのブログを見てください。

英文筆記体の例

webフォント英文例

 

下記が実際の英語筆記体のWebフォントの例です。

Welcome to Surugatomo-no-kai Blog!
This article is test for webfont.

テキスト情報ですから、上記文字はコピーしてメモ帳などに貼り付けできます。

 

こちらは日本語フォントの例

日本語のWebフォント

 

英文の筆記体の部分も、写真の下の日本語の部分もテキスト情報ですので、そのままコピーしてメモ帳などに貼り付けることができます。

 

特に英語の場合はGoogleが無料でWebフォントを提供していますので、比較的簡単に導入することができます。日本語については今回事例のサイトでは2012年末まで無料で利用できる試用版を使っています。

ただし注意としては、英語の場合アルファベット26文字それぞれ大文字小文字と記号などで数が少ないのでファイルが軽くて、サーバからダウンロードするのに時間がかからなくていいのですが、日本語の場合は漢字が含まれることもあり、ダウンロードに時間がかかり、文字の表示に一瞬遅れがでたりすることがあります。日本語の場合はタイトルなど文字数の限られた場所での利用になるのかもしれません。

これも必要な文字のみダウンロードするような設定も可能ですが、フォントの利用にはライセンス(著作権)が関わるので、利用する際はその点確認しておく必要があります。 日本語の場合やはりいい字体は有料のものが多いですね。

 

次回GoogleのWebフォントや日本語の試用版などご紹介したいと思います。

 

2013年4月25日現在のGoogle Webフォントサイトでの設定方法の記事

 

静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時テーマを取り上げて勉強会を開催しています。今後はご要望を聞きながらこういったテーマも取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからよろしくお願いいたします。

Google+に関する情報ですが、+スニペット(プラススニペットと読むのでしょうか)と呼ばれるものがあるようです。最近知りました。

スニペットというのはご存知の方も多いと思いますが、検索結果の画面のタイトルの下の部分に表示される2-3行の説明文を言います。

下記図で赤枠部分にあたります。ここはメタタグのdescriptionの部分が表示されるようになります。(本文との整合性を見て表示されるようで、必ずしもいつもdescriptionが表示されるとは限りません)

Google検索結果の画面

 

今回の+スニペットというものですが、これはGoogle+の「+1」ボタンがホームページに設置されていることがよくありますが、このホームページ上の「+1」をクリックした際に、Google+のホーム(Facebookでいうニュースフィード)の部分に表示されます。

で、ホームページ上の「+1」ボタンをクリックした際に、下記画面のように+1したページの名称、概要、写真が表示され、コメントを追加してGoogle+上に共有することができるのですが、この+スニペットを設定すると、これら下図の赤枠の部分を指定することができます。

Googleの+スニペットヘルプページ

設定することにより、より効果的に情報を伝えていくのに利用できそうです。

設定しない場合はGoogleがページのメタタグやなければページ内の情報をもとに適当と思われるものを表示します。

 

Google+ 「+1」ボタンをクリック

群馬地区勉強会のご案内ページで「+1」ボタンをクリックした際の画面。

 

Google+上では下図のように情報が共有されていきます。

Google+で共有された画面

 

この+スニペットの設定はちょっと難しく、microdataというコード体系のコードを通常のHTMLのコードに追加して記述します。

 

実際に追加したコードの事例を下記に紹介します。(参考までに)

コードの記載例(見やすくするため一部省略してあります)

<div itemscope="" itemtype="http://schema.org/Event">
<span itemprop="name">群馬地区での第1回目の勉強会</span>
<img alt="講師:加藤忠弘の画像" itemprop="image" src="http://www.surugatomo.com/---photokato.jpg" />
<div itemprop="description">内容「思い・商品を魅力を伝える為の効果的なデザインなど視覚的な訴求方法について学びます」平成24年度第1回目は6月16日(土)13:30~</div>

※赤文字部分が通常のコードに追加した部分です。

 

これはmicrodataというコード体系を利用して記載していきます。主に使用するコードは「itemscope」「itemtype」「itemprop」の3つです。

itemscope: ここから単語の意味を定義しますというコードです。

itemtype: 定義するものは何かを示すコード。たとえば上記ではイベントですよということ。 ほかにも商品や人、場所などがあります。

※もののタイプごとに「itemtype="http://schema.org/Event"」のEventの部分を変更していきます。 商品を表す際はProductなので「itemtype="http://schema.org/Productt"」というふうにします。

itempop: 定義したタイプの内容を表す項目を示すコード。上記イベントではイベント名やイベントの概要、イベントを表す画像です。

 

※+スニペットで指定できるものは各itemtypeのname, description, imageの3つです。 上記でいえば、イベント(群馬友の会)の名称と概要、イベントを表す写真となります。今回はイベントを表す写真は講師の写真にしています。

表示させたい部分の文に上記コードを埋め込んでいけばよいのですが、ちょっとわかりにくいですね。

このコードについての解説ですが、「HTML5を使って、セマンティックなWebサイトを作ろう」のページにもう少しわかりやすく記載されています。

またschema.orgのコード体系(どういうitemtypeがあり、どういうitempropが用意されているか)についてもschema.orgの一覧ページがあります。

 

このコードがきちんと設定できているのかは、著者情報を確認するのと同様にリッチスニペットテストツールを利用して行うことができます。

リッチスニペットテストツールで確認

 

リッチスニペットテストツールでの結果画面ですが、name, description, imageがそれぞれ設定されていることが確認できます。

キャプチャ画面の上の方が著者情報が設定されているかの情報です。

 

この方法だと難しいのですが、簡単方法では、上記の指定がなければメタタグのtitleとdescriptionを引っ張ってくるようです。画像は指定ができないので、適切なものをGoogleで判断して表示するようになっています。

詳しくはGoogle+のヘルプページの+スニペットの項目を参照ください。

 

2012年6月28日現在で、Google+でイベント機能が追加になっています。Google+イベントの記事

 

静岡のアイ・リンク・コンサルタントでは隔月でWeb関連の勉強会を実施しております。開催場所は静岡、浜松、豊橋、群馬地区で開催しております。詳しくはIT勉強会「駿河友の会」ご案内サイトをご確認ください。

今回も再度アドビ社の無料の画像加工サービス「Photoshop express editor」の簡単な使い方(露光)をご紹介します。

いろいろ使ってみて思いますが、写真を簡単に加工してホームページへ掲載するという作業だけならば十分な機能をもっているサービスですね。しかも無料で利用できるのがうれしいです。

ただし回線状態が厳しいときは大変ですが・・・。

 

前回の記事でサイズ変更画像加工(色を抽出)しての保存方法などご紹介しましたが、 今回デジカメ写真を撮った際に調整することが多い項目の設(露光調整)定を見てみましょう。

 

まずは加工修正が必要な写真ファイルをアップします。 ここまでの作業は前回のサイズ変更の記事を参照ください。

 

photoshp express editorへアップ

 

まずは明るさ調整(露光補正)ですが、これは「編集」の基本メニューの中にある「露光量」の項目を設定します。

メニューの露光量をクリックすると画面上部にサンプル写真が7枚表示されます。それぞれ効果を弱く適用したものから強く適用しているものまで順に表示されていますので、カーソルを合わせてどれが一番よいのか選んでください。

ここではほかに彩度や赤目補正ができますので、色の乗りが悪いような時や、赤目になっているときは調整が可能です。

photoshpで露光調整

 

次にホワイトバランスですが、メニューの中に「ホワイトバランス」という項目があるので、これをクリックすると先ほどと同様、サンプルが上部に表示されます。 一番適当だと思う写真をクリックし効果を適用させてください。

ホワイトバランスは見た目上色合いが変わってくることになりますが、白色の基準を決める作業になります。 同じ白色でも、朝や昼、夕方、また白色蛍光灯の下と白熱電球の下では、見た目上色合いが異なります。これを補正して適切な色合いに修正するのがホワイトバランスです。

場合によってはホワイトバランスをあまりかけずに、そのままの色の方が雰囲気が出る場合もあるかもしれません。

photoshp express editorでホワイトバランス

 

そのほか、「スケッチ」などのメニューでは写真をイラストのようにのっぺりとした絵(油絵のような効果)に仕上げてくれる機能も搭載しています。

無料の割には余りある機能を搭載しています。

photoshp イラスト化

 

画面下の枠にあるツールバーで写真の一部をズームアップしたり、また適用した効果をやり直したりすることも可能です。

ズームアップで細部の効果の影響を確認しながら進めることができますね。

photoshpズームややり直し機能

 

ここまでの機能が利用できて無料とは本当に便利な世の中になりました。

画像の切り出し(トリミング)なども可能なので、ホームページ用の写真は、初級者レベルで考えれば、かなりの範囲でできてしまいます。

是非利用してみてください。

 

※Photoshop express editorで作成したファイルとPhotoshop elementsで作成した画像の比較した記事「Web用に保存に関する記事」へ。

 

静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時テーマを取り上げて勉強会を開催しています。今後はご要望を聞きながらこういったテーマも取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからよろしくお願いいたします。

今回はこのリッチスニペットの導入設定に関する説明です。

セマンティックなウェブサイトということがいわれているようです。これはパソコンやサーバなどのコンピュータは、ウェブサイトの掲載テキスト情報を認識はしますが、例えば「xxxx」が人の名前か、ものの名称なのか何かはわかっていないそうです。単語として理解しているようですが、最近ではきちんと理解しているかもしれませんが・・・。

よってコンピュータ(検索エンジンなどのサーバ)に名前や組織名、住所、イベント名などそれぞれそれが名前ですよ、組織名ですよと指定してあげることにより、意味のある単語としてコンピュータに掲載情報を伝えることができます。その方法の一つがリッチスニペットになります。 

このリッチスニペットの導入には、microdata(Schema.org)というフォーマットで記述するのですが、書式に従って記述していけばよいのですが、これが結構難しいです。 結局はタグを入力することになりますが、多少大変です。

また掲載情報の種類によっていくつかタイプが分けられています。 レビュー、人物、製品、会社と組織、レシピ、イベント、音楽が設定できます。

より詳しい情報はGoogleのヘルプページを参照ください。

決められた書式で記述することにより、設定しますが、詳しい方法は個々では割愛します。またの機会に。

※2012年6月22日現在でイベントのリッチスニペットらしきものが表示されるようになりました。

レシピのリッチスニペットも設置後2週間ほどで表示されるようになりました。

 

設定した情報が正確に認識されているかどうかは著者情報の確認でもでましたリッチスニペットテストツールのサイトで確認することができます。

リッチスニペットテストツールサイト

リッチスニペットテストツールサイト

 

赤枠の部分にアドレスを入力し、適切に設定できかたを確認することができます。

 

結果は下の図になります。

上部に「author」として著者情報が適切にGoogle+プロフィールと連携されているか確認できます。正常に私のページが認識されていますね。

次にその下の赤枠部分ですが、Itemから始まってイベントとしてサマリー(summery)や説明(description)、場所(location,name)、住所(address)、価格(price)などの情報がただ単に単語ではなく意味として情報提供できていることが確認できます。

この情報は検索結果に表示されるかもしれないようです。(現状リッチスニペットとしての情報は確実に掲載されるかはわからないようです)ただし適切に検索エンジンに、それぞれ意味として捉えられていることになりますので、今後よい結果がでてくることを期待したいですね。

リッチスニペット情報の確認

上記の画面は「ソーシャル時代のWebの戦略的活用セミナー」ページのリッチスニペット設定確認画面となります。

URLの中が文字化けしてしまっていますね・・・。

赤枠の一番上「Item」のTypeですが、このページではdata-vocabulary.orgという記載がありますが、最新ものはschema.orgという記述になっています。若干記載ルールが変わっていますが、おおよそ同じのようです。

リッチスニペットテストツールで確認した情報についての詳しい説明記事へ。

このように意味を持った単語としてコンピュータに認識してもらうこと、提供することがセマンティックな・・・ということです。

またHTML5では段落ごとなど文章のまとまりに対して意味づけをするタグ<header>や<section>、<articel>、<aside>、<nav>など、今まで<div>のみで表すのとは違い、この部分はホームページのどの部分に当てはまりますよ、という意味づけのタグが追加されています。今後はこういったコンピュータ(検索エンジン)にもよりわかりやすい記述で伝えることにより、よりよい検索結果にもなってくるのかもしれません。

HTML5のことについては、こちらの「HTML5を使ってセマンティックに・・」など比較的簡単にわかりやすく説明しているサイトもありますので、ご確認ください。

 

2012年6月28日現在で、Google+でイベント機能が追加になっています。Google+イベントの記事

 

こういった内容の勉強会も静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからよろしくお願いいたします。

運営者

リンク