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

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

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

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

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

什么是头?

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

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

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

头的作用是什么?

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

如何写头和SEO之间的关系

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

  1. 标题
  2. 描述
  3. 元元
  4. 链接

特别是,使用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的元标记。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。