Lexxy ホームページのメタ情報とスタイルを一部更新

Lexxy の公式サイトに OG Image を設定し、favicon のパス表記を absolute_url に統一、SEO タイトル出力の制御、フォントウェイトと文字間隔の調整、そしてドキュメントのナビゲーション順序を見直しました。これにより、SNS 共有時の画像表示や資産パスの一貫性が向上し、サイト全体の可読性と導線が改善されます。

背景

サイトのメタ情報と資産参照の一貫性が求められたため、OG Image の設定と favicon の URL 表記の見直しが必要でした。また、Jekyll の SEO プラグインが自動的にページタイトルを付与する挙動を制御し、デザインガイドに合わせたタイポグラフィ調整が行われました。さらに、ドキュメント構造をインストール手順が最上位に来るよう再編成し、利用者の導線をシンプルにしました。

技術的な変更

メタ情報と資産パスの更新

home/_config.yml に defaults セクションが追加され、全ページで image: /assets/images/ogimage.png が自動適用されます。これにより、ソーシャルメディアで共有された際に OG Image が表示されます。

@@ -3,6 +3,12 @@ description: A modern rich text editor for Rails
 url: "https://lexxy.dev"
 baseurl: ""

+defaults:
+  - scope:
+      path: ""
+    values:
+      image: /assets/images/ogimage.png
+
 theme: just-the-docs

home/_includes/head_custom.html と home/_layouts/landing.html の favicon リンクが relative_url から absolute_url に変更され、ベースURL が変わっても正しいパスが生成されます。

@@ -1,4 +1,4 @@
-<link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/images/favicon.png" | relative_url }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/images/favicon.png" | absolute_url }}">

@@ -6,12 +6,13 @@
-  <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/images/favicon.png" | absolute_url }}">
@@
-  {% seo %}
+  {% seo title=false %}

タイポグラフィの調整

home/_sass/custom/custom.css では font-weight を 400 から 350 に緩め、文字間隔 letter-spacing を微調整しました。見出しタグ (h1–h6) にはウェイト 700 と負の文字間隔を設定し、階層の視認性を高めています。

@@ -27,8 +27,14 @@
 .main-content {
-  font-weight: 400;
+  font-weight: 350;
   -webkit-font-smoothing: antialiased;
+  letter-spacing: -0.01em;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    letter-spacing: -0.03em;
+  }

ドキュメント構造のリオーダー

home/docs/*.md のフロントマターで nav_order が修正され、インストール手順が最上位 (nav_order: 1) になるよう再配置しました。また、旧 installation.md が削除され、その内容が index.md（現在は Installation ページ）に統合されました。

@@ -1,7 +1,7 @@
- nav_order: 6
+ nav_order: 4

@@ -1,22 +1,94 @@
- title: Home
- layout: home
+ title: Installation
+ layout: default
  nav_order: 1
+ has_children: true

設計判断

メタ情報は Jekyll の defaults 機構で一括設定し、ページごとの記述を削減する設計が採用されました。favicon と同様に absolute_url を用いることで、baseurl が変わっても資産参照が壊れない堅牢性を確保しています。SEO タイトルの制御はテンプレート側で title=false を明示的に指定し、ページタイトルの一貫性を手動で管理できるようにしています。タイポグラフィ調整は CSS の粒度を細かくし、見出しと本文の視覚的コントラストを明確化する方針です。ドキュメント順序の変更は、利用者が最初にインストール手順へ辿り着くよう、ナビゲーションの UX を優先した結果です。

まとめ

本 PR は、Lexxy のサイトで SNS 共有時の画像設定を統一し、資産パスの堅牢化と SEO タイトル出力の明示的制御、フォントと文字間隔の微調整、そしてドキュメントナビゲーションの再編成を実現しました。これにより、外部共有時の見栄えと内部ナビゲーションの使い勝手が向上し、サイト全体の一貫性が保たれます。