セマンティック

このページの記事目次 (タグ: セマンティック の検索結果)

Template 24、セマンティックなタグたちをテンプレートにも投入してみた。

意味のある構成になったかな?

セマンティックという言葉を知ってから、タグ入れに興味津々です。これで正解なのか??、全くわかりませんが、こんな感じになりました。

セクショニングタグ

黄色い部分がheader、nav、section、footer、asideの各タグです。

元のテンプレートを崩さないで私に到達できたのはとりあえずここまでです。これからは、私には難題すぎるid属性を簡単なものから少しずつ置き換えていくしかないのかな??っと思っています。

brタグなしで書けるようになったら凄いな

最初の2つがちゃんとオレンジになっておらず、わかりにくいのですが、brタグが浮いちゃっています。環境設定では改行を無視する設定になっているのですが、改行タグが入っちゃっています。なんとか一括で取り除ける方法がないものか…

最近は他のブロガーさんたちのブログ記事本文よりも、ブログ記事のソースデータを読んでいることが多いのですが、brタグなしで書いている記事を見かけると、ちょっと感動します。

企業サイトの様に専門のCMSで書いています!と言うならまだしも、同じFC2ブロガーさんがbrタグなしで書かれていると、もう尊敬!!

どういう意味があるのかはよくわかりませんが…、なんだかかっこいいじゃないですか?

書きにくいし

FC2の広告達

W3CのMarkup Validatorにて出てくる沢山のエラーの内、自分で修正可能なものはなくなりました。残りはFC2が入れている文章なので私にはどうにもできません。無料ブログなわけですから、どうしようもないですよね。

唯一、強いオレンジの部分のワードがとても気になります…笑

ぎょっとして、自ブログに出ている広告を見てみました。私用にパーソナライズされている(?)のがお恥ずかしいのですが、こんな感じ↓です。

広告の恐怖

HTML&CSS関係の調べものが多かったからアフィリエイトブロガーさんの記事にたくさんあたって副業(?)、apple payのセットアップに苦戦していたのでカード系(?)、ゲームは、まぁ…。まんまですね。

普段見ているサイトによっては、可能性としては、アダルト系の広告も出てきちゃうのかな…。

嫌だな~。でも、仕方ないのかな。うーん。微妙。

CSSの微修正

5年目に突入したパソがもうダメっぽいです。天に召される前にやっておきたかった修正はこれで大体終わりました。残りはスペース調整だけです。

あとは記事を書くだけ!

覚えたとおりに新しい記事を書いたり、余裕がある時にちょっとずつ過去記事を手直ししたり、そんな感じになりそうです。

少々さびしくなりますが、仕方がありません。

とか言って、なんとか動くうちは、引き続きいろいろ修正していそうですけれどね…。兎も角も、SSDはいきなり終了するって聞きますし、ファイル等も何もないカラ状態にしています。(もともとファイルは外部デバイスに保存する派ですし。)

Template-22、ページ構成を示すセマンティックなタグたち

1. header等のタグを入れていないサイト

SEO関係のサイトで、「HTML5で新しく導入されたページ構成を伝えるタグです!」なんて、これらのタグを紹介しながら、ご本人は使っていないサイトも散見されました。なにやら特別な理由がありそうです。

関連記事でも「HTMLタグの栄枯盛衰」について触れましたが、これらのタグが将来的に廃止になると見立てておられるのでしょうか??

とても気になります。

2. そのページの固有のコンテンツをArticleとみなすサイト

ヘッダー、ナビ、アーティクル、セクション、フッター

当ブログでいうと、上記のような感じです。

私も上記のような感じでタグをふりました。が、しかし、最上部のheaderタグだけはどうしても型崩れをするので、ちゃんとclassやidとにらめっこしながら注意深く入れていく必要がありそうです。

また、Article内にも目次を入れるブロガーさんをよく見かけます。この場合、記事内にもheaderとnavを持つことができてタグ記述としては面白そうです。しかし読者としての私がそういうデザインを個人的に好んでいないので、このテスト記事以外に今後も使っていくかわかりません。

記事内header、CSS


.entry_m header {
font-size:1em;
font-style:normal;
border:4px double #fa8072;
background:#ffe4b5;
margin:0.25em 1em 0.25em 1em;
padding:0.75em;
}

記事内header、サンプルHTML


<header>
<p>冒頭文</p>
<nav><ol>
<li><a href="#1">目次1</a></li>
<li><a href="#2">目次2</a></li>
<li><a href="#3">目次3</a></li>
</ol></nav>
</header>
<section>
<h2 id="1">大見出し1</h2>
<h3 >中見出し</h3>
<h3 >中見出し</h3>
</section>
<section>
<h2 id="2">大見出し2</h2>
<h3 >中見出し</h3>
<h3 >中見出し</h3>
</section>
<section>
<h2 id="3">大見出し3</h2>
<h3 >中見出し</h3>
<h3 >中見出し</h3>
</section>

変な話、こういう風に雛形を固めて、ガイド付きで文字を埋めていくのは楽だったりします。ただ、書いていて、あんまりおもしろくないんですよね~。

3. Articleの解釈が拡大版のサイト

Articleの拡大解釈

わかりにくいかもしれませんが、記事が一つのsection、サイト内独立ページのプラグインが次のセクション、タグリストのプラグインがそのまた次のセクションというように解釈しているサイトのことです。

私が書いた記事の多くは、検索語句とスニペットが悲しいミスマッチになってしまっています。こんな風に全く関係がないタグやリンクをふんだんに入れて、それをsectionとしてみなしてしまうと、検索語句とページコンテンツのミスマッチが更にひどくなってしまいそうなので、私はパスです。

そもそも、footerタグの次に興味が湧いたのがnavタグです。このタグを書いておくと、スニペットに記述されるのを避けられないかな…なんていう淡い期待を胸に抱いております。

セマンティック・ウェブという言葉を知った!

セマンティック・ウェブ!??


最近になって、Googlebot (以下、ロボ子)が、かなりの語彙力を持つ賢い子だということを知りました。こちらの方でロボ語(HTMLやJSON-LD、Microdata)などがカタコトなので、まだまだロボ子にこちらの意図を理解してもらうことはできそうにありません。大抵の場合、Google検索のスニペットがとても悲しい感じの抜粋になっていて、がっかりします。
それでも、ロボ子と意思疎通を図るためにロボ語を勉強する事はとても楽しいです!


つい先ほど、こういう取り組みをセマンティック・ウェブと呼ぶことを知りました。


私がちょっと前にハマっていたJSON-LD、Microdataなどでのマークアップもこの取り組みに含まれるようです。つまるところコミュニケーションがうまく行かない外国人(ロボ子)と意思疎通を図るために外国語(ロボ語)を勉強することが楽しかったんですね!

私は、スペイン語が話せるようになると世界人口の9割と意思疎通が取れるようになるらしいのですが、スペイン語をすっ飛ばしてロボ語に挑戦していたという…

ハマっているものの根源はこれまでの人生の延長上だったことがわかって、ちょっと気恥ずかしくもあります。成長がない??


参考文献:Wikipedia、「Semantic Web
※日本語版はとても短かったので、英語版の方がオススメです。


プレゼンテーショナルマークアップは禁止方向


Presentational Markupを日本語でなんと呼ぶのかよくわかりません。装飾用タグ的な表現でしょうか??
例として挙げられていたのは、<font>、<i> 、<center>タグです。

<b>、<i> は使ってもいいみたいですが、強調などの「意味」は持たないタグと定義されているようです。


HTMLはロボ子との意思疎通用に、人間用はCSSで装飾しなさい!的なお達しが出ているようです。



HTML5でのセマンティック記述強化タグ


これも存じ上げなかったのですが、HTMLにもバージョンがあって、最新版はHTML5だそうです。
私が使っているテンプレートのドキュメントタイプは、「<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">」です。正直どう読めばいいのかわかりません。最新版のHTML5での宣誓文は「<!DOCTYPE html>」だけらしいので、そのうちすべてHTML5仕様に書き換えて5でびゅーしたいな~。なんて思っています。


HTML5では、マークアップに更なる意味を持たせるための新しいタグ<section>、<article>、<footer>、<progress>、<nav>、<aside>、<mark>、<time>が追加されたそうです。
私が先日出くわして、参考文献・引用元を表示するためにスタイルシートを追記した<footer>もその一つです。というか、これがきっかけで、またズブズブといろいろ調べものを始めることになったとも言います。



セマンティック的に中性とな…


<span>や<div>のタグはセマンティック的に中性だそうです。タグの中に、意味のあるキーワードを付帯したclass名を使用するとセマンティック・ウェブ化の助けになるみたいですね。最近ようやくclassやidの使い方がわかるようになってきた気でいたのですが、画面装飾用の部位・有効範囲指定に使うものだと思っていました。
適当な名前をつけちゃダメですね。
あはは。


グーグルのリッチスニペットをいろいろ面白がって埋め込んでいたわけですが、HTMLだけでもできることはそれなりにありそうです。自己流だと系統だてて学べないかわりに、知識が増えるにつれてバラバラだった取り組みのつながりが見えたときに妙に感激したりしています。




HTMLタグの栄枯盛衰


今回の調べものの中でとても驚いたのが、HTMLタグって、廃止されたり、意味が変わったり、復活したり、いろいろ動きが激しいみたいです。


例えば、謎のHTMLタグ、<menu>については、下記の様に記されていました。

<menu>...</menu>
HTML 2.0: A menu listing. Should be more compact than a <ul> list.
MENU existed in HTML Tags, and was standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict; but then redefined in HTML 5.

※へなちょこ翻訳:menuタグは、HTML2.0では、目次(メニューリスト)、ulタグでのリストよりもコンパクト。HTMLには既に存在し、HTML2.0で標準化され、HTML4.0までに廃止の方向へ遷移、HTML4.0で非有効、HTML5にて再定義された。


え~。こういうのついていくのは大変そうですね。プロじゃなくてよかった~。




日本語とロボ語、ともに学習課題


全く持って頭が痛いことに、人間用(日本語)もロボ語(各種マークアップ言語)も、どちらも上手ではありません。気長にボチボチ学習しますかね…



私の中でのSEOの解釈が変わりつつある


SEO (Search Engine Optimization)というと、検索結果の上位に食い込む為の技術みたいな解釈をしていました。特にブログを始めてから、ページビューを増やす為の手段や技術のような印象が強くなっていました。


最近、自分が書いたコンテンツと親和性が高いワードが検索された場合に適切なスニペットを表示してもらうためにいろいろ工夫しているのですが、私がやっている事ってまさにSEOど真ん中なんじゃないか??っと、思えてきました。


酷いスニペットが次に見たときに改善されている、それだけで嬉しかったりします。少なくともロボ子には理解してもらえた!!っという喜びです。その後、人間がクリックしてくれるかどうかは別の話です。「興味がなければクリックしない」と言うこと自体も一つの貴重なニーズ情報ですので、ミスリーディングでクリックしてもらうよりもいいと思うんですよね。


とはいえ、ビジネスサイトだと、そう悠長にも構えてられないのでしょうね~


申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。