3

編集:この質問は非常に長く、私が探していた種類のもののいくつかの例が含まれています。私は答えを見つけました(以下を参照)、それはこのようなものが存在するということです、そしてあなたはそれについてすべてschema.orgで読むことができます。

同じページのいくつかの異なるアイテムに特定のセマンティック情報を添付できるようにしたいと思います。たとえば、私のページには曲のリストがあり、次のようになります。

<div class="song">
    <img src="cover-art-image" />
    <p>Description on image</p>
    <a id="..." href="link-to-song">View song</a>
</div>
<div class="song">
    ...
</div>

ここで、これらのオブジェクト(この場合は曲)に関するセマンティック情報を表示したいので<meta>、曲の実際のページのタグにセマンティックデータを含めます(一緒に<link rel="author" ...>など)。

"View song"したがって、リンクがセマンティックオブジェクト(メタデータおよびすべて)を一意に記述するURIであることを(検索エンジン、JavaScriptのビット、またはこの場合はブラウザープラグインに)伝達するための最良の方法は何でしょうか。。

の使用について読んだことlink rel="canonical"がありますが、私が知る限り、これは現在のページを説明するためにまたは、現在のページの正規表現が何であるかを検索エンジンに通知するために)ヘッダーで使用されることを意味します。私が欲しいのは、現在のページに表示されているサブオブジェクトを記述したいということを伝えることです。したがって、理想的な世界では、次のように記述します。

<div class="song">
    <img ... />
    <p> ... </p>
    <a href="link-to-song" rel="canonical">View Song</a>
</div>

href(つまり、曲のページ)の最後にあるものは、親HTMLノードの正規表現であることを説明します。しかし、それは実際には何rel="canonical"を意味するのかではありません。私が望むことを実行する(つまり通信する)、すでに定義されている同様の何かがありますか?

そうでない場合、そのようなことを実装するための最も「Webフレンドリーな」方法は何ですか?複数のrel="canonical"リンクを使用するだけではそれができないと確信しています(実際に役立つはずのセマンティックデータを埋め込もうとして検索エンジンを怒らせないようにするとよいでしょう)。

私が考えることができる唯一のことは、次のようなものを置くことです

<a href="..." rev="summary"> ... </a>

ここに表示されているのは、エントリのメインページにあるものの要約ですが、「このリンクを含むDOMノードは...の要約である」という意味で「スコープ」されているとは解釈されないと思います。 。

編集:これをどのように使用できるか(私の意味が明確でない場合)の別の例として、ブログ投稿の各コメントに、その特定の投稿に関連付けられたURIを一意に識別するようなリンクを含めることができます。<link rel="author"...>そのリンクをたどると、コメントの情報、コメントが作成された投稿へのリンクなどを含むページが見つかります。

編集:私が何を意味するのかをより明確にするために、私たちはすでに次のようなメタデータを使用しています

<link rel="canonical" href="..." />

このURI<head>で記述されたオブジェクト(またはコンテンツ)に関するセマンティックデータを伝達するためのページの。したがって、に存在するメタデータは、ページレベルにスコープされている(用語を乱用している)と考えることができます。ページの一部のレベルでメタデータをスコープする方法を知りたいです(したがって、上記の例では、メタデータを含むDOMノードのレベルでメタデータのスコープを設定したいと思います)。以下は有効なマークアップではありません(そして明らかな理由で検索エンジンによってペナルティが課せられます)が、私が何を意味するかを示しています:<head>

<html>
    <head>
        <link rel="canonical" href="/canonical/representation/of/this/page.html" />
    </head>
    <body>
        <div id="item1">
            <a rel="canonical" href="/canonical/representation/of/item1.html" />
            <p>Some local description of item2</p>
        </div>
        <div id="item2">
            <a rel="canonical" href="/canonical/representation/of/item2.html" />
            <p>Some local description of item2</p>
        </div>
     </body>
</html>

次に、そのアドレスで、/canonical/representation/of/item1.htmlいくつかのセマンティックデータ(たとえば、Open Graphデータ)を見つけることができます。

<html prefix="og: http://ogp.me/ns#">
    <head>
        <meta property="og:title" content="Some title" />
        <meta property="og:type" content="music.song" />
        <meta property="og:url" content="/canonical/representation/of/item1.html" />
    </head>
    <body>
        <!-- User-facing content of the page -->
    </body>
</html>

この関係にrel=...マーカーが必要な理由は、ページの特定の部分(どこを指している可能性があるページ内の他のリンクではなく)に関する関連するセマンティックデータを保持するものとしてフラグを立て、プログラムが続く必要があるためです。そのようなデータを発見したい(リンクが存在する特定のDOMノードによって「スコープ」されたページの部分のみに関連していることがわかります)。

4

2 に答える 2

2

これは、 Microdataを使用し行われたことがわかります。ネイティブビデオや友人と同じような注目を集めていませんが、HTML5仕様(ここ)の一部であり、JavaScript APIを搭載することも意図されています(ただし、Operaはこれまでのところそれを実装している唯一のブラウザです-そこに驚きはありません)。<canvas>

さらに良いことに、Google、Bing、Yahoo!などの人々がいます。すべての人がこのことにも気を配り、それを文書化するためにschema.orgを作成しました(また、既製のデータ型の全リストを提供します)。

于 2012-05-16T20:29:01.307 に答える
0

あなたの言っていることを私が理解している方法は、リンクの意味がユーザーを曲に関するページに連れて行くことであることを確認したいということです. したがって、リンクの意味が明確であることを確認する必要があります。あなたはこれについて考えましたか:

<a href="" class="song">
    <img ... />
    <p> ... </p>
</a>

最初はフィギュアのタグを入れようかと思っていたのですが、うまくいきませんでした。私の疑惑はhttp://html5doctor.com/your-questions-15/の素晴らしい権威によって確認されました。

于 2012-05-08T19:51:03.783 に答える