ウェブアクセシビリティ向上のためのリンクテキスト改善、SEOのためのCanonical URL設定、およびバグ修正について共有します。
SEO改善およびバグ修正のアップデート
こんにちは!hafutureチームです。 本日は、ユーザーの皆様により良いウェブ体験を提供するために実施した検索エンジン最適化(SEO)の改善とバグ修正について共有いたします。
私たちは単に機能を提供するだけでなく、ウェブ標準に準拠し、すべてのユーザーが便利に利用できるプラットフォームを作ることを目指しています。今回のアップデートはその努力の一環として、検索エンジンがhafutureのコンテンツをよりよく理解できるようにし、ウェブアクセシビリティを向上させることに重点を置きました。
1. リンクテキストのアクセシビリティ改善(「詳細を見る」問題の解決)
Lighthouse診断において、**「リンクに説明テキストがありません」**という警告が発生していました。これは、ウェブページ内の特定のリンクが「詳細を見る(Learn More)」のような曖昧なテキストのみで構成されており、検索エンジンやスクリーンリーダーのユーザーがそのリンク先を明確に把握することが困難だったためです。
特にトップページの紹介セクションにある「詳細を見る」ボタンが問題でした。視覚的には周囲の文脈からどのような内容かわかりますが、テキストのみを読み取る支援技術にとっては不親切な場合がありました。
解決策
デザインを損なうことなくアクセシビリティを高めるために、aria-label属性を活用しました。
<Link
href="/about"
/* ... 既存のスタイル ... */
aria-label={t('learnMoreAriaLabel')} // "会社概要について詳しく見る"
>
{t('learnMore')}
</Link>
これにより、スクリーンリーダーや検索エンジンはこのリンクを単なる「詳細を見る」ではなく、**「会社概要について詳しく見る」**として認識するようになります。視覚障がいのあるユーザーの方々も、リンクの目的を明確に理解できるようになりました。
2. Canonical URLのドメイン一致(SEO最適化)
多言語ウェブサイトを運営する際、最も重要なことの一つがrel="canonical"(正規URL)の設定です。hafutureは日本語、英語、韓国語をサポートしているため、各言語ページ間の関係を明確にする必要があります。
これまでは、hreflangタグがwww.hafuture.comドメインを指していましたが、canonicalタグはhafuture.com(wwwなし)を指しており、不一致が発生していました。これにより、検索エンジンが「別のhreflangの場所を指しています」というエラーを報告していました。
解決策
SEO設定ファイル(seo.ts)のBASE_URLを修正し、すべての正規URLがwww.hafuture.comを使用するように統一しました。
// 変更前
export const BASE_URL = 'https://hafuture.com';
// 変更後
export const BASE_URL = 'https://www.hafuture.com';
この変更により、検索エンジンはhafutureのページ構造をより正確に把握し、重複コンテンツの問題なく各言語のページを正しくインデックスできるようになりました。
3. 画像圧縮ツールのバグ修正
アップデートの過程で、**画像圧縮ツール(Image Compressor)**ページの多言語翻訳ファイル内に重複したキー(description)が存在することを発見しました。これは、潜在的なランタイムエラーや翻訳漏れを引き起こす可能性がある問題です。
解決策
重複していたdescriptionオブジェクトの名前をdetailsに変更し、構造を明確にして競合を解決しました。
// 変更前(キーの重複)
"description": { ... }
// 変更後
"details": { ... }
これに合わせて関連コードも修正し、ページ内の説明セクションが正常に翻訳されて表示されるように措置しました。
おわりに
小さな変化の積み重ねが、より良いユーザー体験を作り出します。hafutureは今後も皆様のフィードバックに耳を傾け、より速く、便利で、アクセスしやすいウェブユーティリティプラットフォームになるよう努力してまいります。
新機能の提案やバグの報告はいつでも歓迎いたします。ありがとうございました!