Webサイト制作(マークアップ、コーディング)時のアレコレ

Webサイトにアクセスするものは、ブラウザだけではなく、検索エンジンのクローラ、SNS（リンクに概要を表示するため）、アプリ（Web view からのアクセス）、API として提供している場合は他のサーバなど、いろいろあります。

Webサイトを作る場合は、いろんなアクセス元それぞれに、適したデータを返すようにする。そうすると Google 検索や SNS で、素敵なリンクを表示してくれたりしますので、SEO やユーザビリティなど、多くのメリットが生まれます。

と言ってもアレコレ用語が多いので、それ関連のマークアップ、コーディングまわりの用語をここで整理してみたいと思います。

目次出力

構造化データ

HTML を構造化データとしてマークアップしておくと、検索エンジンにデータの意味を伝えることができます。

例えば、<p>ナカタケ</p> と書いても検索エンジンにはこれが名前なのかなんなのかわかりませんが、これを「名前である」と検索エンジンに伝えるための方法。

分かりやすかったサイト↓

OGP

Open Graph protcol の略。

これを記述しておくと、Facebook や TwitterなどのSNSでシェアされた場合、ページのタイトルやイメージ画像、詳細などを素敵な感じで表示してくれる。

head タグ内に meta タグとして、↓こんな感じで書いておく。

<meta property="og:title" content="Web関連のアレコレ" />
<meta property="og:description" content="Webサイトにアクセスするものは、ブラウザだけではなく、検索エンジンのクローラ、SNS（リンクに概要を表示するため）、ア…" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://nakatakeworks.jp/?p=162" />
<meta property="og:image" content="https://nakatakeworks.jp/wp-content/themes/nakatake/assets/images/mypic.png" />
<meta property="og:site_name" content="ナカタケワークス" />

AMP

Accelerated Mobile Pages の略。

このルールでマークアップしておくと、Google がキャッシュから高速でモバイルページを表示してくれる。

テンプレートなども公開されているので、簡単なサイトなら、それを使ってサイトを作るのも良さそう。詳しくは↓

ユニバーサルデザイン

老若男女、身体的特徴などの垣根なく、いろんな利用者に優しいデザインにしようね、という考え方。

デザインでいうと、文字の大きさ、配色など。マークアップ時には、スクリーンリーダーや音声ブラウザのために画像には alt 属性を設定する、など。