ポートフォリオサイトのSEO対策完全ガイド｜metaタグ・OGP・サイトマップを一から設定する

はじめに

前回の記事ではGoogleアナリティクス（GA4）をポートフォリオサイトに導入してアクセス解析を始める方法を解説しました。今回はポートフォリオサイトのSEO対策を解説します。どれだけ素晴らしいポートフォリオを作っても、検索エンジンに正しく認識されなければ誰にも見てもらえません。metaタグの設定・OGP（SNSシェア時のカード表示）の実装・サイトマップの作成まで、検索エンジンとSNSの両方で正しく表示されるための設定方法を一から解説します。

1. SEOの基本を理解する

1.1 ポートフォリオサイトのSEOで重要な3つの柱

柱内容対策
技術的SEO検索エンジンがサイトを正しく読み取れるかmetaタグ・サイトマップ・サイト速度
コンテンツSEO検索ユーザーの意図に応えるコンテンツか記事の質・キーワード選定
外部SEO他のサイトからリンクされているかSNSでの発信・GitHubのREADME

1.2 ポートフォリオサイトで狙うべきキーワード

個人のポートフォリオサイトが大手サービスと競争するのは現実的ではありません。自分の名前や専門性に絞ったキーワードを狙いましょう。

キーワードの例特徴
自分の名前 ポートフォリオ知人・採用担当者が検索するキーワード
自分の名前 エンジニア採用・仕事依頼を想定したキーワード
地域名 フリーランス Web制作地域密着型の案件獲得を狙うキーワード

2. HTMLのmetaタグを正しく設定する

2.1 基本的なmetaタグ一覧

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ===== SEO基本設定 ===== -->

    <!-- タイトル：検索結果に表示される最も重要な要素 -->
    <title>山田太郎 | WebエンジニアのポートフォリオサイトName</title>

    <!-- ディスクリプション：検索結果のスニペットに表示される説明文 -->
    <meta name="description" content="HTML・CSS・JavaScript・WordPressを使ったWeb制作を得意とするフリーランスエンジニア、山田太郎のポートフォリオサイトです。制作実績やお問い合わせはこちらから。">

    <!-- robots：検索エンジンへのクロール指示 -->
    <meta name="robots" content="index, follow">

    <!-- canonical：同じコンテンツのページが複数ある場合に正規URLを指定 -->
    <link rel="canonical" href="https://yourname.com/">

    <!-- ===== ファビコン ===== -->
    <link rel="icon" type="image/png" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <link rel="stylesheet" href="css/style.css">
</head>

2.2 titleタグの書き方

titleタグは検索結果に表示される最も重要な要素です。

項目推奨内容
文字数32文字以内（日本語）・60文字以内（英語）
含める要素氏名・職種・サイトの特徴
ページごとに変えるトップページ・Worksページ・Contactページで別々のタイトルにする
<!-- トップページ -->
<title>山田太郎 | WebエンジニアのポートフォリオサイトName</title>

<!-- Worksページ -->
<title>制作実績 | 山田太郎のポートフォリオ</title>

<!-- Contactページ -->
<title>お問い合わせ | 山田太郎のポートフォリオ</title>

2.3 descriptionタグの書き方

<!-- トップページ -->
<meta name="description" content="HTML・CSS・JavaScript・WordPressを使ったWeb制作を得意とするフリーランスエンジニア、山田太郎のポートフォリオサイトです。制作実績やお問い合わせはこちらから。">

<!-- Worksページ -->
<meta name="description" content="山田太郎が手がけたWeb制作の実績一覧です。企業サイト・ECサイト・WordPressカスタマイズなど多数掲載しています。">
項目推奨内容
文字数120文字前後（日本語）
含める要素ページの内容・読者にとってのメリット・キーワード
ページごとに変える各ページの内容を正確に説明する

⚠️ descriptionはランキングに直接影響しませんが重要です： Googleのアルゴリズムに直接影響しないものの、検索結果でユーザーの目に触れる説明文のため、クリック率（CTR）に大きく影響します。魅力的な説明文を書くことを心がけましょう。

3. OGP（Open Graph Protocol）を設定する

3.1 OGPとは

**OGP（Open Graph Protocol）**とはSNSでURLをシェアしたときに表示されるカード（タイトル・説明・画像）を制御するための仕組みです。OGPを設定していないとSNSでシェアされたときにURLしか表示されません。

SNSOGPカードの呼び方
X（Twitter）Twitterカード（現在はXカード）
FacebookOGPカード
LINEリンクプレビュー
Slackリンク展開

3.2 OGPの基本タグ

<head>
    <!-- 省略 -->

    <!-- ===== OGP基本設定（Facebook・LINE・Slackなど） ===== -->
    <meta property="og:type"        content="website">
    <meta property="og:url"         content="https://yourname.com/">
    <meta property="og:title"       content="山田太郎 | WebエンジニアのポートフォリオサイトName">
    <meta property="og:description" content="HTML・CSS・JavaScript・WordPressを使ったWeb制作を得意とするエンジニア、山田太郎のポートフォリオサイトです。">
    <meta property="og:image"       content="https://yourname.com/images/ogp.png">
    <meta property="og:locale"      content="ja_JP">
    <meta property="og:site_name"   content="山田太郎 Portfolio">

    <!-- ===== Twitterカード設定 ===== -->
    <meta name="twitter:card"        content="summary_large_image">
    <meta name="twitter:site"        content="@yourtwitterhandle">
    <meta name="twitter:title"       content="山田太郎 | WebエンジニアのポートフォリオサイトName">
    <meta name="twitter:description" content="HTML・CSS・JavaScript・WordPressを使ったWeb制作を得意とするエンジニア、山田太郎のポートフォリオサイトです。">
    <meta name="twitter:image"       content="https://yourname.com/images/ogp.png">
</head>

3.3 OGP画像の作成ガイドライン

項目推奨値
サイズ1200×630px（横長16:9の比率）
ファイル形式PNG（背景透過不可）・JPG
ファイルサイズ5MB以下
画像内のテキスト名前・職種・サイトURLを入れる
保存先/images/ogp.png

💡 OGP画像はCanvaで簡単に作れます： Canvaでテンプレートを選んで名前と職種を入れるだけでプロらしいOGP画像が作れます。サイズは「カスタムサイズ」で1200×630pxを指定してください。

3.4 OGPの動作確認方法

設定後は以下のツールで正しく表示されるか確認します。

ツールURL確認できるSNS
OGPチェッカーogp.buta3.net全般
Meta for Developersdevelopers.facebook.com/tools/debugFacebook・LINE
Card Validatorcards-dev.twitter.com/validatorX（Twitter）

⚠️ GitHub Pagesでは確認に時間がかかる場合があります： OGPはSNS側がURLにアクセスしてキャッシュするため、設定変更後すぐに反映されないことがあります。デバッグツールで「再取得」をクリックして最新の状態を確認しましょう。

4. 構造化データを設定する

4.1 構造化データとは

構造化データとは検索エンジンがページの内容をより正確に理解するためのデータ形式です。JSON-LDという形式でHTMLに埋め込みます。ポートフォリオサイトでは「Person（人物）」スキーマが適切です。

4.2 Personスキーマの設定

<head>
    <!-- 省略 -->

    <!-- ===== 構造化データ（JSON-LD） ===== -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "山田太郎",
        "url": "https://yourname.com",
        "image": "https://yourname.com/images/profile.jpg",
        "jobTitle": "Webエンジニア",
        "description": "HTML・CSS・JavaScript・WordPressを使ったWeb制作を得意とするフリーランスエンジニア",
        "email": "your@email.com",
        "sameAs": [
            "https://github.com/yourusername",
            "https://twitter.com/yourtwitterhandle",
            "https://www.linkedin.com/in/yourusername"
        ],
        "knowsAbout": [
            "HTML",
            "CSS",
            "JavaScript",
            "WordPress",
            "Git"
        ]
    }
    </script>
</head>

4.3 構造化データの確認方法

  1. Google リッチリザルトテスト にアクセスします。
  2. サイトのURLを入力して「URLをテスト」をクリックします。
  3. 構造化データが正しく認識されているか確認します。

5. サイトマップを作成する

5.1 サイトマップとは

**サイトマップ（sitemap.xml）**とはサイト内のすべてのページURLを一覧にしたXMLファイルです。Googleのクローラーがページを効率よく発見・インデックスするのに役立ちます。

5.2 sitemap.xmlの書き方

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    <!-- トップページ -->
    <url>
        <loc>https://yourname.com/</loc>
        <lastmod>2026-06-01</lastmod>
        <changefreq>monthly</changefreq>
        <priority>1.0</priority>
    </url>

    <!-- Worksページ -->
    <url>
        <loc>https://yourname.com/works.html</loc>
        <lastmod>2026-06-01</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
    </url>

    <!-- Aboutページ -->
    <url>
        <loc>https://yourname.com/about.html</loc>
        <lastmod>2026-06-01</lastmod>
        <changefreq>yearly</changefreq>
        <priority>0.7</priority>
    </url>

    <!-- Contactページ -->
    <url>
        <loc>https://yourname.com/contact.html</loc>
        <lastmod>2026-06-01</lastmod>
        <changefreq>yearly</changefreq>
        <priority>0.6</priority>
    </url>

</urlset>
タグ意味
<loc>ページのURL（必須）
<lastmod>最終更新日（YYYY-MM-DD形式）
<changefreq>更新頻度（daily・weekly・monthly・yearlyなど）
<priority>サイト内での優先度（0.0〜1.0）

5.3 robots.txtを作成する

robots.txtはクローラーにアクセスを許可・禁止するページを伝えるファイルです。サイトマップの場所もここで指定します。

# すべてのクローラーにすべてのページへのアクセスを許可
User-agent: *
Allow: /

# サイトマップの場所を指定
Sitemap: https://yourname.com/sitemap.xml

このファイルを robots.txt という名前でサイトのルートフォルダに置きます。

5.4 Search Consoleにサイトマップを送信する

  1. Google Search Console にアクセスします。
  2. 左メニューの「サイトマップ」をクリックします。
  3. 「新しいサイトマップを追加」の入力欄に sitemap.xml と入力します。
  4. 「送信」をクリックします。

💡 サイトマップのステータスが「成功」になっていることを確認しましょう： 「取得できませんでした」と表示される場合はファイルのURLが正しいか・ファイルの文法が正しいかを確認してください。

6. ページの読み込み速度を改善する

6.1 速度もSEOの要素

第十三弾でも解説しましたが、Googleは表示速度をランキング要因として使っています。ポートフォリオサイトで特に注意すべき点をまとめます。

<!-- 画像の遅延読み込み -->
<img src="images/works-01.jpg" alt="制作実績01" loading="lazy" width="800" height="600">

<!-- フォントの最適化（display=swapで読み込み中にシステムフォントを表示） -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

<!-- CSSを先読みする -->
<link rel="preload" href="css/style.css" as="style">

💡 width と height 属性を必ず指定しましょう： 画像に width と height を指定するとブラウザが事前にスペースを確保するためCLS（レイアウトのずれ）が改善されます。

7. SEO設定チェックリスト

✓ すべてのページに固有のtitleタグが設定されているか

✓ titleタグは32文字以内（日本語）か

✓ すべてのページにmeta descriptionが設定されているか

✓ meta descriptionは120文字前後か

✓ OGPタグ（og:title・og:description・og:image）が設定されているか

✓ Twitterカード（twitter:card）が設定されているか

✓ OGP画像（1200×630px）を用意して正しいパスを指定しているか

✓ 構造化データ（JSON-LD）を設置してGoogleリッチリザルトテストで確認したか

✓ sitemap.xmlを作成してルートフォルダに置いているか

✓ robots.txtを作成してsitemap.xmlのURLを記載しているか

✓ Search Consoleにsitemap.xmlを送信したか

✓ 画像にloading="lazy"・width・heightを指定しているか

✓ canonical URLを設定しているか

まとめ

今回はポートフォリオサイトのSEO対策としてmetaタグの設定・OGP実装・サイトマップの作成を解説しました。ポイントをまとめると：

  • titleタグはページごとに変えて32文字以内・氏名と職種を含める
  • meta descriptionはクリック率に影響するため魅力的な説明文を120文字前後で書く
  • OGPタグを設定するとSNSでシェアされたときにカード表示になってクリック率が上がる
  • OGP画像は1200×630pxのPNGを用意してCanvaで簡単に作れる
  • PersonスキーマのJSON-LDを設置するとGoogleが人物情報を正確に理解できる
  • sitemap.xmlを作成してSearch Consoleに送信することでクロールを効率化できる
  • robots.txtにサイトマップのURLを記載してクローラーへの案内を整える

次の記事では、OGP画像作成のパートでも紹介されていたCanvaやそれほどメジャーじゃないテンプレートが利用できるデザインACといったデザインツールやリサイズツール、背景透過ツール、Convertioなどの拡張子変換ツールなどについて紹介します。ファビコンについても説明し、それらのツールをどういった場面で使用するかもお伝えします。お楽しみに！

スポンサーリンク

コメント

タイトルとURLをコピーしました