タグ検索:SEO , UX

先に前回のブログ「a-blog cmsにhtmx(jsライブラリ)を実装してみました【ver3.1.17対応版】」の続きになりますが、絞り込み中のタグをより分かりやすくするために、選択中のボタンに変化を加える処理を考えてみました。

自分でjsを作れば色々対応は出来ますが、a-blog cmsにはシステムに用意された「組み込みJS」という機能があります。こちらの機能はWebサイトを制作する上でよく使う機能があらかじめ用意されており、目的に合うものがあれば便利に使う事ができます。

a-blog cms Developers 組み込みJS

今回はそんな「組み込みJS」の中から、現在位置の状態を取得可能な「linkMatchLocation」を使ってみることにしました。

linkMatchLocationとは

表示中のページのURLとclassを付与した<a>の「href」を比較して、条件が合う場合に指定した別のclassを<a>に付与する事が出来る機能です。下記はテンプレートの記述例とその実行後の状態になります。条件に合うとclassに「指定した値(今回はstay)」が付与されます。

a-blog cms Developers 現在位置を装飾する

<!-- 例:ブラウザのアドレスが「https://www.ideasource.jp/blog/」の場合で付与するclassが「stay」の場合 -->
<!-- テンプレートの記述 -->
<a href="https://www.ideasource.jp/blog/" class="js-link_match_location">ブログ</a>

<!-- 実行後 -->
<a href="https://www.ideasource.jp/blog/" class="js-link_match_location stay">ブログ</a>

linkMatchLocationの種類

「linkMatchLocation」には複数種類があります。
値を含んでいる場合、完全一致する場合、ブログ、カテゴリー、エントリーが含まれている場合など、判定したい用途に合わせて設定します。



linkMatchLocationMark 現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に指定したclassを付与します
linkMatchLocationFullMark 現在表示しているページのURLと、アンカーリンクのリンク先URLが完全一致した場合にclassを付与します
linkMatchLocationBlogMark 現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します
linkMatchLocationCategoryMark 現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します
linkMatchLocationEntryMark 現在表示しているエントリーのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します

今回は「linkMatchLocationMark(.js-link_match_location)」を利用して実装


linkMatchLocationでタグの絞り込みをわかりやすく実装

「主要なキーワード(tag)」で絞り込んだ際に、ボタンの<a>にclassで「stay」を付与し、cssで色を変えています。
「linkMatchLocationMark」はURLを含む値で判定できますので、ページャーなどで次ページに移った際にも判定出来ますので、ボタンの「stay」の状態が切れることはありません。htmxでURLを変更した際にも「linkMatchLocation」は問題なく動作しますので、htmxのSPA的な動きと組み合わせると色々なところで応用が効きそうです。

・実装したページはこちら(弊社の制作事例ページ

最後に

今回はa-blog cmsの「組み込みJS」とhtmxを使い、簡単に現在位置の反映ができました。この様にa-blog cmsはhtmxとの連携にも強く、a-blog cmsに元々備わっている「組み込みJS」を使った場合にも、効率的に動作させる事が出来ます。a-blog cms ver3.1.17でhtmxの利用が従来より簡単になり、セキュリティ面も強化されましたので、さらに安心して利用する事が出来る様になりました。htmxはUXの改善にも使いやすいので非常に嬉しいです。

ということで、今回はa-blog cmsとhtmxで「組み込みJS」を使ってみました。
またa-blog cmsとhtmxにつきましては、随時レポートしていこうと思います。

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由


先日a-blog cms + htmxの勉強会で学んだことを忘れない様に、早速チャレンジしてみました。
当サイトで便利に活用できそうな場所ということで、「制作事例」一覧ページを制作事例のタグを使って絞り込みをします。
htmxって何?という方は、先に前回のブログ「a-blog cmsとhtmx(jsライブラリ)は非常に相性が良い」をご覧ください。

2024/6/14追記:a-blog cms ver 3.1.17からhtmxとの親和性がより高くなり「hx-ext="ajax-header"」の表記が不要となりました。
また、htmx利用時のセキュリティも向上しておりますので、詳しくは下記の説明に追記した【a-blog cms ver3.1.17より変更】の箇所をご確認ください。

a-blog cmsへのhtmx実装方法


制作事例へhtmxを実装

今回はすでに制作事例のエントリーに付いているタグを利用して、「主要キーワードでの絞り込み」というものを作ることにしました。
ただ、あまり細かなタグを並べても数が多すぎるので、ページ上部は主要なものだけにして、細かいタグは各事例の部分で絞り込める様になっています。

※こちらではhtmxの細かな設定についてというより、htmxをa-blog cmsに実装する方法をご紹介しておりますので、htmx自体について知りたい方は htmx の公式ページをご確認ください。

a-blog cmsの設定確認と用意するもの

config.system.yamlの設定を確認

#a-blog cms ver3.1.6以前の場合
forbid_tpl_url_context: off
html_format_validate: off

こちらの2つの設定が「off」になっていないと、htmxを利用することは出来ませんので、まず最初に確認してください。

【a-blog cms ver3.1.17より変更】
a-blog cms ver3.1.17からa-blog cmsの機能が向上しており、下記の設定で動作可能です。また新たな設定も追加されておりますので、従来よりセキュアな環境でご利用いただけるようになっております。

#a-blog cms ver3.1.7以降の場合
forbid_tpl_url_context: on #on / off どちらでも可
html_format_validate: on #on / off どちらでも可
ajax_security_level: 2 #ajaxリクエストのセキュリティレベルを設定します。(0: チェックなし 1: RefererとHttpヘッダーを確認 2: CSRFトークン確認)

a-blog cms ver3.1.17以降はこちらの2つの設定が「on」「off」のどちらでもhtmxをご利用可能です。
「ajax_security_level」はa-blog cms ver3.1.17より追加された設定です。こちらはお好みで設定してください。

【重要】「ajax_security_level:2」に設定する場合は、htmlの要素に「check-csrf-token」の記述が必要となります。class名などでどこかに追加をしてください。「check-csrf-token」の文字列があるとa-blog cmsがCSRFトークンを発行します。(例:<body class="check-csrf-token">)

jsライブラリとa-blog cms用の記述を設定

次にhtmxのjsライブラリとa-blog cmsに必要な記述を設定します。
記述は<head>内で大丈夫です。htmxのファイルは公式サイトからDLしてください。

・htmx htmxのオフィシャルサイトはこちら
・htmx ajax header htmxのオフィシャルサイト「htmx ajax header」についてはこちら (a-blog cms ver3.1.17以降は不要)

<!-- htmx -->
<script src="/js/htmx.min.js"></script>
<script src="/js/ajax-header.js"></script> <!-- a-blog cms ver3.1.17以降の場合は不要 -->

<!-- a-blog cms で htmx を動かすおまじない -->
<script>
    addEventListener('htmx:beforeHistoryUpdate', function (event) {
        const proposedUrl = event.detail.history.path;
        const customUrl = proposedUrl.replace(/tpl\/include\/htmx\/.*\.html/, '');
        event.detail.history.path = customUrl;
    });

    //a-blog cms ver3.1.17より追加
    document.addEventListener("htmx:configRequest", function(event) {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
        event.detail.headers['X-CSRF-Token'] = csrfToken;
    });

    //htmx:afterSwap swap処理後にJSを実行
    addEventListener('htmx:afterSwap', function (event) {
        ACMS.Dispatch(event.target);
    });
</script>

「addEventListener」の「htmx:beforeHistoryUpdate」は、htmxでテンプレートを適用する際に「/tpl/include/htmx/xxxxx.html」の様なパスが付いてしまう場合に、リプレイスして削除処理するためのものです。こちらはファイルの置き場所によってパスを変更します。
「addEventListener」の「htmx:afterSwap」はhtmxのswap後に、a-blog cmsのjsを実行する際に必要な記述の様です。

【a-blog cms ver3.1.17より変更】
「htmx ajax header」の読み込みは不要となりました。また、「htmx:configRequest」はver3.1.17で新たに追加された機能です。a-blog cms ver3.1.17以上で利用する場合に必要な記述になります。


これで準備はOKです。あとはテンプレートに記述するだけ。今回のケースでは下記テンプレートを用意しました。

htmx用のテンプレートを用意します

a-blog cmsテンプレートのインクルードの記述

a-blog cmsのテンプレートは1度の処理で動きますが、htmxでは複数箇所動かす場合があるため「multi_swap」の値で制御しているそうです。@includeでその為の値を渡してテンプレートを読み込んでいます。

@include("/include/htmx/work_htmx.html",{"multi_swap": "off"})

<a>がリクエスト側の記述 / <div id="work_htmxfield">がレスポンス側の記述

<a>をクリックしたら#work_htmxfield(親のwrapper)を「/include/htmx/work_htmx.html」で置き換えています。(自分自身を置き換え)
こちらのサンプルでは絞り込みは「Web制作」だけになっています。
先ほどの「multi_swap」は<title>のところを制御しています。(値がoffではない時のみ表示)

【a-blog cms 3.1.17より変更】
下記ソースにも追記しましたが、a-blog cms ver3.1.17以降は「hx-ext="ajax-header"」の記述は不要となりました。
a-blog cms ver3.1.17以降でご利用の場合は「hx-ext="ajax-header"」の記述を削除してください。

<div id="work_htmxfield">
  <!-- htmx で絞り込み  -->
  <!-- 注:a-blog cms ver3.1.17以降は hx-ext="ajax-header"の記述は不要です  -->
  <a href="/service/creative_work/tag/Web制作/" hx-get="/service/creative_work/tag/Web制作/tpl/include/htmx/work_htmx.html" hx-trigger="click" hx-target="#work_htmxfield" hx-swap="innerHTML" hx-ext="ajax-header" hx-push-url="/service/creative_work/tag/Web制作/">【Web制作】</a>

  <!-- ここに Entry_Summary などのモジュールで置き換えたい事例リストを掲載 -->
</div>

<!-- 選択したタグを含めた結果で <title> を置き換え -->
<!-- BEGIN_IF [{{multi_swap}}/neq/off] -->
  <!-- BEGIN_MODULE Ogp --><title>{title}</title><!-- END_MODULE Ogp -->
<!-- END_IF -->

一応簡単に説明すると、ポイントとしては下記の様な感じです。
・href:本来遷移するURL
・hx-trigger:発火条件/clickは要素をクリック
・hx-target:置き換え対象/#work_htmxfield
・hx-swap:置き換え方法/innerHTMLは指定要素の中身を置き換えます。
・hx-get:a-blog cmsのURLコンテキストが通るhtmxテンプレートも含めたパス
・hx-push-url:ブラザウのURL欄に表示したいパス

「hx-get」はa-blog cmsのURLコンテキストが通る「/tpl/」も含めたhtmxテンプレートへのパスになる為、冒頭でご紹介したjsで「/tpl」以降のパスを削除して表示しています。(検索botなどから無駄なURLへのクロール・キャッシュを防ぐ目的があるそうです)

また、Entry_SummaryなどのモジュールID(今回でいうところの制作事例の一覧)は、tagで絞り込める様にモジュールを設定しておく必要があります。<title>部分は、絞り込んだ状態のタイトル情報で上書きしています。こちらはhtmxの機能で、<title>タグの書き換えができます。

少しお断りを入れると、今回実装した実際のコードは「hx-」を「data-hx-」にしています。こちらはhtmlのバリデーターの問題を避けるためで、海外の情報を参考にしました。公式ではございませんのでこちらでは「data-」は省いております。

ページャーの設定

エントリー数が多くなると、一覧表示時に一度に表示することが困難になってきますので、ページャーにも対応してみました。
PCとスマホとの両立を考えると、「続きを見る」としてその場でロードし追加表示する実装も良いと思いますが、再度アクセスした際に初期状態に戻ってしまうことを考えると、今回はページャーを実装しページを分けてヒストリーバックが機能する様にしてみました。

【a-blog cms 3.1.17より変更】
下記ソースにも追記しましたが、a-blog cms ver3.1.17以降は「hx-ext="ajax-header"」の記述は不要となりました。
a-blog cms ver3.1.17以降でご利用の場合は「hx-ext="ajax-header"」の記述を削除してください。

<!-- BEGIN pager:veil -->
<!-- ページ送り 開始▼▼ -->
<!-- 注:a-blog cms ver3.1.17以降は hx-ext="ajax-headerの記述は不要です"  -->
<nav id="work_tagsearch_htmx_pager">
	<ul class="pagination">
		<!-- BEGIN backLink --><li class="serial-nav-item serial-nav-item-prev"><!-- BEGIN prevPage --><a href="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{backPage}/#work_tagsearch_htmx" hx-get="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{backPage}/tpl/include/htmx/work_htmx.html" hx-trigger="click" hx-target="#work_htmxfield" hx-swap="innerHTML" hx-ext="ajax-header" hx-push-url="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{backPage}/" aria-label="前へ" class="scrollTo"><span aria-hidden="true">&laquo;</span></a></li><!-- END backLink -->

		<!-- BEGIN firstPage:veil --><li {pageCurAttr}[raw]><span><a href="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->#work_tagsearch_htmx" hx-get="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->tpl/include/htmx/work_htmx.html" hx-trigger="click" hx-target="#work_htmxfield" hx-swap="innerHTML" hx-ext="ajax-header" hx-push-url="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->" class="scrollTo">{firstPage}</a></span></li><li class="peger_pipe"></li><!-- END firstPage:veil -->

		<!-- BEGIN page:loop --><li {pageCurAttr}[raw]><span><!-- BEGIN link#front --><!-- END link#front --><a href="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{page}/#work_tagsearch_htmx" hx-get="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{page}/tpl/include/htmx/work_htmx.html" hx-trigger="click" hx-target="#work_htmxfield" hx-swap="innerHTML" hx-ext="ajax-header" hx-push-url="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{page}/" class="scrollTo">{page}</a><!-- BEGIN link#rear --><!-- END link#rear --><!-- BEGIN glue --><!-- END glue --></span></li><!-- END page:loop -->

		<!-- BEGIN lastPage:veil --><li class="peger_pipe"></li><li {pageCurAttr}[raw]><span><a href="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{lastPage}/#work_tagsearch_htmx" hx-get="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{lastPage}/tpl/include/htmx/work_htmx.html" hx-trigger="click" hx-target="#work_htmxfield" hx-swap="innerHTML" hx-ext="ajax-header" hx-push-url="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{lastPage}/" class="scrollTo">{lastPage}</a></span></li><!-- END lastPage:veil -->

		<!-- BEGIN forwardLink --><li><a href="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{forwardPage}/#work_tagsearch_htmx" hx-get="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{forwardPage}/tpl/include/htmx/work_htmx.html" hx-trigger="click" hx-target="#work_htmxfield" hx-swap="innerHTML" hx-ext="ajax-header" hx-push-url="/service/creative_work/<!-- BEGIN_IF [%{TAG}/nem] -->tag/%{TAG}/<!-- END_IF -->page/{forwardPage}/" aria-label="次へ" class="scrollTo"><span aria-hidden="true">&raquo;</span></a></li><!-- END forwardLink -->
	</ul>
</nav>
<!-- ページ送り 終了▲▲ -->
<!-- END pager:veil -->

上記のポイントとしては、Entry_Summaryの通常のページャーを使っています。
簡易ページャーでは前後のURLの変数が、ページ番号を含めひとまとめになっていることで、htmxの記述を適用することが難しかったため、表示ページのページ番号だけで取得可能なページャーがおすすめです。もし簡易ページャーで実装する場合は、何かしら現在ページの/page/の値を取得する方法を考えなくてはいけないと思います。

また、上記のページャー自体の機能で/page/の値の有無は判断できますが、/tag/の有無は判定できないため、グローバル変数%{TAG}で表示ページのタグの有無を調べ、タグがある場合だけIFブロックで「href」「hx-get」「hx-push-url」にタグに関連する内容を出力しています。

注意ポイント

「hx-push-url」でアドレスを変更したので、その変更したアドレスでダイレクトにアクセスされた際にも、同様のページが表示できるかは確認をしてください。今回はタグ・ページャーともに絡んだ実装になるため気を使いましたが、別タブでリンクを開く人も多いので重要だと思います。逆に「hx-push-url」を使わない実装の場合は、アクセスしたページのみで機能するので手軽に対応できると思います。

実際に実装してみて

正直「こんなに簡単にできるとは!!!」という感じです。
すごく手軽に実装できるので、積極的に取り入れても良いのではないでしょうか。
UXの向上はSEOにも効果があるということですしね。とても良いものを教えていただきました。

最後に

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由


数ヶ月前からSEOで「Web制作 名古屋」で上げてみようと思い色々やりまして、やはり少し時間は掛かりましたが、こちらの1つのエントリー(名古屋の制作会社として15年になります)で今朝(2024/6/9現在)で13位くらいまで上がってきました。10位以内には入れたいなと思いますが、「Web制作 名古屋」はボリュームのあるキーワードなので現状でも結構うれしいです。

「Web制作 名古屋」で検索順位を改善する為におこなった対策

何をやったかですけど、地味な作業ですが「Lighthouse」を使ったCore Web Bitalsの改善、サイト内の表記などの見直し、そしてブログエントリーを計画的に書く、Seach Consoleを見て細かく調整や改善、そして最後にサイト監査ツールを導入して各所チェックし、現状把握と見直しできるところを随時潰していった感じです。

「ホームページ」などの表記は「Webサイト」に統一し、表記の揺らぎを無くしています。この場合「ホームページ制作 名古屋」で検索順位が下がるのでは?と思う方もいるかもしれませんが、現在「ホームページ制作 名古屋」では28位くらいにいますので、同じ意味のキーワードであればGoogleがある程度判断して順位に反映している思われます。

ただ、Core Web Bitals は一度改善しましたが、このエントリーを書く前に、先日トップに動画を入れたので今の数値は下がりました。これが検索結果にどう出るかはまだこれからなので、こちらは注意してみていく予定です。
あと改善すれば数値は良くなりますが、これってどうなの?という部分はあえて対策していない箇所もあります。(Core Web Bitalsの結果は重視したいが、色々表現出来ないと面白くないので…)

サイト内でのキーワード表記の考え方

サイト内のキーワード表記に関しては基本的にはGoogleを信じて、不誠実はことはしていません。表記はしっかりと狙ったものにして、必要であればそのワードに添った内容をその都度書いています。
Googleは検索ユーザーの検索クエリ(問い)に対して検索結果から最適なページ(答え)を提供したいだけなので、問いを想定して答えのページを用意します。その問いが検索上位に上げたいキーワードであれば良いので、あとはその答えのパターンを増やしていけば良いと思います。

目的のキーワードに対してエントリーを書けば、自然にそのキーワードの周囲にあるサジェスト的な内容のキーワードも文章に含まれてきます。重要な内容に対してはきちんと見出しを設定して、その項目に対して詳しく書く配慮はしています。

文章が不自然になる様なことはしていません。
「検索ユーザーが好まないエントリーはGoogleも嫌うでしょう」という判断です。

サイト監査ツールの導入

サイト監査ツールは1ヶ月ほど前に導入しましたが、これがサイトの状態を知るには結構便利です。もし弊社のお客様が導入されたい場合は有料ですがご提案もできます。(監査ツールにはまだ数枠空きがあるので先着になります)
特に外部施策としてリンク貼ったりなど何かあるわけではないので、このツールは導入するだけでは効果はないのですが、指標になりますのでかなり役に立ちます。

導入される場合は弊社からのレポートだけになります。管理ページは提供できませんのでご了承ください。
ただ、直接ツールをご購入いただければ管理ページも提供されますので、本格的にご利用される場合は、高価になりますがツールをご購入された方が良いかもしれません。

※弊社が何のツールを導入しているかはここでは触れません。ご了承ください。

競合サイト調査の必要性

上記の監査ツールを導入すると競合サイトの調査なども可能です。
競合調査をすると上位サイトはかなりのページ量のコラムやブログを持っていることが多く、それはサイトをパッとみただけでは分からない場合が多いです。「なぜ上位サイトに勝てないのか」を紐解き、実際の競合サイトの規模を知ると「ああ…だから上位なのか」となることも多いです。

ただ競合サイト調査から競合サイトの流入ページや流入キーワードがわかりますので、そちらを参考にしてより充実したエントリーを作り、さらなる上位を目指すなどもできると思います。逆に競合サイト調査をしないと分からないことも多いと思います。

最後に

現状上位に上がっているのは、1つのブログエントリーですが、こういう上位に食い込むエントリーが複数作れる様になると、後々ドメインとしてこのキーワードに強くなりますので、内部リンクの貼り方でトップページを上位にすることもできると思います。

SEOは基本的に「ちゃんとサイト運営していれば気にしなくていい派」でしたが、狙って運営すれば効果が出ますので、今では「目的を持って計画的に運営すれば気にしなくていい派」になりました。日本規模で争う様な超ビッグワードだとそんな簡単ではないんでしょうけど、地域性を含むならキーワードでしたら、ある程度は上位に上げることも可能だと思います。

SEOには専門的なWebマーケティングやSEOの会社がありますので、Webに関わる会社も今は細分化されております。ただWeb制作会社にも出来ることは沢山ありますので、ぜひSEOにお困りの方は、まずはWebサイトを制作されている制作会社さんに相談されてみてはいかがでしょうか。


a-blog cmsとhtmxが非常に相性が良いということで、ベースキャンプ名古屋で開催された「htmx」の勉強会に行ってきました。

htmxは初めて学んだのですが、htmlに記述するだけで複雑なjsを書かなくても、簡単に非同期で要素の置き換えなどができる、多くの機能を備えた js ライブラリの様です。a-blog cms に慣れたユーザーでしたら、「ポストインクルード」の代わりになるものと説明すると分かりやすいかもしれません。

・htmx
htmxのオフィシャルサイトはこちら

・a-blog cms ポストインクルード
a-blog cmsデベロッパーサイト「a-blog cms ポストインクルード」についてはこちら

htmxの話は今回初めて聞いたため、まだ使っておらず機能的なことも詳しくないのですが、すでに海外では非常に人気のあるライブラリの様です。ただ日本ではあまり活用されておらず話題も少ないとのことでした。

htmxの使い方

このhtmxはhtmlに少し専用の記述を追加するだけで簡単に実装ができます。機能を発火させるトリガーの種類や、置き換え対象要素の指定方法なども複数設定がある様なので、その中で仕様に合うものがあれば、低コストで機能性を高めたサイトを作れる可能性があります。ぜひ詳細はhtmxのページを見てください。

<!-- 例:キーアップの500ミリ秒後に #search-results を所得した結果で置き換え -->
<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#search-results"
    placeholder="検索"
>
<div id="search-results"></div>

強力なa-blog cmsのテンプレート(html)の活かし方が広がる

a-blog cmsのテンプレートエンジンは非常に強力で、a-blog cmsの大きな魅力のひとつだと思います。
PHPなどのプログラムが書けなくても、htmlに専用の記述を書くだけで、DBから欲しい情報を簡単に取得し加工出来る優れた機能を持っています。(もちろんPHPが出来るともっと色々なことができます)

今回の勉強会で話を聞いていて、この優れたテンプレート機能にhtmxがもつUXを改善できる手軽さが加わることで、今まで以上にa-blog cmsの幅を広げるのではないかと思いました。今までもポストインクルードという似た機能はありましたが、個人的には少し取り扱いが難しいと感じていたところもあり、どうしても必要な時にしか使ってこなかった印象があります。ただこのhtmxの場合、最初にセットアップさえしてしまえば、あとは手軽に実装できますので、非常に痒いところに手が届くものになる可能性がありそうです。

また、a-blog cmsには強力なテンプレートのキャッシュ機能がありますので、テンプレートをキャッシュさせてhtmxで非同期に取り扱うことで、従来より高速に動くというお話もありました。このあたりは非常に興味のある話題で、実際にどれほど差があるのかとても興味が湧きました。

SEOの流れにも繋がるところがある

前回のブログ(SEOの話題)で「SEOとは「UX を高めていく事」という時代になったのだと思う」という話を書きましたが、このhtmxはまさにその流れに乗ったものかもしれません。

正直jsをごりごりと書いているプログラマーの方は、htmxだと物足りないと思うかもしれませんが、htmxでUXを改善する手間が減れば、より多くのサイトで機能性を高めるきっかけになると思います。もしかすると日本であまり流行っていないのは、このあたりの認識が海外より重要視されていないのかもしれません。

以上、勉強会の感想でしたが、このブログを書いている段階では、まだ一度も実装したことがありません。
ただ、今回お話を聞いて「これは良さそう」と感じましたのでhtmxのことは今後も少し勉強していこうと思います。

最後に

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由


10年ほど前によく行われていた旧来のSEOの手法は、Web制作者にとって受け入れ難いものが多々あり、敬遠していた人も多いと思います。実際SEOは重要と認識しつつも、手法のブラックさに拒否していた方がほとんどではないでしょうか。

この様なSEOですが、長い年月をかけてGoogleがアップデートを重ねる度に改善され、現在はCore Web Bitalsなど、より Webサイトの健全性も重要視され、正しいWebサイトが求められる様になりました。

Googleのアップデートも年に数回行われており、方向性は示されてもその具体的な内容は非公開な場合もありますが、SEOのために悪質な(ブラック or グレー)な手法を狙った対策は、アップデートの度に改善されて通用しなくなりますので、小手先で上位を狙う業者も減ってきています。

SEOに今求められているものを探して見えてきたもの

実はここ数ヶ月、SEO案件に同時に複数携わらせていただいております。
実際の案件ですので詳細は書けませんが、その中で僕自身も最新のGoogleの状況を再認識した部分もありますので、少しだけブログに残すことにしました。

重要なのはWebサイトが健全であること

今 Google に評価を得たいのであれば、Webサイトは健全である必要があります。
「健全」には色々な意味があると思いますが、簡単にいくつか紹介すると…

・検索クエリに対して、オリジナルで正確な情報(回答)を届けられているか
・情報提供しているサイト(ドメイン)に信頼はあるか(専門性)
・サイト内のリンク構成は機能的に作られているか
・FCP、LCPなどパフォーマンスの影響で、ユーザーにストレスを与えていないか
・CLPの影響でユーザーが誤操作を招く様なことはないか
・あらゆる特性をもったユーザーを想定したサイトが構成できているか(ユーザー補助)
・安全性、セキュリティは保たれているか
・悪質な施策(隠し文字、隠し要素、重複コンテンツなど)はないか(意図せずの場合も含め)
・悪質な被リンクはないか
・サイトマップに異常はないか

などなど。
個々の具体的な対策内容は伏せさせていただきますが、ブラックなものを除くとどの項目も「ユーザーが求める正しい情報をストレスなく安全にお届けできるか」に配慮された内容が重要視されていることが分かります。

内部施策的なことを掘り下げていくと、結果的には「正しい情報を便利に使いやすく提供する良質なサイト」があれば、Googleは良いサイトとして、検索ユーザーに「調べている事柄に対して、この様なお勧めのWebページがありますよ」と、あなたのWebサイトのページをお勧めしてくれるわけです。

UX(ユーザー体験)に優れているサイトが上位に来る

これはもう一言で言うなら「UXに優れているサイトが上位に来る」時代なのだと思います。もちろんページの内容的に「検索クエリ」に対して、明確な答えがあるページでないといけませんが、それ以上で競うなら「UXに優れているサイトが上位に来る」ことを理解する必要があります。

といっても…全部できる?

実際の現場で考えた場合、全てに配慮することは難しいのではないでしょうか。
予算の都合もありますし、技術的な問題もあります。「ユーザー補助」的なことで例をあげれば、お客様のコーポレートロゴの色や形自体が配慮されていないケースもあります。ただ、この様な状況の中でどこまでを対策として捉え、配慮できるかが重要なのだと思います。

Googleさんが理解しやすい様に配慮する

ただ「UXに優れているサイトが上位に来る」といっても、SEO的にGoogleが理解しやすい方法で、という部分もあると思います。なので使いやすくするために、例えば初期ロード時は「情報が隠れている」コンテンツは、Googleにはプラスに働かないこともありそうです。対策としては初期状態は情報が見渡せ、ユーザーの操作により必要な情報が抽出できる操作性に変更して対応するなど、何かしらの配慮は必要なのかもしれません。

それでもこの様な時代になったという事は、冒頭にお話しした古いSEOの概念は全て捨て、より良いサイト作りを目指すことで、結果的にGoogleの結果が付いてくる時代なのだと思います。それは本来あるべき姿で、Googleを見て施策するのではなく、ユーザーを見てWebサイトを作れば良いのだと思います。

最後に…

弊社ではこの様なSEOへの取り組みも行っております。
お客様のWebサイトを調査し、キーワードの調査選定・サイト構成などのアドバイスだけではなく、実際にWebサイトの改修などの実務もおこない、期間をかけて強いサイトに調整をさせていただく事で、効果を出していくものになります。(原稿自体はお客様にご用意いただきます)

もちろん検索順位はGoogleが独自に決めておりますので、順位上昇の保証はできませんが、以前のSEOと違うのは、確実にWebサイトの健全性があがりユーザー体験がよくなることで、滞在時間やコンバージョンへの良い影響も期待できると言うことです。

こちらのSEO施策は非常に労力がかかりますので、長期のご契約が必要なこと、また実務も行うことから、弊社でa-blog cmsにてWebサイトを構築させていただいたお客様のみのご対応とさせていただいております。(a-blog cmsにはSEOに強い機能や、キーワードの実施なども行いやすいため、SEO対策を行う場合は必須とさせていただいております)

弊社ではWebサイトを長く有益にご利用いただける様に、様々な取り組みを行っております。
何かお困りごとがございましたら、ぜひお気軽にご相談ください。