[HTML]如何编写以及在head标签中的作用！对于SEO也很重要| 技术流

“我还没有真正意识到过头。”
“我真的不明白什么是头脑中的必要要素。”

对于刚开始学习HTML的人来说，这种想法很自然。我倾向于更多地关注身体内部的编码，而不是如何在头部内部进行编码，而且我不希望深入研究“头部”。正是这种“头脑”倾向于忽视学习。

但是，这次我将重点放在“头”上。实话实说，“头”是一种“谢谢”的存在，在无名英雄的现场运营中支持一定水平。当然没有设计效果，但是理解是必不可少的，因为它实际上在站点的运行中起着重要的作用。

这次，我想向那些迈出了学习第一步的人讲述“头脑中的角色”。通过阅读这些内容，即使是那些对“头部”没有太多思考的人也可以获得一些知识。相反，有经验的人在必要时应该跳过它。

本文内容

什么是1头？
2头的作用是什么？
3如何写头和SEO之间的关系
4如何写在头上
5小结

什么是头？

头部是指HTML中被head标记包围的部分，如下所示。这与其他标签不同，只能使用一次。换一种说法HTML文件中总是只有一个头，关于它。请不要将其误认为“标题标签”。可以使用多个标题标签。

应将其放置在HTML开始标记的正下方，并且不能与body标记重新排序。但是，即使删除并显示此标签，也可以在设计方面毫无问题地显示它。换一种说法头部标签的作用在设计中并不重要，而在站点的结构和操作中则不重要。

<!DOCTYPE html>
<html lang="en">
<head>
ここにmetaタグなどの要素を置く。
</head>
<body>
ここにコンテンツ要素を置く。
</body>
</html>

头的作用是什么？

可以说，团长的作用是为参观者参观现场做好准备的环境。即使您为访问者创建了一个有意义的网站，除非您访问该网站并看到它，否则它毫无意义。为了连接到该动作，头的作用是向搜索引擎提供站点信息（提供索引指令，并向站点浏览器提供标题和描述的站点信息）。除此之外，它还读取诸如CSS和Js之类的外部文件。

如何写头和SEO之间的关系

没有固定的写头方法。所需标签因站点目标和管理策略而异。但是请务必了解头部中的四个常用标签。另外，写入顺序不是固定的，而是元标记之一，指定字符代码的“字符集”应放在head标记的顶部。

标题
描述
元元
链接

特别是，使用meta标签将站点信息传递给搜索引擎。您可以指示搜索引擎巡逻该搜寻器，或者反之避免它，并且可以指定智能手机的显示方法。

我经常听到关于meta标签的详细设置可以有效地作为SEO措施，但是现在它是对meta标签的高估了。当前，重点在于提供对观看者真正有意义的信息，因此，优先考虑内容的丰富化。不管详细写了多少个meta标签，即使忽略了内容的丰富化，SEO的含义也相对较低。当然，高估是被禁止的，但是相反，它不应被低估。由于内容的辅助作用仍然存在，因此在丰富内容的同时，应牢固地编写内容，而不能忽略meta标签。

怎样写在脑子里

前面我提到过，没有固定的书写方式，但是了解一种学习类型非常有用。您可以根据现场的方向在模具中添加或删除模具。因此，首先，我将介绍类型。

<head>
①基本的metaタグ
<!-- 字符码规格 --> 
<meta charset="utf-8">
<!-- IEで常に標準モードで表示させる --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport(レスポンシブ対応) --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 公開前は検索エンジンにインデックスさせず、他のページの巡回を促す。 --> 
<meta name="robots" content="noindex,follow">
<!-- 電話番号の自動リンク化を無効 --> 
<meta name="format-detection" content="telephone=no"> 
  
②SEO対策の補助的措置
<!-- 网站标题 -->
<title>サイトのタイトルをここに書く</title>
<!-- キーワード -->
<meta name="keywords" content="キーワード1,キーワード2,キーワード3...body内で記載できなかったキーワードがあれば、入れておくと良いでしょう。">
<!-- 网站说明 -->
<meta name="description" content="ページの要約。130文字以内(目安)">
<!-- 重複するURLを一本化 -->
<link rel="canonical" href="正規化するURL">
 
③SNS対策
<meta property="og:site_name" content="サイト名をここに書きます。">
<meta property="og:title" content="上記titleと同じとする。">
<meta property="og:description" content="上記descriptionと同じとする。">
<meta property="og:type" content="website(トップページ)/article(下位ページ)">
<meta property="og:url" content="サイトのURL">
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="summaryあるいは、summary_large_imageの指定ができます。">
<meta name="twitter:site" content="サイトのURLを記載します。">
</head>

④その他の指定
<!-- faviconの指定 --> 
<link rel="icon" href="favicon.ico"> 
<!-- 外部のCSSファイル --> 
<link rel="styleshee" href="CSSファイルのURL">
<!-- 外部のJsファイル -->  
<script src="JavaScriptファイルのURL"></script>
</head>

头的作用主要是为搜索引擎，浏览器和SNS提供必要的信息。
现在让我们检查每个的含义。

字符码规格

<head>
  <meta charset="utf-8">
</head>

请考虑此字符代码的规范是强制性的。字符代码是计算机用来表示字符的代码，搜索引擎也会读取此字符类型。否则，可能会导致字符混乱。可以识别为大写或小写。也就是说，它可以是“ UTF-8”（大写）或“ utf-8”（小写）。

以下三个代码是要显示日语时使用的典型代码。

UTF-8
SHIFT_JIS
EUC-JP

其中，“ UTF-8”也推荐HTML5。它也是搜寻引擎（例如Google）在抓取HTML文件时检查的数据。

支持以前的IE版本

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Internet Explorer（IE）是最早的浏览器，因此，使用最新版本查看时，以前创建的网站有时无法正确显示。因此，即使Web内容是在先前版本中开发的，IE仍创建了一种正常运行的机制，即在过去版本中显示该内容的功能。如果设置了此功能，即使您看到的是最新版本，也可以看到它。

例如，要在最新的浏览器上显示IE7，请在标题中显示“ 元元 http-equiv =“”X-UA-Compatible” content=”IE=7″您可以通过编写来指定IE7。特别是，“内容=”IE=7″」の部分を「content=”IE=edge”“”表示您使用的最新版本IE的标准模式。而“内容=”IE=edge”“”中的“ edge”是“选择最新安装的IE以显示网站”的说明。并将此说明放在链接到外部文件（如css或js）的前面。

但是，在IE11中完全不再需要此功能。但是，在某些情况下，如果没有兼容性显示设置，行为将很奇怪，因此最好以防万一。

反应灵敏

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

这是一个重要的元标记。没有这个，就不可能响应手机和平板电脑宽度的波动。写“”。 “内容=“”“宽度=设备宽度”应理解为灵活地对应于设备宽度的指令。 “初始比例= 1.0”是缩放效果。如果在此处输入“ 2.0”，它将以2倍变焦放大。通常，将其设置为“ 1.0”是没有问题的。

禁止索引

<head>
  <meta name="robots" content="noindex,follow">
</head>

例如，我想在Google上发布一个博客页面并进行搜索。但是，假设您不想发布特定页面。在这种情况下，“元名称=”robots” content=”noindex”“已安装。这是在页面上巡逻的搜索引擎的指令，“请不要索引（张贴）此页面”。 “元名称=”robots” content=”noindex,follow”如果您说：“请不要张贴该页面，但请在该页面上巡视。”由于它巡逻，因此它也遵循页面上的链接。

但是，如果“无索引”持续很长时间，则该页面将不再巡逻。因此，从长远来看，“元名称=”robots” content=”noindex,follow”」は「meta name=”robots” content=”noindex,nofollow”」と同じになります。

禁用电话号码的自动链接

<head>
  <meta name="format-detection" content="telephone=no"> 
</head>

iOS上的Safari在页面上查找电话号码并自动将其链接。这样，可能会错误地识别电话号码以外的其他号码，并且禁用此自动链接功能的设置是“元名称=””format-detection” content=”telephone=no”“是。如果要链接电话号码，请在标签中使用“ href =“”tel:000000000″让我们为电话号码建立一个链接。

网站标题

<head>
  <title>サイトのタイトルをここに書く</title>
</head>

一定要写这个。给出代表页面的标题。该标题将用作浏览器上搜索列表的标题。因此，标题是观众搜索时首先看到的内容。请在30个字符以内输入标题。

关键字（可选）设置

<head>
  <meta name="keywords" content="キーワード1,キーワード2,キーワード3...body内で記載できなかったキーワードがあれば、入れておくと良いでしょう。">
</head>

此设置不是必需的。它也没有SEO效果。但是，如果存在无法在页面内容中写入的关键字，则最好将其写入。它没有绝对作用，但可以帮助Google网页搜索作为补充。对于关键字，请用“，（逗号）”分隔多个关键字。

网站说明

<head>
  <meta name="description" content="ページの要約。130文字以内(目安)">
</head>

即使安装了此工具，也不会提高搜索排名等SEO效果，但是可以预期会对视图数量和标题产生影响。这是因为当页面在浏览器中发布时，它作为标题的辅助角色出现在标题下。因此，如果使用查看者正在寻找的关键字创建句子，则可能会有更多人点击它。

但是，这不是必需的，没关系。但是，最好进行设置，因为它会使查看者更容易看到该页面。安装时，请尝试以120-130个字符正确书写内容。

多个URL的解决方法

<head>
 <link rel="canonical" href="正規化するURL">
</head>

在某些情况下，会在同一站点上创建多个URL。例如，以下两个URL是同一站点。

http://www.example.com
http://www.example.com/index.html

但是，如果在同一页面上创建了不同的URL，则搜索引擎可能无法确定哪个是正确的URL。这是一个称为“重复内容”的问题。但是，如果内容相同，则需要统一评估。为了解决这个问题，我们将安装一个称为URL规范化的链接标记。 URL标准化使搜索引擎知道正确的站点URL。对此的措施是以下链接标记。

<link rel="canonical" href="統一させたいURLをここに書く">

它用作识别正确URL的很好的线索，而不是识别此处写的URL的指令。

SNS措施

OPG是一项功能，当在SNS（Twitter或facebook d）上共享站点时，可以精美地显示标题和图像。设置为头部的meta标签。换句话说，如果未设置此项，将无法在SNS上正确显示。

作为一种编写方式，它与content属性一起使用。

 <meta property="og:url" content="ページのURLを書きます。">
 <meta property="og:title" content="ここは、metaタグの「title」と同じとしてください。">
 <meta property="og:type" content="ページのタイプを書きます。websiteなど">
 <meta property="og:description" content="metaタグ「description」と同じ記載内容にしてください。">
 <meta property="og:image" content="画像のURL">
 <meta name="twitter:card" content="カード種類を書きます。大きく2種類あり、summaryとsummary_large_imageがあります。">
 <meta name="twitter:site" content="Twitterユーザー名(twitterのアカウントを持っている場合のみ書いてください。)">

Fabicon的名称

Fabicon是用于浏览器选项卡的小图标。例如，gmail的Fabicon如下。

使用以下链接标记进行指定。

<link rel="icon" href="faviconのURLをここに">

智能手机的图标显示

当您要在手机或平板电脑上显示此Fabicon时，请设置指定Fabicon的标签。

要在智能手机或平板电脑上显示这样的图标时，请进行以下设置。

对于iOS

<link rel="apple-touch-icon" href="./images/apple-touch-icon.png" sizes="180x180">

保持图标图像为正方形。另外，四个角会自动变圆。

对于Andoroid

<link rel="icon" type="image/png" href="./images/android-touch-icon.png" sizes="192x192">

外部CSS / Js文件

这是用于将CSS和js文件与HMTL相关联的链接标记。如果您将CSS或js创建为外部文件，则除非将其与HTML关联，否则它不会反映出来。以下是基本的书写方法。

对于CSS

<link href="@@@.css" rel="stylesheet">

对于js

<script src="@@@.js"></script>

对于js，它可以安装在头部，但也可以安装在主体中。由于js是在读取HTML之后运行的，因此如果在头部中进行描述，其反射速度可能会降低。因此，请将其放在主体的关闭标签之前。另外，请注意不要意外删除脚本的结束标记。

概要

感谢您阅读本文。希望您了解头脑的重要性。在大多数时候，当您刚开始学习时，您会专注于设计，习惯于编码，而不是关注head的功能方面。但是，由于此设置是与浏览器或搜索引擎进行通讯的一种方式，因此除非您正确理解该功能，否则目标用户可能不会收到该信息。特别是如果您想使用SNS与目标人员接触，则应了解SNS的元标记。

推荐文章[免费]我真正想要推荐的3所编程学校[实际参加]

[HTML]如何编写以及在head标签中的作用！对于SEO也很重要

什么是头？

头的作用是什么？

如何写头和SEO之间的关系

怎样写在脑子里

字符码规格

支持以前的IE版本

反应灵敏

禁止索引

禁用电话号码的自动链接

网站标题

关键字（可选）设置

网站说明

多个URL的解决方法

SNS措施

Fabicon的名称

智能手机的图标显示

外部CSS / Js文件

概要

撰写本文的人

在网站上搜索文章

新文章

程式设计

换工作/就业

SaaS /业务效率提高

什么是头？

头的作用是什么？

如何写头和SEO之间的关系

怎样写在脑子里

字符码规格

支持以前的IE版本

反应灵敏

禁止索引

禁用电话号码的自动链接

网站标题

关键字（可选）设置

网站说明

多个URL的解决方法

SNS措施

Fabicon的名称

智能手机的图标显示

外部CSS / Js文件

概要

也推荐这篇文章

撰写本文的人

在网站上搜索文章

热门文章

新文章

程式设计

换工作/就业

SaaS /业务效率提高