文章/答案/技术大牛

发布

问Cardshifter网站元标签
EN

Code Review用户

提问于 2014-12-23 16:00:18

回答 2查看 295关注 0票数 7

我已经写了以下的搜索引擎优化元标签，请让我知道，如果你认为这可以使用任何改进。我用这篇文章来帮我把它组装起来。我故意遗漏了页面内容，如果您希望看到它，我将其发布为在CR上和论吉乌布 (注意，以下更新尚未提交，它们仅在我的本地目录中)。

<!DOCTYPE html>
<html class="" lang="en" itemscope itemtype="http://schema.org/Organization"> <!-- Schema.org is for Google+ meta-data - See other meta-tags within head section) -->
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/favicon.ico" />

    <!-- META-TAGS -->

      <!-- Standard meta-tags -->
      <title>Cardshifter TCG</title>
      <meta name="description" content="Try Cardshifter trading card game (TCG), an open source multiplayer game!" />
      <meta name="author" content="https://github.com/Cardshifter" />
      <link rel="author" href="https://github.com/Cardshifter" />
      <link rel="publisher" href="https://github.com/Cardshifter" />

      <!-- Google+ Schema.org tags -->
      <meta itemprop="name" content="Cardshifter Trading Care Game">
      <meta itemprop="description" content="Try Cardshifter trading card game (TCG), an open source multiplayer game!">
      <meta itemprop="image" content="/images/cardshifter-logo.png">

      <!-- Facebook OpenGraph tags -->
      <meta property="og:title" content="Cardshifter Trading Care Game" />
      <meta property="og:type" content="website" />
      <meta property="og:image" content="/images/cardshifter-logo.png" />
      <meta property="og:url" content="http://www.CardShifter.com/" />
      <meta property="og:description" content="Try Cardshifter trading card game (TCG), an open source multiplayer game!" />
      <meta property="fb:admins" content="USER_ID" />  <!-- NEED TO MAKE USER ID FOR CARDSHIFTER -->

      <!-- Twitter tags -->
      <meta property="twitter:card" content="summary" />
      <meta property="twitter:url" content="https://twitter.com/Cardshifter" />
      <meta property="twitter:title" content="Cardshifter Trading Care Game" />
      <meta property="twitter:description" content="Try Cardshifter trading card game (TCG), an open source multiplayer game!" />
      <meta property="twitter:image" content ="/images/cardshifter-logo.png" />

    <!-- Bootstrap core CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="cardshifter.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- page content removed -->
  </body>
</html>

html

html5

回答 2

Code Review用户

回答已采纳

发布于 2014-12-23 20:29:15

`author`名称不适用于URL

你用

<meta name="author" content="https://github.com/Cardshifter" />

但是author名字需要一个名称，而不是一个URL (粗体强调我的)：

该值必须是一个自由形式的字符串，提供页面作者之一的名称。

`link`而不是`meta` if URL

如果该值是一个URL，则为必须使用link元素而不是meta。

因此，对于以下元素，您应该使用link而不是meta ( href而不是content)：

<meta itemprop="image" content="/images/cardshifter-logo.png">
<meta property="og:image" content="/images/cardshifter-logo.png" />
<meta property="og:url" content="http://www.CardShifter.com/" />
<meta property="twitter:url" content="https://twitter.com/Cardshifter" />
<meta property="twitter:image" content ="/images/cardshifter-logo.png" />

端斜线

有时有一个尾斜杠，有时没有(如上面的meta元素所示)。没有错，但为什么不坚持一个变体呢？

RDFa取代Microdata

您正在使用RDFa作为OpenGraph (也许还包括Twitter)元数据，以及用于Schema.org的微数据。为什么不坚持一种语法呢？您也可以将RDFa用于Schema.org。

`twitter:`前缀未定义为

您在twitter标记的RDFa中使用前缀，但是这个前缀没有在RDFa核心初始上下文中定义，所以您必须显式地定义它。

我不知道Twitter是否为此定义了词汇表，所以您可能不得不使用普通的HTML5 meta/link元素而不是RDFa。对应的名称是在https://wiki.whatwg.org/wiki/MetaExtensions#Registered_扩展中定义的，因此可以在HTML5 5‘S name属性中使用meta元素。就像很多时候，他们在meta和link上做错了，而且由于链接类型没有在http://microformats.org/wiki/existing-rel-values#HTML5_链接_类型_扩展中定义，您甚至可能不得不对link使用meta。

票数 5

Code Review用户

发布于 2014-12-23 16:28:03

1.字符集

<=“content”content="text/html；charset=UTF-8“/>

您可以声明一个HTML5文档类型和两个字符集。您可以删除这两条规则中的第一条，并保留以下内容：

  <meta charset="utf-8">

2. IE呈现引擎

<meta http-equiv=“meta兼容”content="IE=edge“/>

浏览器应该自行选择合适的渲染引擎。在大多数情况下，设置IE=edge不应该做任何事情，除非用户更改了默认的呈现引擎。

尽管如此，它并没有坏处。

3.评论

<！--元标签->

别说明显的话。我们可以看到每一个<meta>事物都是一个元标记。此外，在这个评论下还有其他的事情。title和link不是元标记。

我也会省略类似于twitter tags的评论。用新的线条把它们分开，就会产生足够的独特性。

4.HTMLShiv/Shim

<！！-[如果< IE 9]> <脚本src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> <脚本src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> <！[endif]->

对于不理解type的浏览器，不要省略HTML5属性，因为它不是有效的HTML4/XHTML。为了确保IE8对HTML5元素的支持，您需要包含shiv，所以您肯定应该在那里使用它。

<!--[if lt IE 9]>
  <script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

4. SEO

有一个好的结构化文档是一件有用的事情。你有搜索引擎使用的描述，你有一个页面标题，你可能会在你的实际内容中有合适的标题。

然而，这只是基础。正因为如此，搜索引擎不会给你一个好的排名。重要的部分是内容。确保你有一个好的文件大纲。

票数 5

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

原文链接：

https://codereview.stackexchange.com/questions/74634

复制

相似问题

问Cardshifter网站元标签
EN

回答 2

Code Review用户

`author`名称不适用于URL

`link`而不是`meta` if URL

端斜线

RDFa取代Microdata

`twitter:`前缀未定义为

Code Review用户

1.字符集

2. IE呈现引擎

3.评论

4.HTMLShiv/Shim

4. SEO

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cardshifter网站元标签EN

回答 2

Code Review用户

author名称不适用于URL

link而不是meta if URL

端斜线

RDFa取代Microdata

twitter:前缀未定义为

Code Review用户

1.字符集

2. IE呈现引擎

3.评论

4.HTMLShiv/Shim

4. SEO

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cardshifter网站元标签
EN

`author`名称不适用于URL

`link`而不是`meta` if URL

`twitter:`前缀未定义为