web-dev-qa-db-ja.com

アーティストのページで構造化データ(Schema.org)を最大化する

非常に長い間、私はSEOの目的でmicroformats、microdata、および一般的なマークアップの機能強化を利用しようとしてきました。最近構造化されたデータは実際に「取得」し始めており、今回は間違いなくそれを実行したいと思います。

アーティストの作品(デジタルアート)を表示するページを作成しています。このページには、メイン画像、透明度プレビュー、キーワード、キャプション、アバウトなどが含まれています。

プロトタイプページのHTMLを表示していますが、これを実際に最大化して構造化データアプリケーションの真の傑作にするために何をすればよいか疑問に思っています。

これがSEの精神に過度に反しないことを望みますが、私のような多くのユーザーは、この新しいデータサイエンスの最小限の基本しか理解しておらず、それを最大限に活用していないと感じています。

そうは言っても、デジタルアートや写真に適用できるこの構造化データを最大化するにはどうすればよいですか?

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8" />
        <title>This is the SEO Title | example.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href='/static/css/gecko-bootstrap.css?1b160de18a8e16ad4b1d' rel='stylesheet' />
        <link href='/static/css/styles.css' rel='stylesheet' />
        <!-- HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body class="product" id="" >
        <div class="">
            <header>
                <div class="navbar navbar-default navbar-fixed-top">
                    <div class="container">
                        <div class="navbar-header">
                            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="fa fa-bars"></span>
                            </button>
                            <a class="navbar-brand" href="/">example.com</a>
                        </div>
                        <div class="collapse navbar-collapse navbar-responsive-collapse">
                            <ul class="nav navbar-nav pull-right">
                                <p class="navbar-text">
                                    <i class="fa fa-user"></i> leo
                                </p>
                                <li>
                                    <a href="/account/settings/"><i class="fa fa-cog"></i> Settings</a>
                                </li>
                                <li>
                                    <a id="account_logout" href="/account/logout/"><i class="fa fa-power-off"></i> Log out</a>
                                </li>
                            </ul>
                            <form id="accountLogOutForm" style="display: none;" action="/account/logout/" method="POST">
                                <input type='hidden' name='csrfmiddlewaretoken' value='G5qPsBb1Ap4Y4Whwpl7Sppx52CdnK3f9' />
                            </form>
                        </div>
                    </div>
                </div>
            </header>
            <div itemscope itemtype="http://schema.org/ImageObject" id="">
                <h1 itemprop="name">Orange Man Contractor  Pointing Or Presenting Left</h1>
                <!--SHOWCASE-->
                <div id="showcase">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#preview-1" aria-controls="preview-1" role="tab" data-toggle="tab">
                            Image
                            </a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#preview-2" aria-controls="preview-2" role="tab" data-toggle="tab">
                            Transparent png
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in active" id="preview-1">
                            <img itemprop="representativeOfPage" alt="This is the alt title" height="700" width="364" src="/media/previews/orange-man-contractor-pointing-or-presenting-left-129.jpg" />
                        </div>
                        <div role="tabpanel" class="tab-pane fade " id="preview-2">
                            <img  alt="This is the alt title" height="700" width="700" src="/media/previews/orange-man-contractor-pointing-or-presenting-left-130.jpg" />
                        </div>
                    </div>
                </div>
                <!--//SHOWCASE-->
                <div class="container">
                    <h2>Small description h2</h2>
                    <div itemprop="caption">
                        Orange man contractor  Pointing to left side, presenting an idea, design, product, or object.
                    </div>
                    <h3>Long description h2</h3>
                    <div itemprop="about">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                        <a itemprop="license"></a>
                    </div>
                    <div>
                        <a itemprop="keywords" href="/stock/keyword/occupation/">occupation</a>
                        <a itemprop="keywords" href="/stock/keyword/graphic/">graphic</a>
                        <a itemprop="keywords" href="/stock/keyword/man/">man</a>
                        <a itemprop="keywords" href="/stock/keyword/manage/">manage</a>
                        <a itemprop="keywords" href="/stock/keyword/render/">render</a>
                        <a itemprop="keywords" href="/stock/keyword/3d/">3d</a>
                        <a itemprop="keywords" href="/stock/keyword/worker/">worker</a>
                        <a itemprop="keywords" href="/stock/keyword/contractor/">contractor</a>
                        <a itemprop="keywords" href="/stock/keyword/orange-man/">orange man</a>
                        <a itemprop="keywords" href="/stock/keyword/person/">person</a>
                        <a itemprop="keywords" href="/stock/keyword/engineer/">engineer</a>
                        <a itemprop="keywords" href="/stock/keyword/cute_1/">cute</a>
                        <a itemprop="keywords" href="/stock/keyword/design/">design</a>
                        <a itemprop="keywords" href="/stock/keyword/helmet/">helmet</a>
                        <a itemprop="keywords" href="/stock/keyword/isolated/">isolated</a>
                        <a itemprop="keywords" href="/stock/keyword/left/">left</a>
                        <a itemprop="keywords" href="/stock/keyword/mascot/">mascot</a>
                        <a itemprop="keywords" href="/stock/keyword/construction/">construction</a>
                        <a itemprop="keywords" href="/stock/keyword/pointing/">Pointing</a>
                        <a itemprop="keywords" href="/stock/keyword/offer/">offer</a>
                        <a itemprop="keywords" href="/stock/keyword/communication/">communication</a>
                        <a itemprop="keywords" href="/stock/keyword/communcating/">communcating</a>
                        <a itemprop="keywords" href="/stock/keyword/presenting/">presenting</a>
                        <a itemprop="keywords" href="/stock/keyword/character/">character</a>
                        <a itemprop="keywords" href="/stock/keyword/pose/">pose</a>
                        <a itemprop="keywords" href="/stock/keyword/professional/">professional</a>
                        <a itemprop="keywords" href="/stock/keyword/gesture_1/">Gesture</a>
                        <a itemprop="keywords" href="/stock/keyword/direction/">direction</a>
                        <a itemprop="keywords" href="/stock/keyword/cartoon/">cartoon</a>
                        <a itemprop="keywords" href="/stock/keyword/supervise/">supervise</a>
                        <a itemprop="keywords" href="/stock/keyword/safety/">safety</a>
                        <a itemprop="keywords" href="/stock/keyword/direct/">direct</a>
                        <a itemprop="keywords" href="/stock/keyword/orange/">orange</a>
                        <a itemprop="keywords" href="/stock/keyword/command/">command</a>
                        <a itemprop="keywords" href="/stock/keyword/abstract/">abstract</a>
                    </div>
                    <hr />
                    <a title="edit" href="/gecko-admin/edit-images/product-115/">Edit</a>
                </div>
            </div>
            22 
            <hr />
            <footer>
                <div class="container">
                    &copy; 2015 &lt;your company here&gt;
                </div>
            </footer>
        </div>
        <script src='/static/js/site.js?1b160de18a8e16ad4b1d'></script>
        <script src="/static/pinax/js/theme.js"></script>
    </body>
</html>
3
1Up

この例が役立つかもしれません

   <div itemscope itemtype="http://schema.org/VisualArtwork">
    <link itemprop="sameAs" href="http://rdf.freebase.com/rdf/m.0439_q" />
    <h1 itemprop="name" lang="fr">La trahison des images </h1>
    <p>
        A <span itemprop="artform">painting</span> also known as 
        <span>The Treason of Images</span> or 
        <span itemprop="alternateName">The Treachery of Images</span>.
    </p>
    <img itemprop="image" src="http://http://upload.wikimedia.org/wikipedia/en/b/b9/MagrittePipe.jpg" />
    <div itemprop="description">
        <p>
            The painting shows a pipe. Below it, Magritte painted, 
            <q lang="fr">Ceci n'est pas une pipe.</q>, French for 
            "This is not a pipe."
        </p>
    </div>
    <ul>
        <li>Artist: 
            <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
                <a itemprop="sameAs" href="https://www.freebase.com/m/06h88">
                    <span itemprop="name">René Magritte</span>
                </a>
            </span>
        </li>
        <li>Dimensions:
            <span itemprop="width" itemscope itemtype="http://schema.org/Distance">940 mm</span> × 
            <span itemprop="height" itemscope itemtype="http://schema.org/Distance">635 mm</span>
        </li>
        <li>Materials:
            <span itemprop="artMedium">oil</span> on <span itemprop="artworkSurface">canvas</span>
        </li>
    </ul>
</div>

でもっと読む:

https://schema.org/Photograph

https://schema.org/VisualArtwork

3
coolshatul

アーティストの http://schema.org/Person を確実に追加します(authorプロパティを使用します)。 urlプロパティ内の http://schema.org/Person ソーシャルメディアリンク(google plusまたはfacebookが理想的)。

関連する芸術作品へのリンクが表示されません。関連するリンクはプロパティで設定できます。

ImageObject内に設定されたimageプロパティもありません。

有用なプロパティと例の完全なリストは http://schema.org/ImageObject で見つけることができます- http://schema.org/CreativeWork のプロパティも参照してください=および http://schema.org/Thing (Thingのプロパティはすべてに適用され、CreativeWorkのプロパティはImageObjectに適用されます)。

これらのフィールドは特に重要です:

  • 見出し
  • 画像
  • datePublished
  • thumbnailUrl
  • 説明
  • url
  • キャプション
  • 著者

また有用:

  • 言及
  • relatedArticle-アートワークに関するニュース記事へのリンク
  • 高さ
  • uploadDate

ImageObject内でPersonをネストし、imageおよびauthorプロパティを設定する

<div itemscope itemtype="http://schema.org/ImageObject">
   <span itemprop="headline">Moonlight in New Orleans</span>
   <img src="moonlight.png" alt ="Moonlight in New Orleans" itemprop="image"> by 

   <span itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">J.S. Olson</span>
      &nbsp;<a href="http://plus.google.com/5425142" itemprop="url">View Profile</a> 
   </span>

</div>
0
Mousey