Web・アプリ開発

🧭 はじめに：静的サイトはSEOに弱いって本当？ 「静的サイトはSEOに弱い」という言葉を聞いたことがあるかもしれません。 しかし、これは半分正しくて、半分誤解です。 結論から言うと、 静的サイトはSEOに弱くありません。むしろ高速で軽量なため、SEOに強い側面が多いです。 ではなぜ「弱い」と言われるのか？ どうすれば静的サイトでも検索上位を狙えるのか？ この記事では初心者にもわかりやすく、丁寧に解説します。 🧱 静的サイトとは？（まずは前提を整理） 静的サイトとは、事前に生成されたHTMLファイルをそのまま配信するサイトのことです。 Hugo・Jekyll・Next.js（SSG）・Astro などが代表的です。 静的サイトの特徴 表示が高速（サーバー処理が不要） セキュリティリスクが低い GitHub Pages や Netlify で無料公開できる CMSのような動的処理は苦手 補足 「静的＝古い」というイメージがありますが、近年はJAMstackの普及で再評価されています。 🔍 静的サイトはSEOに弱いと言われる理由 実は、静的サイトそのものが弱いのではなく、運用方法によって弱く見えるだけです。 よくある誤解ポイント 更新頻度が低くなりがち → CMSのように管理画面がないため、更新が面倒と感じる人が多い。 内部リンク設計が弱い → 自動で関連記事を生成しないテーマもある。 メタタグや構造化データを自分で設定する必要がある → 初心者はここでつまずきやすい。 サイトマップやrobots.txtの設定を忘れがち → 動的CMSでは自動生成される部分。 注意 これらは「静的サイトだから弱い」のではなく、設定を怠ると弱くなるだけです。 🚀 静的サイトがSEOに強い理由 実は、Googleが重視する指標の多くは静的サイトが得意とする部分です。 静的サイトがSEOに強いポイント 表示速度が速い（LCP改善） サーバー負荷が少ない モバイル表示が安定しやすい 不要なスクリプトが少なく、読み込みが軽い セキュリティが高く、エラーが少ない 特にHugoやPaperModは、Core Web Vitalsで高得点を取りやすいのが大きなメリットです。 🛠️ 静的サイトで必ずやるべきSEO対策（初心者向け） ここからは、静的サイトでもSEOを強くするための実践的な方法を紹介します。 🗺️ 1. サイトマップとrobots.txtを整備する Hugoなら自動生成されますが、設定を確認しておきましょう。 # hugo.yaml のSEO関連設定 enableRobotsTXT: true # robots.txt を出力 canonifyURLs: true # 正規URLに整形 sitemap: changefreq: daily # 更新頻度 priority: 0.5 filename: sitemap.xml # 自動生成される 補足 GitHub Pages でも問題なく動作します。Search Console への登録も忘れずに。 ...

🚀 この記事のゴール YouTube Data API を使って「動画タイトル」「再生回数」「チャンネル情報」などを取得し、アプリやブログに活用できるようになること。 🎯 YouTube Data APIとは？ YouTube Data API は、YouTube 上の 動画・チャンネル・再生リスト などの情報を取得できる公式APIです。 アプリ開発、データ分析、ブログ自動生成など、幅広い用途で利用できます。 🧰 前提条件（必要な環境） Googleアカウント Google Cloud Console にアクセスできる環境 コマンドライン（curl）または Python が使える環境 注意：YouTube Data API は無料枠がありますが、利用量に応じてクォータが消費されます。 🔑 APIキーの取得方法 YouTube Data API を使うには、まず APIキー を取得します。 1. Google Cloud Console にアクセス https://console.cloud.google.com/ 2. 新規プロジェクトを作成 画面上部のプロジェクト選択 → 「新しいプロジェクト」 3. API を有効化 「APIとサービス」→「ライブラリ」→ YouTube Data API v3 を検索して有効化。 4. APIキーを作成 「認証情報」→「認証情報を作成」→ APIキー 補足：APIキーは外部に漏れると不正利用される可能性があります。GitHubなどに公開しないよう注意。 📦 基本的なAPIリクエストの仕組み YouTube Data API は REST API 形式で、URLにパラメータを付けてアクセスします。 ...

🚀 はじめに：この記事で学べること 本記事では、Hugo + GitHub Pages でブログを運用している初心者の方向けに、 GitHub Actions を使って自動デプロイする仕組みを、できるだけ分かりやすく解説します。 GitHub Actions が何をしているのか Hugo のビルドがどのように自動化されるのか gh-pages ブランチへ自動デプロイされる仕組み 実際に使えるワークフローのテンプレート 補足 「自動デプロイ」は、記事を更新するたびに手動で hugo → git push → gh-pages へ反映…という作業をなくすための仕組みです。 🧱 Step 1：GitHub Actions の基本を理解する GitHub Actions は、GitHub が提供する 自動実行の仕組み（CI/CD） です。 🔧 何が自動化されるのか？ Hugo のインストール サイトのビルド（hugo コマンド） public/ の生成 gh-pages ブランチへのデプロイ これらを YAMLファイル（ワークフロー） に書いておくことで、GitHub が自動で実行してくれます。 📁 Step 2：ワークフローの配置場所を知る GitHub Actions の設定ファイルは、リポジトリ内の以下に置きます。 .github/workflows/deploy.yml 注意 ディレクトリ名 .github/workflows/ を間違えると、GitHub Actions が認識しません。 ⚙️ Step 3：Hugo 自動デプロイ用ワークフローの例 以下は、Hugo サイトを GitHub Pages に自動デプロイする最小構成の例です。 ...

🧭 はじめに：この記事で理解できること Hugo は高速で柔軟な静的サイトジェネレーターですが、フォルダ構造が分かりにくいと感じる初心者は多いです。 この記事では、以下のことを丁寧に解説します。 Hugo プロジェクトのフォルダ構造の全体像 各ディレクトリの役割 PaperMod を使う場合の注意点 GitHub Pages で運用する際に理解しておくべきポイント 補足 Hugo のフォルダ構造は「必要なものだけ作ればよい」仕組みです。最初から全部覚える必要はありません。 🗂️ 全体構造：Hugo プロジェクトの基本フォルダ まずは、Hugo プロジェクトの典型的な構造を見てみましょう。 # Hugo プロジェクトの基本構造（例） . ├─ config/ または hugo.yaml # サイト設定 ├─ content/ # 記事（Markdown） ├─ layouts/ # テンプレート（上書き用） ├─ static/ # 静的ファイル（画像・HTMLなど） ├─ assets/ # SCSS/JS（Hugo Pipes） ├─ themes/ # PaperModなどテーマ ├─ archetypes/ # 記事テンプレート └─ public/ # ビルド後の出力（自動生成） 注意 public/ は Hugo がビルド時に自動生成するため、手動で編集しないようにしましょう。 📁 1. config/（または hugo.yaml）：サイト全体の設定 Hugo の設定は config ディレクトリまたは hugo.yaml に記述します。 PaperMod を使う場合、hugo.yaml で管理するのが一般的です。 ...

🚀 はじめに：この記事でできること Hugo ＋ PaperMod ＋ GitHub Pagesで運用するブログに、Google Search Console（以下、Search Console） を導入するための完全ガイドです。 操作 → 目的 → 結果 → 注意/補足 の順で、初心者が迷いやすいポイント（URL構成・ユーザー/プロジェクトサイトの違い）も含めて整理します。 この手順を完了すると、所有権の確認が成功し、サイトマップ送信が完了、URL検査でクロール促進できる状態になります。 補足 この記事は HTMLファイルアップロード方式 で所有権確認を行い、サイトマップ登録・URL検査・運用の要点までを扱います。 🧭 前提：サイト種別とURL構成 本文着手前に、GitHub Pagesのサイト種別と公開URLを正しく把握します。これがSearch Consoleのプロパティ設定とbaseURL整合の土台になります。 操作 自サイトが ユーザーサイト か プロジェクトサイト かを確認する ユーザーサイト：https://username.github.io/ プロジェクトサイト：https://username.github.io/repository-name/ 目的 Search Console登録方式（URL プレフィックス）と、HugoのbaseURL/内部リンク/画像パス/OGPを公開URLに合わせて一貫させる。 前提 GitHub Pagesの公開設定が済んでいる（ユーザーサイト or プロジェクトサイト） 結果（この時点でできること） 以降の設定で、URL不一致による所有権確認失敗やサイトマップ404を回避できる。 注意 プロジェクトサイトは公開パスが/repository-name/ を含みます。Search ConsoleのURLプレフィックス、検証ファイルURL、サイトマップURLの末尾スラッシュとサブパスが一致しているか、常に確認しましょう。 補足：サイト種別の早見表 ユーザーサイト：https://username.github.io/（サブパスなし） プロジェクトサイト：https://username.github.io/repository-name/（サブパスあり） 🧩 前提条件の確認（Hugo設定） Search Console導入前に、Hugoの基本SEO設定（robots.txt と sitemap）を整えます。 操作 hugo.yaml（またはconfig.toml）に以下の設定を追加/確認 目的 robots.txt と sitemap.xml を自動生成し、クロールとインデックスの土台を作る。 前提 ...

🎯 この記事で得られること この記事では、Hugo + PaperMod を使ったブログの冒頭に表示される メタ情報（投稿日・更新日・読了時間・著者） を、次のようにカスタマイズする方法を解説します。 📅 投稿日 🔄 更新日 ⏱ 読了目安 ✍️ 著者（リンク付き） 🇯🇵 日本語 / 🇺🇸 英語の自動切り替え PaperMod のアップデートに強い「上書きレイアウト方式」 ポイント：PaperMod のテーマファイルは直接編集せず、 layouts/partials/post_meta.html を上書きする方法が最も安全です。 📘 1. PaperMod のメタ情報はどこで生成されている？ PaperMod の記事ページ（single.html）では、メタ情報は次の partial で生成されています。 themes/PaperMod/layouts/partials/post_meta.html このファイルを直接編集すると、テーマ更新時に上書きされてしまうため、 プロジェクト側にコピーして上書きするのが正しい方法です。 📁 2. post_meta.html をプロジェクト側にコピーする まずは PaperMod の元ファイルを確認し、プロジェクト側にコピーします。 # プロジェクトのルートで実行 mkdir -p layouts/partials cp themes/PaperMod/layouts/partials/post_meta.html layouts/partials/post_meta.html 補足：Hugo は「プロジェクト側の layouts を優先」して読み込むため、 このコピーがそのまま上書きとして機能します。 🛠 3. 日本語・英語対応のカスタム post_meta.html を作成する 以下は、メタ情報（投稿日・更新日・読了時間・著者）を、次のようにカスタマイズする 完全版 post_meta.html です。 📅 投稿日 🔄 更新日（変更がある場合のみ表示） ⏱ 読了目安 ✍️ 著者（リンク付き） 🇯🇵 日本語 / 🇺🇸 英語の自動切り替え {{- /* =============================== カスタム Post Meta（日本語/英語対応） 表示内容： 📅 投稿日 ｜ 🔄 更新日 ｜ ⏱ 読了目安 ｜ ✍️ 著者（リンク） =============================== */ -}} {{- $lang := .Site.Language.Lang | default "ja" -}} {{- $date := .Date -}} {{- $lastmod := .Lastmod -}} {{- $readingTime := .ReadingTime -}} {{- $authorName := or .Params.author .Site.Author.name "[UserName]" -}} {{- $authorURL := or .Params.authorLink .Site.Author.link "#" -}} <div class="post-meta"> {{- if eq $lang "ja" -}} <span class="post-meta-item">📅 投稿日：{{ $date.Format "2006年1月2日" }}</span> {{- if ne $lastmod $date -}} <span class="post-meta-separator">｜</span> <span class="post-meta-item">🔄 更新日：{{ $lastmod.Format "2006年1月2日" }}</span> {{- end }} <span class="post-meta-separator">｜</span> <span class="post-meta-item">⏱ 読了目安：{{ $readingTime }}分</span> <span class="post-meta-separator">｜</span> <span class="post-meta-item">✍️ 著者：<a href="{{ $authorURL }}">{{ $authorName }}</a></span> {{- else -}} <span class="post-meta-item">📅 Published: {{ $date.Format "Jan 2, 2006" }}</span> {{- if ne $lastmod $date -}} <span class="post-meta-separator">｜</span> <span class="post-meta-item">🔄 Updated: {{ $lastmod.Format "Jan 2, 2006" }}</span> {{- end }} <span class="post-meta-separator">｜</span> <span class="post-meta-item">⏱ Reading time: {{ $readingTime }} min</span> <span class="post-meta-separator">｜</span> <span class="post-meta-item">✍️ Author: <a href="{{ $authorURL }}">{{ $authorName }}</a></span> {{- end }} </div> 注意：著者リンクは front matter の authorLink: または config の .Site.Author.link で設定できます。 ...

🎯 この記事で得られること このガイドを読めば、次のことができるようになります。 GA4（Google Analytics 4）の仕組みと役割が理解できる GA4 の初期設定（プロパティ作成〜Measurement ID取得）ができる Hugo（特に PaperMod）と GA4 を正しく連携できる GitHub Pages で公開したブログのアクセス解析を開始できる 重要：PaperMod は GA4 の measurement_id を自動で読み込まないため、 extend_head.html に GA4 スニペットを追加する方法が最も確実です。 📘 1. GA4（Google Analytics 4）とは？ GA4 は Google が提供するアクセス解析ツールで、 Web サイトのユーザー行動を可視化できます。 GA4 で分かること アクセス数（PV） ユーザー数 滞在時間 流入元（検索・SNS など） ページごとの閲覧数 スマホ / PC の割合 国・地域別アクセス 補足：GA4 は旧 Google Analytics（UA）とは仕組みが異なり、 計測には Measurement ID（G-XXXXXXX） を使用します。 🌐 2. GA4 プロパティを作成する 🪜 手順 Google Analytics にアクセス https://analytics.google.com/ 左下の 管理（Admin） を開く ...

📘 Hugoとは？（まずは全体像を理解する） Hugo は Go言語で作られた静的サイトジェネレーター（SSG） です。 Markdownで書いた記事を HTML に変換し、高速に Web サイトを生成できます。 Hugoの特徴 とにかくビルドが速い（数百記事でも一瞬） サーバー不要（静的ファイルなのでどこでもホスティング可能） Markdownで記事を書くだけ テーマが豊富（PaperMod、Stack、LoveIt など） GitHub Pages / Netlify / Cloudflare Pages と相性抜群 補足：Hugo は CMS ではありません。WordPress のように管理画面はなく、ファイルベースで管理します。 ⚡ Hugoで何ができるのか？ Hugo はブログだけでなく、以下のようなサイトにも向いています。 🔹 ブログ・技術メモ Markdownで書けるため、エンジニアやクリエイターに人気。 🔹 企業サイト・LP 高速でセキュアなため、企業サイトにも採用例多数。 🔹 ドキュメントサイト Hugo公式テーマ「Docsy」など、ドキュメント向けテーマも豊富。 🔹 ポートフォリオサイト 画像や作品をまとめるサイトも簡単に構築できます。 🆚 Hugoと他のツールの違い（WordPress / Jekyll / Next.js） 初心者がつまずきやすいポイントを比較しながら整理します。 🔸 Hugo vs WordPress（CMS） 項目 Hugo WordPress サイト生成 静的 動的 セキュリティ 高い 低め 速度 爆速 遅くなりがち 管理画面 なし あり 運用コスト ほぼ無料 サーバー代が必要 注意：管理画面が欲しい人は WordPress の方が向いています。 ...

このガイドのゴール：Hugo + PaperMod を使ったブログを GitHub Pages に公開し、以降は記事を push するだけで自動更新できる状態にする。 ✅ 前提条件（必要な環境） Git と Hugo（Extended版） をインストール済み GitHubアカウントを保有 コマンドラインが使える（macOS/Linux/WSL いずれもOK） Extended版が必要な理由：PaperModなど一部テーマはSCSSのコンパイルにExtended版を使います。 🛠️ Hugoサイトの新規作成 hugo new site blog --format yaml # 新規Hugoサイト（設定ファイルをYAMLで作成） cd blog git init # Gitリポジトリを初期化 🎨 PaperModテーマの導入 最も簡単なのは Git Submodule でテーマを取り込む方法です。 git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod hugo.yaml にテーマを指定します： theme: ["PaperMod"] 注意：GitHub Actions でビルドする際は actions/checkout の submodules: true を必ず設定してください（後述）。 代替案：Hugo Modulesでテーマを管理する方法もあります（hugo mod init → module.importsにPaperModを指定）。慣れるまではSubmoduleが分かりやすいです。 📝 Hugoの基本設定（hugo.yaml） 最低限の設定例を示します。後から拡張できます。 baseURL: "https://username.github.io/blog/" # 後で必ず自分の公開URLに合わせて変更 languageCode: "ja-jp" title: "My Hugo Blog" theme: ["PaperMod"] paginate: 10 outputs: home: ["HTML", "RSS", "JSON"] params: defaultTheme: "auto" # ダーク/ライト切替 ShowShareButtons: true ShowReadingTime: true ShowCodeCopyButtons: true showtoc: true # 記事内目次 images: ["images/og-image.png"] # OGP用 author: "HNEST" menu: main: - identifier: archives name: Archives url: /archives/ weight: 10 - identifier: tags name: Tags url: /tags/ weight: 20 ✍ 初回記事の作成とローカル確認 記事を作成します： ...