コメント

このページの記事目次 (タグ: コメント の検索結果)

執筆ガイドライン10、コメントはArticleだ!

んぉ。そうなの?

と、最初は驚いたのですが、なるほど納得する部分もあって、CSSを書き換え、独立したArticleとして扱うことにいたしました。

まずはArticleの定義から

W3C、「HTML/Elements/article」より引用

<article>
The <article> element represents an independent item section of content.

Point

  • Independent item section of content:
    • forum post
    • magazine article
    • newspaper article
    • blog entry
    • user-submitted comment [Example B] ...

In principle, content in the article element should be independently distributable or reusable.

Myヘボ訳
<article>は、独立した構成を持つコンテンツを表す。
ポイント

  • 独立した構成を持つコンテンツ:
    • 討論記事
    • 雑誌記事
    • 新聞記事
    • ブログ記事
    • ユーザーが投稿したコメント

原則として、アーティクル要素は独立して配信可能かつ再掲可能であるべき。

そして、[Example B]を当ブログに置き換えると下記のような感じでしょうか?

コメントは独立記事

当ブログの執筆ガイドライン

コメントはArticle扱いとする。

そして、今後わからないことがあったら、W3CもしくはgoogleのDeveloppers's siteにて調べる。

スポンサーサイト

Template 30、コメントのマークアップ

関連記事、「執筆ガイドライン10、コメントはArticleだ!」を受けて、HTMLとJSON-LDのマークアップを施しました。

HTMLのマークアップ

HTMLでは、コメントをArticleタグ内に投入しました。こんな感じ↓

コメントHTMLマークアップ
Article(ピンク)
コメントは、固有のidを持つarticleにしました。
Heading(黄色)
Articleは独立したコンテンツなので、ヘッディングタグが必要です。当ブログでは、本記事同様h2タグにいたしました。
コメント本文(赤色)
地味ですが、全てを囲んで1段落になっています。
footer(水色)
お名前、URL、投稿日時などが入ります。
time(灰青色)
Article投稿日です。

今のところ私の技術でできるのはこのくらいです。

空のヘッディングに対するエラー対処

コメントタイトルをh2タグにしたところまではよいのですが、見出しタグは空にしておくと↓のようなエラーがでます。

W3C, Markup Validation Serviceのエラーメッセージより

Empty heading. (=見出しタグの中が空だよ。)

ふぅむ。っと思って、タグ内が空にならないように、コメントする人がタイトルを書かなかった場合、No titleと記述されるように書き換えました。テンプレートを書き換えました。

<dt><label for="subject">タイトル</label></dt>
<dd><input id="subject" type="text" name="comment[title]" size="25" class="name" value="No title" onfocus="if (this.value == 'No title') this.value = '';" onblur="if (this.value == '') this.value = 'No title';"  /></dd>

とりあえずdtとddタグは無視してください。クリックすると書き換えられるようになっています。

でも、これ、過去記事には使えないので、結論としては削除することにしました。笑。

その代り、タイトルは必ず★と★の間に挟まれるように配置しました。タイトルがない場合は★★という表記になり、HTML的に空になりません。
そんなリア充っぽいタイトルになるのが嫌な方もいらっしゃるかも??(←代表・私)
♪とか、【】なども考えたんです。でもとりあえず★スタートで。
いつでも変えられますから…

JSON-LDでのマークアップ

<!--comment--><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Comment",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<%topentry_link>#<%comment_no>"
  },
   "headline": "<%comment_title>",
   "datePublished": "<%comment_year>-<%comment_month>-<%comment_day>T<%comment_hour>:<%comment_minute>:<%comment_second>+08:00",
   "description": "<%comment_body>",
  "author": {
    "@type": "Person",
    "name": "<%comment_name>"},
  "author": {
    "@type": "thing",
    "name":"<%comment_name>",
    "sameas":"<%comment_url>",
    "url":"<%comment_url>"}  
   }
}
</script><!--/comment-->

うーん。URLの入れ方が重複しているっポイのですが、とりあえず入ったので良しとします。JSON-LD版では、コメントいただいた方をauthorとしてマークアップできるほか、urlも投入され、元ブログとの連結もsameAsにて繋がっています。これぞウェブ!って感じで楽しいです。

え?、私だけ??

そう。だからこっそり過去記事として公開しているんです。

ちなみに私自身はこれまで通り余所のブログでは最初の自己紹介や引用させていただいた時のご挨拶以外はurlを残さないと思います。ウェブにおいては、つながっている事(ソーシャルグラフ)が一つの価値で、その概念はとても好きなのです。それがブログを始めた理由の一つだったりするのですが、コメントに関しては、リンクメンテができないから、私がブログを止めると、残したリンクはリンク切れになってしまいます。今のところ、外部サイトへのリンク切れはSEOに影響しないと言われていますが、それでもリンクしてみたら切れていたというのは、それなりにユーザのストレスになるものです。大好きなブロガーさんたちにご迷惑をおかけするのは嫌ですし。かといって、これからも続けます!なんて自信がつく日は来なさそうです。やれやれ。笑。

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