タグ検索：a-blogcms

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 サイトを長く有益にご利用いただける様に、様々な取り組みを行っております。
何かお困りごとがございましたら、ぜひお気軽にご相談ください。

表題の通り「名古屋の Web 制作会社として15年になります」正確には2024年7月1日で創業15年目になります。もう少し細かく言いますと、その2年前の2007年4月1日に個人事業主として独立しておりますので、名古屋で営業を始めてからの年月としましては丸15年を超えました。

Web は変化が早い業界です。15年もあると Web 技術やトレンドも含め随分と変わったこともありますが、この東海エリアのお客様に大変良くしていただきまして、変わらず事業を続けてこられた事を大変感謝しております。いつも本当にありがとうございます。

この東海エリアは商業・工業・農業のバランスが取れており、関東・関西の中間位置ということで、日本の中心的な地域なのだと思います。この様に活力のある地域だからこそ、未熟な私たちが起業しても周りのお客様のお力もあり、業務を続けてこられたところが大きいのだと思います。

これからも私たちを選択していただいたお客様に有益かつ喜んでいただける様に、結果の出る成果物を求めて精進していきたいと思います。良いご提案ができる様に、新しい取り組みや検証なども頑張ってまいりますので、今後ともどうぞ宜しくお願いいたします。

Web制作に役立つ js ライブラリの小粒な Tips をご紹介します。
今回は Web サイトの TOP ページなどでよく利用する js ライブラリ「slick」で、「.slick-dots」で利用される <button> の「aria-hidden」が、画像の表示・非表示に連動してボタンも「aria-hidden="true"」or「aria-hidden="false"」と切り替わってしまう問題についての解決方法をお伝えします。

問題点

この問題点は、画像が表示されていない時にも「.slick-dots」が連動して「aria-hidden="true"」になってしまいます。この場合画像は表示されていなくても、「.slick-dots」の <button> は表示されているため本来は「aria-hidden="false"」が正解になります。
この記述が間違っていることで、音声ブラウザで利用された際にボタンについて間違った操作方法が伝わる可能性があります。

解決策

当初、海外など色々な情報を探しましたが、解決法がわからずでした。
そこで他のサイトはどうかと、最近作った別のサイトを確認したところ、slick を使っていても新しいバージョンではこの問題が解決していることに気付きました。

いつから大丈夫になったのか分かりませんが、今回利用していた古い「slick.js ver1.4.1」では「aria-hidden」問題がおきますが、最新の「slick.js ver1.8.0」（2024/4/19時点）では解決されていました。

新しいサイトを立ち上げる際は js などのライブラリも最新にしますが、過去に作った古いサイトの場合は、そのまま古いライブラリを使っている場合もあります。もし同じ症状に遭遇した場合は、ライブラリを新しくしてみると改善するかもしれません。

Web サイトで利用する js ライブラリなどは、セキュリティの問題もありますので、定期的に確認をするなど最新で運用されることをお勧めいたします。

・slick
https://kenwheeler.github.io/slick/

Web 制作に役立つ a-blog cms の小粒な Tips をご紹介します。
今回はキャッシュ操作を便利にする小ネタです。

a-blog cms では Web サイトの表示を高速化するために非常に高機能なキャッシュ機能が実装されています。
公開ページだけではなくログイン後のページでもキャッシュ（一度表示したページを一時的に保存しておく仕組み）が機能するため、Web サイトの構築・ページ追加・編集などの作業もストレスなく操作ができ大変使いやすくなっています。

ただ、このキャッシュは便利な反面、ページを更新してもキャッシュが効いて画面に反映されず確認ができないことがあります。もしページがキャッシュして更新内容が反映されない場合は、「管理ページ」のダッシュボードでキャッシュをクリアすることができます。

しかしキャッシュをクリアするために、毎回「管理ページ」へ移動するのは少し手間がかかります。そこで今回はログイン後のページに表示される「管理ボタン」の下に、キャッシュをクリアするボタンを追加してみます。

a-blog cms のキャッシュクリアボタン実装例

実装はすごく簡単で、以下のコードを利用しているテンプレートに貼り付けるだけです。（a-blog cms ver 3.1.13 時点）
コードの表示権限は、ログイン中かつユーザー権限が「投稿者」以上になります。

実装方法とサンプルコード

■インクルード元
コードは少し長いので是非別ファイルにしてインクルードでご利用ください。

<!-- インクルード例 -->
@include("/include/cacheclear.html")

■ cacheclear.html
今回のブログネタ用にコードをコピペで済む様に、一部の css はインラインで記述しております。
この辺りは貼り付ける場所などもありますので、お好みで手直ししていただければと思います。
またスマホ時の表示対策は何もしていないので、自由にカスタマイズしてみてください。

<!-- キャッシュクリア用 cacheclear.html -->
<!-- BEGIN_MODULE Touch_Login -->
@section("dashboard-clear-cache")
<!-- BEGIN_MODULE Touch_SessionWithCompilation -->
<div id="adminBox" class="clearfix js-dragAdminBox_disable normalBox">
<form action="" method="post">
	<table class="clearfix js-dragAdminBox_disable normalBox" style="border:none;margin:0;padding:0;font-size:13px;">
	<tbody>
		<tr>
			<td>
				<div class="acms-admin-form-checkbox">
				<input type="checkbox" id="input-checkbox-cashe-page" name="target[]" value="page" checked />
				<label for="input-checkbox-cashe-page" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->ページ<!--/T--></label>
				</div>
				
				<!-- BEGIN_MODULE Touch_RootBlog -->
				<div class="acms-admin-form-checkbox">
				<input type="checkbox" id="input-checkbox-cashe-template" name="target[]" value="template" checked />
				<label for="input-checkbox-cashe-template" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->テンプレート<!--/T--></label>
				</div>
		
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-config" name="target[]" value="config" />
					<label for="input-checkbox-cashe-config" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->コンフィグ<!--/T--></label>
				</div>
				
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-field" name="target[]" value="field" />
					<label for="input-checkbox-cashe-field" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->カスタムフィールド<!--/T--></label>
				</div>
				
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-module" name="target[]" value="module" />
					<label for="input-checkbox-cashe-module" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->モジュール<!--/T--></label>
				</div>
				
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-temp" name="target[]" value="temp" />
					<label for="input-checkbox-cashe-temp" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->一時的なデータ<!--/T--></label>
				</div>
				<!-- END_MODULE Touch_RootBlog -->
				
				<div style="position: relative;display: inline-block;">
					<input type="hidden" name="field[]" value="target" />
					<input type="submit" name="ACMS_POST_Cache" value="<!--T-->キャッシュをクリア<!--/T-->" class="acms-admin-btn-admin"/>
					<input type="hidden" name="forcing" value="true" />
				</div>
			</td>
		</tr>
	</tbody>
	</table>
</form>

</div>
<!-- END_MODULE Touch_SessionWithCompilation -->
@endsection
<!-- END_MODULE Touch_Login -->

ということで、a-blog cms に便利な小ネタでした。

Web制作に役立つ a-blog cms の小粒な Tips をご紹介します。
今回はカスタムフィールドやカスタムユニットでメディア画像を利用する際に便利な小ネタです。

a-blog cms ではメディア画像をカスタムユニットなどで利用する際に、「width」「height」をそれぞれ単体で取得する変数は用意されていません。（今のところ…）
そこで <img> タグに画像サイズを記述したい場合は、以下の様に「@imageSize」と校正オプション「split」を組み合わせて利用し設定することが出来ます。

実装方法とサンプルコード

<img src="%{MEDIA_ARCHIVES_DIR}{imagename@path}" width="{imagename@imageSize}[split(' x ', 0)]" height="{imagename@imageSize}[split(' x ', 1)]">

「@imageSize」を利用すると「1024 x 768」の様に、画像の「幅 x 高さ」の組み合わせで値が出力されます。
この値を校正オプション「split」を使い「 x 」（半角アキx半角アキ）で分割することで「0」に幅、「1」に高さを設定することが可能です。

<!-- 出力例 -->
<img src="/media/001/202404/imagename.png" width="1024" height="768">