» 2015年05月

今回は、Googleウェブマスターツールのその他のリソースにある「メールマークアップテスター」の機能について説明します。

機能手順としては、検証したいメールのHTMLソースを下記の赤く囲んだ部分に、貼り付け、「検証」ボタンを押し、構造化データコンテンツ（文字の意味情報）を確認することができます。

前回「にゃんだろう君と学ぼう！～Googleウェブマスターツール「構造化データマークアップ支援ツール」でも出てきた、HTMLについてお話します。

HTMLとは、ウェブページを記述するためのマークアップ言語のこと。

マークアップ言語とは、文章の一部を「タグ」と呼ばれる特別な文字列で囲み、文章の構造（画像の大きさ、見出し）や、修飾情報（文字の色、サイズ）を、文章中に手作業で記述していく記述言語のことをいいます。

みなさんは、上記の画面のような、文字だらけの画面を一度は見たことがあると思います。

HTMLのようなマークアップ言語を使用して書かれた文章は、テキストファイル（文字だけのファイル）になるため、テキストエディタ（テキストファイルを編集するためのもの）を使って人間が、ホームページ画面などがデザインではなく、文字として読むことが可能となり、編集もできるようになります。

最近では、ホームページを作るとき、文章をそのまま貼り付けたり、画像や動画などを貼るだけで完成してしまうソフトや、無料ホームページ作成サイトがあります。しかし、これも細部を除くと、テキストファイルが存在し、マークアップ言語がひしめき合っているのです。

現在、ホームページを新しく作ろうと計画しているかたは、ただ貼り付けるだけのホームページ制作よりも、少し難しくなりますが、細部まで丁寧にこだわって作れるテキストファイルの方法をオススメします。

話をメールマークアップテスターの機能に戻しますと、メールマークアップテスターは、このマークアップ言語である「HTML」を使い、構造化データコンテンツを確認することができるのです。

メールのHTMLソースを表示する方法は、Googleではメールを開いた状態のまま、すきなところで、右クリックします。すると、下記のような画面がでてくるので、「ページのソースを表示」の項目をクリックします。

クリックすると、下記のような画面が出てきます。

このように、確認したいメールのHTMLソースを使い、このページのはじめにご紹介した機能の手順に沿って、動作をおこなってください。

HTMLソースについての詳しい詳細は、「構造化データマークアップ支援ツール」にも書かれていますので、チェックしてみてください。

【参考サイト】

https://www.google.com/webmasters/markup-tester/u/0/?hl=ja

「Googleウェブマスターツール」

http://e-words.jp/

「IT用語e-Words」

前回に引き続き、Googleウェブマスターツールのその他のリソースにある「構造化データマークアップ支援ツール」についてご紹介します。

１．構造化データマークアップとは？

まず、はじめに「マークアップ」とはなんでしょう。

　元となるテキスト文章にタグなどのマークアップ言語の構文を書き入れていき、文章の構造やレイアウト、修正などを指定すること。

ようするに、コンピュータに人間の言葉を認識できるように、文章の各要素ごとに、タグ（目印）を記入し、指定すること。

２．マークアップの機能について

前回言った「構造化データテストツール」と名前は似ていますが、ここでは構造化データ マークアップ支援ツール機能を使いサイトを更新すると、Googleまたは、他社のサービスがサイトに含まれるデータを認識できるようになります。Google がサイト上のデータを認識すると、パワーアップしたデータを表示できるようになります。

例えば・・・。

サイト上の詳細をマークアップ（指定）すると、下記の赤く囲んだ部分。通常のスニペット（サイトの詳細文章）よりも、より多くの情報を表示することができる「リッチスニペット（）」を使用することができます。

リッチスニペットでは、詳細文章だけではなく、商品画像やレビューなどが表示できるようになります。

※スニペット

※リッチスニペット

　サイトを作るだけで、リッチスペニットが表示される場合もありますが、構造化データマークアップを行うと、検索エンジンで、より多くのサイト情報を伝える事ができます。また、リッチスニペットによって、サイトの情報がひと目でわかりやすくなるので、クリック率が高まる可能性があります。

３．使用方法

１．はじめに、下記の項目から当てはまるものを選択します。

２．項目を選択し、サイトのURLを使用するか、HTMLにメールテンプレートを記入するか、どちらかの方法を行い、「タグ付けを開始」ボタンをクリックします。

※ここでは、項目「記事」を選択し、URLの方法を使用します。

３．「タグ付け開始」ボタンを押すと、URLの場合は画面が縦に２分割されたものが出てきます。

画面右側にある「マイデータ」で、データのタグ付けを行うと、左側に表示されているサイトページに反映されていきます。また、右側の画面でサイトの情報を確認することができます。

例えば、記事の名前をタグ付けしてみましょう。

タイトル部分にしたいところを、ドラックします。ドラックすると、黄色のマーカーが引かれ、ダイアログボックスが表示されます。ダイヤルボックスにある名前をクリックすると、右側の「マイデータアイテム」に反映されます。

構造化データマークアップをしたい部分をドラッグし、ダイヤルボックスで選択することで、タグ付けを行うことができます。

文章だけではなく、「画像」や「URL」の項目もマウスでクリックするか、ドラックするだけで、URLを取得することができ、誰でも簡単にタグ付けができます。

もし、タグ付けが必要ない場合は、下記の画面のマイデータアイテムにある赤く囲んだ「指定されないタグを追加」ボタンをクリックします。

すると、上記のような画面が出てくるので、手動でタグを設定しましょう。

５．HTML作成

構造化データマークアップの設定が終了したら、マイデータアイテムの上にある「HTMLを作成」ボタンをクリックします。

クリックすると、右側に下記のような画面が表示されます。ここで、マークアップが追加されたHTMLが確認できます。

このHTMLでは、Microdataを利用したマークアップになっているため、HTML5のWebページであれば、このままコピーペースト（複写）しても大丈夫です。
もし、JavaScriptオブジェクトを利用したデータの定義を利用したい場合は、下記の画面で赤線の[microdata]のボタンから[JSON-LD]へと、形式を変更してください。

すべての手順が終了したら、「ダウンロード」または「完了」ボタンをクリックし、今後の見本として使用してください。

４．マークアップの注意点

マークアップしたサンプルは最後にアクセスした時点から 1 か月間保存されます。そのため、サンプルをブックマークしておけば、構造化データ マークアップ支援ツールに戻って変更や追加を行えます。アクセスしていない期間が 1 か月を超えると、サンプルは削除されます。

５．その他の方法

URLを記入する他に、HTML形式のメールテンプレートを使用する方法もあります。

これも、URLを使用する方法と一緒です。

1. マークアップ支援ツール「HTML」項目で、メール テンプレートを貼り付けます。

2. データをタグ付けします。

3. マークアップ支援ツールのマークアップを、自分のメール テンプレートをマークアップする際のサンプルとして使用します。

4. ユーザーがマークアップしたメールを Gmail で受信すると、新しく役立つ方法でデータが Gmail に表示されます。

構造化データマークアップ支援ツールを使用し、リッチスペニットの設定をしたところで、一度「構造化データ」の機能を使って、リッチスペニットがどのように表示されているのかチェックしましょう！！

【参考サイト】

http://kojika17.com/2014/05/about-structured-data-markup.html

「KOJILA17」

https://support.google.com/webmasters/answer/3069489?topic=3070267&hl=ja&rd=1

「Googleウェブマスターツール　ヘルプ　構造化データマークアップ支援ツール」