Lab.のWebに詳しくないWeb担当者のためのブログWebに詳しくないWeb担当者のためのブログ当サイト(getting-better.jp)では、ユーザーの利便性向上・サイト運用のための分析・マーケティング活動等のためにCookie(クッキー)を使用しています。利用目的に同意いただける場合、「同意」ボタンを押してください。ご同意頂けない場合は「拒否」ボタンを押してください。「拒否」を選択された場合、「拒否」の選択を記録するCookieは保存しますが、Googleに対しては一切データを送信せず、関連するCookieも削除します。SEOWebに関わる人であれば知らない人はいないであろう「HTML」。Webの仕組みの根幹となっている技術の一つです。「今さら?」という感じのテーマですが、掘り下げてみると奥が深いHTMLの世界。Webサイトやページの実制作に携わることはない方でも知っておきたい知識についてまとめました。ランゲージ)」の略称です。「マークアップ言語」の代表格で、他にはXML(ExtensibleMarkupLanguage)などが広く使われています。ところで「Language=言語」というとプログラム言語を思い浮かべますが、HTMLはPHPやPerlといったプログラム言語とは異なり、プログラムそのものを作成することはできません。Webページの作成に使われることもあってレイアウトやデザインをするための言語と思われている方もいますが、これも誤解でHTMLはデザインやレイアウトに関する情報を持っていません。(この役割を担うのがCSS=カスケーディングスタイルシートです。なるのですが、作業としては「所定の<タグ>を使ってテキストに意味や情報を付与していく=印をつけていく」行為として捉えることができます。今でこそ検索エンジンの解析能力も格段に向上していますが、基本的にコンピューターは人間が書いたテキストを正確に理解することができません。同様にレイアウトやデザイン(フォントの形や大きさ・色など)の情報について違いを認識することはできますが、その意味や重要度合いを判別するには「タイトルはフォントサイズが大きい」といった人間が無意識的に認識している情報が別に必要です。コンピューターがテキストの内容を理解できるよう情報や意味を付与するため必要があるのです。HTMLはコンピューターが内容を理解し適切な処理を行えるよう、タグの意味や入れ子関係といった書式や文法が細かく定められています。した背景からHTMLファイルのことを「HTML文書」と呼ぶこともあります。(PHPなどのプログラムが出力するHTMLも含まれます。)HTMLが書式や文法に基づいた「文書」であるというのは重要なポイントです。マークアップは「文書」を作成する行為でもあるのです。タグは和訳とセットで覚える理屈っぽい話はここまでにして、タグによって与えられている意味や情報がどのようなものか、その中身を見ていきましょう。タグの多くは英単語(の頭文字)からとったもので、その単語の和訳とセットで覚えるのが理解への近道です。blockquote:引用table:表いかがでしょうか?例えばタイトルや見出しに相当するテキストは<h1〜h6>のいずれか、通常のテキストであれば<p>、箇条書きなら<li>タグでマークアップすべきということになります。Reference:ハイパーテキストリファレンス※)」という属性にリンク先のURLを記載することで「ハイパーリンク」が機能するようになります。href="(リンク先のURL)">参照先(href)に碇(Anchor)をかけることでWebページ同士がつながる=ハイパーリンクとは少々想像力が必要ですが、ともあれタグはそれぞれ意味や情報があり、タグに従ってコンピューターが処理を行うという仕組みは抑えておきたいところです。Reference:ハイパーメディアリファレンス」など諸説あります。メタ情報を侮るべからずもう一つ、HTMLを理解する上で欠かせないのが「メタ情報」です。※本稿では「meta」タグだけではなく、「head」タグ内に記載される情報をメタ情報として取り扱います。メタ情報とはブラウザなどに表示はされないけれど、検索エンジンやブラウザなどに伝える必要がある情報の総称です。「キーワード」や「ディスクリプション」などはSEO対策で必須の情報としてお馴染みですが、他にもさまざまな情報が付与されています。RSSなど)アクセスログなどの計測タグ(多くはJavaScript)こうした情報は目に見えないところで検索エンジンやブラウザが文書を適切に処理する手助けをしています。文字コードが正しく記載されていないと文字化けの原因となります。文書のタイトルを意味付けるタイトルタグはSEO対策の有無に関わらず欠かせない要素です。OGPは主にFacebookで使われるタグで、こちらもタイトルやディスクリプション、運営者などの情報を付与することができます。タイトルタグやディスクリプション、OGP(の一部)は検索結果ページを始めサイト内外で広く流用される情報です。ページに表示されないからといって疎かにしていると検索結果ページやSNSからの流入を「取り逃がす」要因ともなります。ヒューマンリーダブル×マシンリーダブルこのように主にコンピューターに向けた情報を付与するHTMLですが、最終的には「人間」が見るものということを忘れるわけにはいきません。Optimization:検索エンジン最適化)」となるのですが、過剰にSEOを施してしまうと「検索結果ページで見つけてもらう」ことに注力するあまり(人間が読むための)文法や文脈を無視した構成になりがちです。結果として人間にとって読みにくい、あるいは意味のないテキストになってしまうのはご想像のとおりです。見た目やインパクトを重視するあまり画像やスクリプトを多用したコンテンツも数多くありますが、画像やスクリプトで構成されたHTMLはコンピューターにとっても内容の把握が難しく、SEO対策としても不利に働きます。(SEO業者が「できる限り画像化せずテキストで!」と口を酸っぱくして指摘するのはこのためです。)コンピューターが解読できる情報を「マシンリーダブル」、人間にとって読みやすい情報のことを「ヒューマンリーダブル」と呼びます。マシンリーダブルとヒューマンリーダブルの両立こそ、理想的なHTMLの姿なのだと思います。ツールって、どんな役に立つの?に答えてみます7年ぶりに改訂されたGoogleのSEOガイドラインについてざっくりと解説カテゴリ「Web知識一般」の関連記事2015年企業のWebサイト関連施策局所的トレンド(当社の場合)2019年Webのトレンド〜企業のWeb担当者はアンドロイドと電気羊の夢を見るか?今さら聞けない?ドメインにまつわるエトセトラ(前編)プロジェクトマネジメントの肝~ペペロンチーノに学ぶPERTチャートの使い方~前後の記事クラウド型WAFとセキュリティ対策ついて、ざっくりと整理してみました。デザインフェーズで浮かび上がる「デザイン以外」の問題点についておすすめ記事OODAループでWeb担当者の業務改善のすすめ(キャンプ篇)予算の話。Betterとは企業の忙しいWeb担当者の方のために、コーポレートサイトやオウンドメディアの運営に欠かせない情報やトレンド・ノウハウを解説するブログです。日々のサイト運営のご参考になれば幸いです。Lab.」となりました。