特定のタグを持ったブログの一覧ページへのリンクについて(タグの文字列に空白がある場合)

Topic summary

タグ名に半角スペースを含む「test tagname」のブログ一覧ページへのリンクを作成すると404エラーが発生する問題について質問がありました。

解決方法として提案されたのは:

  • タグ名のスペースは自動的にハイフン「-」に変換されるため、URLは「test-tagname」とする必要がある
  • ブログのハンドル名(例:news)も含める必要があり、正しいURL形式は {{ routes.root_url }}blogs/news/tagged/test-tagname となる

最終的な解決策:
質問者は {{ tag | handleize }} フィルターを使用することで問題を解決しました。このフィルターはタグ名を自動的にURL用の適切な形式に変換します。

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.

タグ「test tagname」(testとtagnameの間には半角スペースあり)を持ったブログの一覧ページへのリンクボタンを下記のように作成しましたが、リンク先に飛ぶと404になってしまいます。

<a href="{{ routes.root_url }}blogs/tagged/test tagname">もっと見る</a>

空白が無いタグの一覧ページへのリンクを指定した場合にはリンク先は正常に表示されます。

尚、リンクを「{{ routes.root_url }}blogs/tagged/test%20tagname」と記述してもとび先は404になってしまいました。

空白があるタグの一覧ページへのリンクの記述方法について教えて頂けると幸いです。

@ec_man

特定のタグを持ったブログの一覧ページへのリンクの件ですが、
まず、タグ名にスペースが入っている場合は、「test-tagname」の様にスペース部分は、「-」ハイフンでつながれますので、
下記の様に変更いただくと良いかと思います。
もっと見る

ですが、上記コードだけではまだ404で表示される可能性がございます。
理由としては、Shopifyでブログを作成した場合、組織のブログがNewsとなっているかと思います。

その際のブログのURLが『{{ routes.root_url }}blogs/news/ページのハンドル名』となり、

URL上『blogs/news』配下に設定されます。

※組織のブログが異なる場合は、news部分はブログのハンドル名となります。

その場合、下記の様にタグを変更することでタグ一覧が表示されるかと思います。
もっと見る

ご参考まで。

(キュー小坂)

今回、{{ tag | handleize }}を使用することで解決致しました!

小坂様のご回答後半部分については知らなかったため、勉強になりました。

ご回答頂きありがとうございました。