语义分析识别与seo_带有（简单）语义HTML的SEO

最新推荐文章于 2024-09-27 10:11:28 发布

weixin_26746861

最新推荐文章于 2024-09-27 10:11:28 发布

阅读量196

点赞数

文章标签： python java

原文链接：https://medium.com/dev-genius/search-engine-optimization-with-semantic-html-66e2082f4396

版权

语义分析识别与seo

It’s simple — make subtle changes to your HTML and get rewarded big time by search engine algorithms!

很简单-对HTML进行细微更改，并通过搜索引擎算法获得丰厚的回报！

In my humble opinion, “<div>-only” programmers are making a terrible choice — they are jeopardizing the SEO of their website and their own sanity. Semantic HTML takes very little time to learn and implement, with massive upside: your search engine results will improve!

以我的拙见，“仅<div>”程序员正在做出一个糟糕的选择-他们正在危及其网站的SEO和自身的理智。语义HTML 几乎没有时间学习和实施，但有很大的发展空间：您的搜索引擎结果将得到改善！

非语义元素-危险！ (Non-semantic elements — danger!)

<div> and <span> are elements that are considered non-semantic — that is, they provide no meaning to the browser about the content they contain. The <div> element represents a generic block-level element, while the <span> element represents a generic inline-level element.

<div>和<span>是被视为非语义的元素，也就是说，它们对浏览器所包含的内容没有任何意义。 <div>元素表示通用的块级元素，而<span>元素表示通用的内联级元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Not-so-semantic Website</title>
</head>
<body>
  <div class="header">
    <div class="logo">
      My Blog
    </div>
    <div class="navbar">
      Navbar
    </div>
  </div>
 
  <div class="blog-container">
    <div class="blog-story--1">
      <span>Story 1</span>
    </div>
  
    <div class="blog-story--2">
      <span>Story 2</span>
    </div>
  
    <div class="blog-story--3">
      <span>Story 3</span>
    </div>
  </div>
 
  <div class="footer">
    Footer
  </div>
</body>
</html>

Exercise caution when using these non-semantic elements. Try to replace them with semantic ones. Why?

使用这些非语义元素时请多加注意 。尝试用语义替换它们。为什么？

Search engines prefer pages with semantic elements
搜索引擎更喜欢带有语义元素的页面
Screen readers take advantage of the structure that semantic elements bring, so the visually impaired population can access your website
屏幕阅读器利用了语义元素带来的结构，因此视障人士可以访问您的网站
Better developer experience
更好的开发者体验
There is no difference in using a semantic element over a <div>
在<div>上使用语义元素没有区别

语义元素 (Semantic elements)

Semantic elements can replace <div> and <span>, but they should be used in logical situations. There are many, many semantic elements — there is likely one to fit your need!

语义元素可以代替<div>和<span>，但应在逻辑情况下使用。语义元素很多， 很可能满足您的需求 ！

内容切片元素 (Content sectioning elements)

There are different categories of semantic elements. Firstly, there are content sectioning elements. These represent major sections of your document structure, such as headers, individual articles, and footers:

语义元素有不同的类别。首先，有内容分段元素 。这些代表文档结构的主要部分，例如页眉，单个文章和页脚：

<header> contains the components you would find at the top of a page — navbar, logo, searchbar, login button, etc.
<header>包含您可以在页面顶部找到的组件-导航栏，徽标，搜索栏，登录按钮等。
<nav> contains the navbar
<nav>包含导航栏
<main> should contain the single most important component on the page, e.g. the hero section of a landing page
<main>应包含页面上最重要的单个组成部分，例如登录页面的英雄部分
<section> contains a standalone section of a webpage
<section>包含网页的独立部分
<article> is most commonly used for individual blog posts or stories
<article>最常用于单个博客文章或故事
<aside> represents content that may not be directly related to the central point of the document
<aside>表示与文档的中心点可能不直接相关的内容
<footer> is used for the footer
<footer>用于页脚

Immediately, we can improve our previous not-so-semantic HTML by using these elements:

立即，我们可以使用以下元素来改进以前的非语义HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A-little-bit-more-semantic Website</title>
</head>
<body>
  <header class="header">
    <div class="logo">
      My Blog
    </div>    <nav class="navbar">
      Navbar
    </nav>
  </header>
 
  <main class="blog-container">
    <article class="blog-story--1">
      <span>Story 1</span>
    </article>
  
    <article class="blog-story--2">
      <span>Story 2</span>
    </article>
  
    <article class="blog-story--3">
      <span>Story 3</span>
    </article>
  </main>
 
  <footer class="footer">
    Footer
  </footer>
</body>
</html>

标题元素 (Heading elements)

You’ve seen these ones before. But there are some rules that you must follow for optimizing search engine results:

您之前已经看过这些。但是，您必须遵循一些规则来优化搜索引擎结果：

<h1> should only be used once on the entire page
<h1>只能在整个页面上使用一次
<h2> should be used for headings immediately subordinate to <h1>
<h2>应该用于紧随<h1>的标题
<h3> should be used for headings immediately subordinate to <h2>
<h3>应该用于紧随<h2>的标题
… and so on until <h6>
…依此类推，直到<h6>

You should not skip heading numbers. For example, do not use <h1> and <h3> without using <h2>. Some people choose specific headings for their font-size. Don’t do this. Your HTML has just lost its meaning. Remember! Your HTML dictates the structure and meaning of the code, while your CSS is solely in charge of styling it — even if you may have an <h2> that’s larger than an <h1>, you must still follow the rules!

您不应跳过标题编号。例如，如果不使用<h2>，请不要使用<h1>和<h3>。有些人根据其字体大小选择特定的标题。 不要这样做 。您HTML刚刚失去了意义。记得！您HTML决定了代码的结构和含义，而CSS仅负责样式设置-即使您的<h2>大于<h1>，您仍然必须遵守规则！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Almost-semantic Website</title>
</head>
<body>
  <header class="header">
    <div class="logo">
      <h1>My Blog</h1>
    </div>    <nav class="navbar">
      Navbar
    </nav>
  </header>  <main class="blog-container">
    <article class="blog-story--1">
      <h2>Story 1</h2>
    </article>
  
    <article class="blog-story--2">
      <h2>Story 2</h2>
    </article>
  
    <article class="blog-story--3">
      <h2>Story 3</h2>
    </article>
  </main>  <footer class="footer">
    Footer
  </footer>
</body>
</html>

… 还有很多！ (… And many more!)

According to MDN, there are over 100 semantic elements available for use. Areas where semantic HTML is also extremely important in are images, forms, and tables. I do plan on covering these in depth next week, but if you are still interested, be sure to check out the wonderful section that MDN has on semantic HTML!

根据MDN，有超过100个语义元素可供使用。语义HTML也非常重要的领域是图像，表单和表格。我确实计划下周深入介绍这些内容，但是如果您仍然有兴趣，请务必查看MDN关于语义HTML的精彩部分！

关于开发人员经验的话 (A word on developer experience)

The <div> element is generic — it is tempting to use it as one’s “first choice” of HTML elements. All too often, I see HTML documents that use only <divs>!

<div>元素是通用的-诱人将其用作HTML元素的“首选”。我经常看到仅使用<divs>HTML文档！

However, think about what happens two months later when you have to add content to your webpage. Reading a page full of <div>’s is a nightmare. It would be so very easy to get lost on the page, not knowing what exactly a <div> represents.

但是，请考虑两个月后当您必须向网页中添加内容时发生的情况。阅读充满<div>的页面是一场噩梦。如果不知道<div>的确切含义，那么很容易在页面上迷路。

So using semantic elements also has the benefit of making it easier for developers to follow the structure of their own code. It would be much easier to — say — figure out that you are reading an article because you used an <article> element or knowing that you are tinkering with your navbar because you used a <nav> element.

因此，使用语义元素还具有使开发人员更容易遵循自己的代码结构的好处。弄清楚，例如，您正在阅读文章是因为您使用了<article>元素，还是知道您正在修改导航栏是因为您使用了<nav>元素，要容易得多。