STUDIOの使い方 - HTMLタグ設定&SEO対策編【2023.8.6更新】

2021年2月18日 22:05

この記事ではSTUDIOで行うHTMLタグ設定とSEO対策について解説しています。初めてSTUDIOで制作をするクリエイターさんはもちろん、導入を検討しているチームメンバーへの共有・パートナー様への説明などにもぜひご活用ください。
また、コンテンツやシーンに応じてカスタマイズすることが重要であり、ここにある方法や考え方が全てではないことをあらかじめご了承くださいませ。

▼爆速でサイト構築が可能なSTUDIOテンプレートはこちら▼
https://studio.design/ja/store/designers/harukana_8

STUDIOで選択できるHTMLタグ一覧

STUDIOでは“ボックス(Box)”と“テキスト(Text)”に手動でHTMLタグを設定することが可能です。こんな感じ。

このBoxとTextは、以下のようにそれぞれ指定できるタグが異なります。

textに指定できるHTMLタグ

h1 / h2 / h3 / h4 / h5 / h6 / li / p / span

boxに指定できるHTMLタグ

div / nav / header / footer / article / section / main / ul / li / label

なぜHTMLタグを設定するの？

本題に入る前に、HTMLについて少しだけ触れておきます。

まず、HTMLとはWebページを表示するための言語のひとつです。HTMLタグを正しく設定することでユーザビリティやアクセシビリティに配慮したマークアップを実現できます。具体的にはスクリーンリーダーのユーザーがコンテンツの見通しを得やすくなったり、キーボードで操作ができたり、さまざまなユーザーや利用環境や状況で情報を取得しやすくなったりします。

HTMLタグのルールに関しては、公式のドキュメントを必ずチェックする習慣をつけておくと情報の選択がしやすくなるのでおすすめです。もちろん、わかりやすいまとめや日本語化されたものなど、有益な情報はたくさんあるので(感謝しかない)公式の情報をベースに+その他の情報を上手に組み合わせて学ぶのがコツかなと思っています。HTMLに限ったことではないですが。

さらに言うと、その情報がいつのものなのかを意識するのも同じくらい大切だと考えています🙆‍♀️

HTMLの仕様書は「WHATWG HTML Standard」をチェック👇

HTMLとSEOの話

次にSEOの話。HTMLタグのルールの話をする際によく「SEOに強い書き方」という話が多くされますが、以下がわたしの個人的な考え方です。

・書き方が直接SEOに関係するわけではない
・けど、ユーザビリティやアクセシビリティを高めてユーザーにとって価値のあるサイトにするひとつの手法ではある
・つまりそんな感じで結果的に総合的にSEOに効いてくる

タグの選択を適切に行うことも「価値のあるコンテンツをつくるためのひとつの手段」と考え、検索順位を上げたいのならば総合的に「ユーザーにとって利益のあるサイト」を目指すのがよいかなと思います。

公式ドキュメントをチェックする

当たり前すぎるからこそ触れておきますが、公式のドキュメントを必ずチェックする習慣をつけておくと情報の選択がしやすくなるのでおすすめです。もちろん、わかりやすいまとめや日本語化されたものなど、有益な情報はたくさんあるので(感謝しかない)公式の情報をベースにその他の情報を上手に組み合わせて学ぶのがコツかなと思っています。(HTMLに限ったことではないですが)

さらに言うと、その情報がいつのものなのかを意識するのも同じくらい大切だと考えています🙆‍♀️

何度も言いますがHTMLの仕様書は「WHATWG HTML Standard」をチェック👇

日本語訳もありますが更新がちょっと遅いらしい。

SEOに関してはGoogle検索が対象ならGoogleの公式ドキュメントをチェック👇