文章/答案/技术大牛

发布

社区首页 >问答首页 >最大化艺术家页面中的结构化数据(Schema.org)

问最大化艺术家页面中的结构化数据(Schema.org)
EN

Webmasters Stack Exchange用户

提问于 2015-08-15 04:56:45

回答 2查看 1.6K关注 0票数 4

很长一段时间以来，我一直试图利用微格式、微数据和通用标记增强来实现SEO。最近结构化数据真的开始“接受”了，这一次我想毫无疑问地把它做好。

我正在创建一个页面来显示艺术家的作品(数字艺术)，它包含一个主要的图像，一个透明的预览，以及关键字，标题，约，等等。

我正在展示我的原型页面的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">
                    © 2015 <your company here>
                </div>
            </footer>
        </div>
        <script src='/static/js/site.js?1b160de18a8e16ad4b1d'></script>
        <script src="/static/pinax/js/theme.js"></script>
    </body>
</html>

html

schema.org

structured-data

microformats

seo

回答 2

Webmasters Stack Exchange用户

发布于 2015-08-15 08:11:33

也许这个例子对你有帮助

   <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

Webmasters Stack Exchange用户

发布于 2015-08-17 02:20:30

一定要为艺术家添加http://schema.org/Person (使用作者属性)，包括使用社交媒体链接(google或facebook )在http://schema.org/Person中填充url属性。

我没有看到一个链接到相关的艺术作品，相关的链接可以设置属性。

在ImageObject中也没有设置任何图像属性。

可以在http://schema.org/ImageObject上找到有用属性和示例的完整列表--还可以查看http://schema.org/CreativeWork和http://schema.org/Thing的属性(Thing的属性适用于所有东西，CreativeWork的属性适用于ImageObject)。

这些字段特别重要：

大标题
图像
datePublished
thumbnailUrl
描述
名字
url
字幕
作者

也很有用：

提及
associatedArticle -链接到有关艺术品的新闻文章
高度
宽度
uploadDate

在ImageObject中嵌套人员并设置图像和作者属性

<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>
       <a href="http://plus.google.com/5425142" itemprop="url">View Profile</a> 
   </span>

</div>

票数 1

页面原文内容由Webmasters Stack Exchange提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://webmasters.stackexchange.com/questions/84055

复制

相似问题

问最大化艺术家页面中的结构化数据(Schema.org)
EN

回答 2

Webmasters Stack Exchange用户

Webmasters Stack Exchange用户

这些字段特别重要：

也很有用：

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问最大化艺术家页面中的结构化数据(Schema.org)EN

回答 2

Webmasters Stack Exchange用户

Webmasters Stack Exchange用户

这些字段特别重要：

也很有用：

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问最大化艺术家页面中的结构化数据(Schema.org)
EN