[HTML]什么是元标记?说明如何使用和编写基本的元标记[也有关SEO效果]

在学习HTML时,我倾向于将大部分时间都花在body标签内部进行编码,而忽略了加深对头部内部功能的了解,他说:“我不确定,但是它可以工作,所以让我们推迟。”是。

实际上,在开始学习HTML一年之后,我就学会了更多有关如何编写头脑的知识。在某种程度上,复制-&如果您将糊糊涂在头部内部,它将起作用,因此与其花费时间进行学习,标记和CSSのプロパティの使い方を学んだ方がよいという思考になりがちです。

考虑到学习效率,我仍然认为这是正确的。但是,这并不意味着可以忽略这种理解。的确,使用元标记是每个人都必须学习的方法之一。因此,我对其进行了总结,以便您可以通过阅读本文来获得有关元标记的最低知识。

什么是元标记?

HTML文件结构

首先,请记住HTML文件由三个主要组件组成。 head标签和body标签包含在html标签中,这是基本结构。

每个都有一个角色。

标签名 角色说明
html标签 置于DOCTYPE声明下并定义为html文档的标签。
头标签 此标签用于向外部提供信息并与内部协调,并且可以是公司的秘书。它向外部(搜索引擎,浏览器等)提供页面上的信息,并起到与CSS和javascript链接的作用。这部分不显示在浏览器中。
身体标签 您在浏览器中看到的所有元素都包含在此处。因此,网页设计是如何在此主体内部进行设计。

如何检查元标记

现在,让我们实际检查一下meta标签。右键单击网站上的任意位置,然后单击“查看页面源”。然后,将显示以下屏幕。您可以看到头部有一些meta标签。这里放置了一些元标记。每个都有其含义。

元标记的作用

通常,元标记本身主要负责外部和内部协调。例如,将信息传递给Google或其他搜索引擎,确定该页面是否可搜索,指定用于内部文件的字符代码,或指定智能手机的显示方法。我会。

对于网络制作公司,可能是导演。回答外部查询并创建工程师可以工作的环境。当然,无论导演有多好,如果提供的作品不佳,也不会得到很好的评价。网站本身也是如此。 meta标签只是一个辅助工具,只有当身体部位(即工程师)起作用时,它才能从google等搜索引擎中获得良好的评价。

meta标签本身可作为页面的附件。例如,作为SEO措施,您可以使用关键字设置和meta标签的description属性编写页面摘要,但将其写入meta标签不会直接影响SEO措施。毕竟,如何配置身体是最重要的。元标记设置的作用是有限的,并且其中一些元素应作为元素包括在内,但它对google没有太大的吸引力。另一方面,您需要知道,可以添加正文中没有的其他信息,这不是没有意义的。

如何编写元标记

编写元标记的基本方法如下。 meta标签没有结束标签。仅此一项是行不通的,因此您需要在内部编写一个称为“属性”的特殊指令。

通用中继标记

元标记的类型很多。但是您不必记住所有事情。但是,请注意,以下是您经常看到的元标记(功能将在后面描述)。

<meta 字符集="UTF-8">
<title> そのページのタイトル </title>
<meta 名称="description" content="ページの内容を端的に要約し書いてください。">
<meta 名称="keywords" content="キーワードを「,(半角コンマ)」で区切って指定してください。">
<meta 名称="viewport" content="宽度=设备宽度,初始比例= 1">

标题标签

现在,让我们离开meta标签,然后触摸title标签。它与meta标签一起放在头部。在此输入由搜索引擎或浏览器识别的页面标题。这与显示搜索结果中的描述一样重要。标题是用户单击的第一件事。没有规则,但请输入30个字符。另外,如果正文中设置的页面标题和标题中的页面标题不同,也没有问题。

主要的元标记类型

以下是您经常看到的元标记的类型。知道它也可以在设置中使用是个好主意。

主题 元标记 角色说明
字符码 meta 字符集 =“ utf-8” 指定字符代码的标签。创建日语站点时,这是必需的标签,应放置在头部的开始标签附近。 Web浏览器也在发展,由于字符代码而导致的乱码正在减少,但是请记住这一点。
页面摘要 meta名称=“描述” content =“描述页面内容的文本” 此安装不是必需的,但是如果您在Google上搜索,它将显示在结果标题下,因此以易于理解的方式编写页面的要点将导致用户点击。因此,需要用户在短时间内可以理解的约130个字符的吸引人的句子。但是,它对搜索排名没有直接影响。旨在告诉搜寻器和用户该页面的内容。
关键词 元名称=“关键字”内容=“指定关键字” 以下是一些描述页面的典型关键字。用半角逗号(,)分隔符写。据说Google在这里没有看到任何关键字,因此关键字设置没有多大意义,这也是一种预防措施。您可以在页面上放置无法描述的关键字。请注意不要过多增加关键字的数量。
对于响应 meta 名称=”viewport” content=”宽度=设备宽度,初始比例= 1″ 需要编写它才能在智能手机和平板电脑上实现响应效果。没有它,显示可能看起来很奇怪,并且很有用。

例如,标题标签的内容将用作搜索列表的标题,描述内容将显示在其下方。使其变得很好是一个很好的部分,因为用户可以看到并决定是否单击它。

元标记属性

meta标签具有可以为每个功能设置的属性和值。以下是一个示例。

属性名称 规定值 描述
字符集 utf-8 / shift_jis等。 指定文档的字符代码。它可以是上或下。如果要指定日语,则有utf-8 / shift_jis。
名称 描述 字符数约为100-130。当创建多个html文件时,说明将适用于每个文件。它显示在搜索结果标题的下方,并影响点击次数。 名称属性与content属性一起使用,其用法如下。 [元名称=”description” content=”@@@”]
关键字关键字 该设置不是强制性的,也没有SEO效果。因此,某些站点没有此设置。但是,如果您正在写作,则最好包括针对点的关键字设置和页面上无法设置的关键字。与content属性一起使用,content =”@@@”にキーワードを設定します。
视口 通过指定width = device-width,可以根据智能手机或平板电脑终端的屏幕宽度进行显示。将相关值与content属性一起使用,并按以下方式使用它: [元名称=”viewport” content=”宽度=设备宽度,初始比例= 1″]
机器人 设置搜索引擎的消息。搜索引擎可能会拒绝对页面进行爬网或建立索引,或者阻止搜索链接。与内容属性[meta 名称 =”robots” content=”编写noindex,按照[]进行操作,依此类推。这就是说,“不要索引该页面,而是巡视其他页面。”
应用名称 在HTML5中添加的属性中,名称=”application-name”会做。此设置仅用于创建Web应用程序,否则不使用。如果要使用它,请仅指定一份文档。 [元名称=”application-name” content=”Applicationの名前を書きます。”]
属性*设置OPG(一种在SNS(Facebook,Twitter等)上共享页面时正确显示的机制)。 og:标题 与content属性一起使用。示例:“元属性=”og:title” content=”与meta标签的[title]相同。”」
og:说明 与content属性一起使用。示例:“元属性=”og:description” content=”「description」と同じにする。”」
og:类型 指定网页的类型。 “元属性=“”og:type” content=”website”等等。还有其他类型的设置,因此请单击此处了解详细信息。属性=”og:type” の種類
og:site_name 与content属性一起使用,[meta属性=”og:site_name” content=”サイト名”]とします
og:网址 输入页面的URL。与内容属性“元属性=“一起使用”og:url” content=”ページのURLをここに書きます。” 」とします。

以下是将meta标签设置为示例的示例。

<head>
①基本的metaタグ
<meta 字符集="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> => これは、利用可能なIEの互換性のモードの指定で使います。
<meta 名称="viewport" content="width=device-width, initial-scale=1.0"> =>レスポンシブ対応
<meta 名称="robots" content="noindex,follow"> =>このページは巡回せず、他のページの巡回を促します。
 
②SEO対策の補助的措置
<title>サイトのタイトルをここに書く</title>
<meta 名称="keywords" content="キーワード1,キーワード2,キーワード3...body内で記載できなかったキーワードがあれば、入れておくと良いでしょう。">
<meta 名称="description" content="ページの要約。130文字以内(目安)">

③SNS対策
<meta 属性="og:site_name" content="サイト名をここに書きます。">
<meta 属性="og:title" content="上記titleと同じとする。">
<meta 属性="og:description" content="上記descriptionと同じとする。">
<meta 属性="og:type" content="website(トップページ)/article(下位ページ)">
<meta 属性="og:url" content="サイトのURL">
<meta 属性="fb:app_id" content="AppID">
<meta 名称="twitter:card" content="summaryあるいは、summary_large_imageの指定ができます。">
<meta 名称="twitter:site" content="サイトのURLを記載します。">
</head>

要激活您的Twitter卡,您必须使用Card Validator进行申请。

通过设置twitter:卡,它将以易于阅读的方式显示,如下所示。如果您拥有Twitter帐户,则最好进行设置,因为它对用户点击有效。

使用Google Search Console进行确认

有一种“ Google Search Console”作为检查meta标记是否已正确设置的方法。这是用于管理网站性能(包括如何识别和显示)的便捷工具。它提供有关网站操作的各种信息(有关Search Console,请参见“注册和使用Search Console的完整手册请参阅)。

在此,有一个名为“ HTML的改进”的项目。如果有错误,将在此处显示改进项目。

如果没有错误,它将告诉您“未检测到问题”,如下所示。检查它是否对站点进行管理是一个好主意。

元标记与SEO之间的关系

我想谈谈meta标签和SEO之间的关系。丰富元标记不会将网站提升到顶部。但是,可以很快得出结论,meta标签的作用是没有意义的。元标记用于将有关站点的信息传达给爬虫,并且还产生一种鼓励用户点击的效果。

当然,您不应该只专注于相信meta标签具有SEO效果。毕竟,应该优先考虑机体中内容的丰富化,这是向用户提供有意义的信息的行为,但是我想传达的是,元标签不应被高估,而应被低估。太多也是一个问题。

例如,据说标题标签(严格来说不是元标签)和描述标签的影响力相对较小,但它们仍发挥着重要作用。如果“ h”标签和标题标签的内容相同,则页面的内容将有效地传达给搜索引擎,最好在网站中包含重要的单词。这些也对显示搜索结果后搜索者单击哪个页面有很大影响。如果搜索者要查找的关键字在标题或描述中,则点击率将提高。特别是,Googlebot优先抓取重要页面,例如首页和首页。最好不仅充实正文中的信息,还充实meta标签中的信息,以便可以牢固地传递这些页面上的信息。

对于SEO,什么是SEO措施?|产生结果所需的知识,思维方式和实用方法摘要。

概要

(1)通常,元标记对SEO的影响相对较低。元标记负责将有关站点的信息正确传达给搜寻器。
(2)meta标签并不是为了实现SEO效果而编写的,尤其是有些标签增加了点击率,例如标题和描述,从而具有鼓励网站大量涌入的作用。
③使用meta标签,可以辅助未在体内传输的信息。

撰写本文的人

田中 陽介

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