私がWeb開発を学ぶにあたって、一番基礎となる最初に最低限押さえるべき内容についてまとめてみました。
目次
Webアプリケーション関連
リンク関連
シンボリックリンク
- ファイルやディレクトリへの「ショートカット」のようなもの
- 元のファイルやディレクトリへのパスを格納しており、シンボリックリンクをたどると元の場所にアクセスできる
- シンボリックリンクは、異なるファイルシステム間でも機能する
ハードリンク
- 同じファイルやディレクトリに対する複数のエントリが存在する場合のリンク
- ハードリンクが作成されると、元のファイルと同じデータを共有する
- 同じファイルシステム内でのみ作成可能
- ファイルの削除時に注意が必要で、リンクの数が0になると初めて実際のデータが削除される
SEO関連
canonicalタグ
- 同一または類似のコンテンツが複数のURLに存在する場合に、主要なバージョンを指定するためのもの
- 重複コンテンツの問題を回避し、検索エンジンが正しいバージョンをインデックスするのを支援する
メタタグ
- HTMLコード内に含まれる要素で、検索エンジンに情報を提供する役割を果たす
- 以下、代表的なメタタグ
<title>タグ | ページタイトルを指定 検索結果やブラウザのタブに表示される重要な要素 |
<meta name="description">タグ | ページの簡潔な説明を提供 検索結果の説明に表示されることがある |
<meta name="keywords">タグ | ページのキーワードを指定 ただし、多くの検索エンジンはこのタグをあまり重要視していない |
構造化データ
構造化データとは
- 情報を整理し、コンピュータが理解しやすい形式に整えたデータのことを指す
- 構造化データをウェブページに組み込むと、検索エンジンがコンテンツの要素や情報の関係性を深く理解できる
- 検索結果ページにリッチな情報（評価、価格範囲、イベント日時など）が表示される
- それがユーザーにとって有益な情報提供となり、結果的にアクセス数増加につながる
デバック方法
- ウェブページに組み込んだマークアップコードをチェックして、正しく情報が抽出されるかどうかを確認する
- Googleの「構造化データテスター」等のツールを使用して、確認することもできる
あわせて読みたい
schema.org
- 構造化データを記述するための共通の仕様やマークアップ方法を提供するウェブ上のプロジェクト
- 異なるウェブページやコンテンツ間で一貫性のあるデータ構造を確立する
- 検索エンジン等コンピュータが理解しやすい形式で情報を解釈しやすくするための仕組み
| 統一されたデータ構造 | 様々な種類の情報やコンテンツ（商品、記事など）に対する一般的な属性や関係性を定義 異なるウェブサイト上で同じタイプのデータを一貫して表現できる |
| 多様なタイプの スキーマ | 多くの異なる分野にわたるスキーマを提供している 例：Organization（組織）、Person（個人）、Product（商品）、Recipe（レシピ） |
| SEO向上と リッチスニペット | 検索エンジンがコンテンツを理解し、検索結果に追加情報を表示する可能性が高まる このリッチスニペットによって、ユーザーにとって魅力的な検索結果の表示につながる |
schema.orgの実装方法
- ウェブページにschema.orgの構造化データを組み込むには、HTMLソースコード内にマークアップを追加する
- 具体的には、<script>タグを使用してJSON-LD（JSON Linked Data）形式でスキーマ情報を記述する
- このJSON-LDデータには、コンテンツのタイプ、属性、関係性などが含まれる
//商品情報を構造化する場合
htmlCopy code<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"name": "Example Product",
"description": "This is an example product.",
"sku": "12345",
"brand": {
"@type": "Brand",
"name": "Example Brand"
}
}
</script>まとめ
Web開発関連の初歩的な内容についてまとめました。
今後も、初歩的な内容で把握できていないものについては本記事にまとめていけたらと思います。
コメント