個人的に驚いたmetaタグの機能について

スタッフブログ

皆さん、おはようございますこんにちはそしてこんばんは!
ソフトウェアエンジニアなりたての谷口です。

最近大分この生活にも慣れてきて、自由時間はゲームに励み、仕事の時はコンピューターの奥深い所を教えてもらいながら応用情報技術者試験やHTMLなどを勉強しています。

さて今回は、HTMLを勉強した際に出てきたmetaタグの個人的に驚いた点について、記事にしていきたいと思います。個人的に驚いた点についてだけなので、metaタグを全て紹介するというわけではないですし、難しい言葉はあまり使えないので、簡単な記事になってしまうと思いますが、ゆーるく見ていただけたらいいなあと思います。

HTMLとは

まずmetaタグを説明するためには、HTML(HyperText Markup Language)について知っておかなければなりません。

知らない方のために簡単に説明すると、Webページを作る時に用いるマークアップ言語(Webページの簡単な見た目や文章構造などを記述するための形式言語)、といったところです。

詳しくはMDNを参考にして下さい。
また、それでも分かりにくい!という方がいらっしゃれば、個人的に分かりやすかったこちらのサイトをお勧めします。

metaタグとは

HTMLのタグの一つで、HTMLに関する情報(Webページの作成者やWebページに使う文字コードなど)を記述するときに使われるタグです。

metaタグはHTMLのheadと呼ばれるWebページには表示されない部分に記述します。

それではほんの一部ですが、metaタグについて紹介するので、実際に見てみましょう。

keywords

そのWebページがどういったキーワードに関連しているかどうかを、検索エンジンのクローラー(ネット上にあるWebページ・画像・動画などの情報を収集し、検索データベースに保管するプログラム)に伝えるものです。

<meta name="keywords" content="キーワード1,キーワード2"><!--content内のキーワードは3~5個程が適切-->

しかし最近では、
・わざわざkeywordsを記述しなくても、クローラーはそのWebページの重要なキーワードが判断出来るようになった。
・keywordsを悪用するWebページ制作者が増えた。
・上記のこともあり、Googleがサポートを廃止した。
以上の三点から、keywordsは使う必要はなくなっているようです。

description

Webページのページ概要を記述するために使われるものです。
下の画像の紫の四角で囲まれている部分に表示されます。

しかしdescriptionの内容より、Webページ本文の方が検索ワードに適合しやすい場合は、descriptionの内容を使うのではなく、Webページ本文中の検索ワードとその前後の文が使われることもあります。
因みに例として挙げている「株式会社こまり」のソースコードには、descriptionは記述されていません。

<meta name="description" content="ページ概要">

OGP(Open Graph Protocol)

FacebookやTwitterなどのSNSで、Webページを共有したり、URLを送信したりする時などに、そのページのタイトル・概要・URL・画像を表示させたりするものです。
Twitterで共有した場合には、下の画像のように表示されます。OGPの記述内容次第で画像を表示したり、TwitterIDを表示したりすることも可能です。

<meta property="og:title" content="ページタイトル">

<meta property="og:description" content="ページ概要">

<meta property="og:url" content="ページのURL">

<meta property="og:image" content="画像のURL">

<meta property="og:type" content="ページのタイプ(種類)"><!--ページのタイプは、「website」「blog」「article」「profile」から選択-->

Twitterに共有する際に追加出来るもの。
(多いため二つのみピックアップ)

<meta name="twitter:site" content="Twitter ID">

<meta name="twitter:card" content="カードの種類"><!--「summary」「summary_large_image」「photo」「gallery」「app」から選択

終わりに...

私は最初、HTMLはWebページの簡単な見た目や文章構造などを記述するためのものだと思っており、それしか出来ないと思っていました。そのため、metaタグの欄で説明したようなWebページ外のことを記述出来るということを知らず、とても驚きました。私が紹介したmetaタグはほんの一部で、更に多くの内容を記述することが出来ます。私が紹介した以外のmetaタグには、私的にはとても高度だなと思うものもありました。JavaScriptなどで微調整はしなければならないようですが、意外と高度なものもHTMLでも出来ると知り、本当に凄いなと思いました。(語彙力)

以上で今回は終わりです。
理解するのが遅いため勉強の進み具合は遅いですが、これからも色々なことに手を出しながら勉強しようと思っています。