ZENN の記事を高速で反映させるブログサイトを開発 〜運用編〜
ZENN の記事を高速で反映させるブログサイトを開発 🧑🏼💻（Next.js × TypeScript × Tailwind CSS 使用、Vercel で無料運用） 〜運用編〜
はじめに
仕事やプライベートで Next.js や TypeScript、TailwindCSS などを習得した知見を活かしたいと思いましたので、それらを活用した個人開発の一環として、「HayaTech-Blog」というブログサイトを作りました。ZENN に投稿している記事を取得して、エンジニア向けのブログとして公開しています。
HayaTech-Blog
URL：https://hayatech-blog.vercel.app/
このブログサイトは、ZENN に投稿した Markdown 形式の記事を GitHub リポジトリで管理し、それを GitHub API 経由で取得・表示する仕組みがあります。Vercel を利用することで、無料でデプロイできるだけでなく、高速かつ安定した運用を実現しています。
設計編では、ブログサイトの設計思想と主要な技術要素について、開発編では、ブログサイトの主要な部分のコード実装に焦点を当てて解説しました。最終稿となる運用編では、このブログサイトを支える Vercel の機能、実施した SEO 対策、そして今後の展望について詳しく解説していきます。
Vercel による高速かつ安定した運用
Vercel を採用し、ブログサイトを運用しています。Vercel は、Next.js アプリケーションのデプロイとホスティングに特化したプラットフォームです。インフラの知識を必要とせず、簡単に運用できます。
1. Vercel の特徴
デプロイと管理の簡易性
- GitHub 連携による自動デプロイ
- プレビュー環境の自動生成
パフォーマンスと拡張性
- グローバル CDN による高速配信
- 自動スケーリングによる負荷耐性
- Serverless Functions による柔軟な処理
コストパフォーマンス
- 無料プランでも実用的な範囲の利用が可能
2. Vercel の残念な点
無料プランで商用目的の使用不可
設計段階では、収益化のために広告の導入も検討しましたが、Vercel の利用規約において、無料プランでは広告の掲載や収益化サービスの利用が原則として許可されていませんでした。そのため、今回は広告の導入を見送り、コンテンツの質とユーザー体験の向上に注力することにしました。
3. Vercel Analytics と Speed Insights によるパフォーマンス監視
Vercel は、アプリケーションのパフォーマンスを監視し、改善するための強力なツールを提供しています。それが Analytics と Speed Insights です。
Vercel Analytics
Vercel Analytics
Vercel Analytics は、実際のユーザーのアクセス状況や行動に関するデータを提供します。ページビュー数、ユニーク訪問者数、滞在時間、離脱率など、サイトの利用状況を把握し、コンテンツの改善やユーザーエンゲージメントの向上に役立てることができます。
Vercel Speed Insights
Vercel Speed Insights
Vercel Speed Insights は、Google が提唱する Core Web Vitals (LCP, FID, CLS) を含む、サイトのパフォーマンスに関する詳細な情報を提供します。実際のユーザー体験に基づいたパフォーマンス指標を計測し、改善点やボトルネックを特定することができます。
SEO (検索エンジン最適化) 対策
「HayaTech-Blog」では、より多くのユーザーにアクセスしてもらうために、いくつかの SEO 対策を実施しています。
1. セマンティックな HTML 構造
検索エンジンのクローラーは、HTML の構造を解析してコンテンツの意味合いを理解します。そのため、ブログサイトでは、 <header>, <main>, <footer> などのセマンティックな HTML5 要素を適切に使用し、コンテンツの構造を明確に示しています。また、Markdown 形式の記事が HTML に変換される際にも、見出し (<h1>〜<h6>) やリスト (<ul>, <ol>, <li>) などの要素が適切に生成されるように、Markdown の記述にも注意を払っています。
2. Google SEO 対策
Google 検索結果
Yahoo 検索結果
Google 検索での表示順位を向上させるために、Google Search Console にて URL プレフィックスを指定してサイトを登録し、サイトマップを送信しました。これにより、Google のクローラーが対象の URL 領域にあるコンテンツを効率的に発見し、インデックス登録を促進できます。その結果、Google や Yahoo! などの検索エンジンでサイト名「HayaTech-Blog」を入力すると、比較的上位に表示されるようになりました。
3. Bing SEO 対策
Google だけでなく、Microsoft の検索エンジンである Bing からの流入も考慮し、Bing Webmaster Tools にもサイトを登録する予定です。登録が完了し、検索上位になりましたら、詳細を展開します。
今後の展望
「HayaTech-Blog」は、まだ発展途上のプロジェクトであり、今後以下の機能拡張や改善を検討しています。
共通
- 検索機能: サイト内の記事をキーワードで検索できる機能を追加し、ユーザーが目的の情報に素早くアクセスできるようにします。
トップページ
- フィルター機能: カテゴリーやトピックで記事を絞り込むことができるフィルター機能を追加し、ユーザーの興味に合った記事を見つけやすくします。
- 並び替え機能: 公開日、更新日、いいね数などで記事を並び替える機能を追加し、多様なニーズに対応できるようにします。
ブログページ
- 目次機能: 長い記事でも内容を把握しやすくするために、自動生成される目次機能を追加します。
これらの機能追加は、可能な限りサーバーサイドレンダリング (SSR) や静的サイト生成 (SSG) のメリットを活かした形で実装したいと考えていますが、一部機能によってはクライアントサイドでの処理が必要になる可能性もあり、慎重に検討を進めていきます。
まとめ
運用編では、Vercel を採用した運用、SEO 対策について解説しました。
このブログの開発を通じて、Next.js、TypeScript、Tailwind CSS などの技術的な知見が深まったことはもちろん、Vercel を用いた効率的なデプロイと運用、そして SEO 対策の重要性を改めて認識することができました。今後もユーザーにとって価値のあるコンテンツを提供できるよう、改善を続けていきたいと思います！
Discussion