This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Author: Mintimate

Blog: www.mintimate.cn Minxml’s Blog, just to share with you

Meta tags

What are Meta tags? This isn’t the metasverse or FB that’s been trending lately.

Meta tags, or Meta elements, are part of the HEAD tag in HTML. Typically used to specify page descriptions, keywords, and other metadata not provided in other HEAD elements, attributes. Indirectly participate in browser page rendering, or provide guidance to search engine crawlers (thus making search engines better indexed).

For HTML with HTML 4.01 and XHTML, there are four valid attributes: Content, HTTP-equiv, Name, and Scheme. Under HTML 5, there are now five valid attributes, adding charset. Http-equiv is used to simulate HTTP headers and embed metadata with name.

And we SEO optimization, is for SEO effective attributes, derived from the keywords, description and viewport.

SEO optimization

What is SEO optimization for? In summary, there are two main effects:

  • Let the search engine included, users can use the search engine search to your site.
  • Let your site’s search ranking improve, users can use search engines to find your site faster.

Some might say, why not just leave sitemap. XML at the home of the major search engines? So… The purpose that collects only commonly, rank and show effect looked luck.

SEO main factors: outside the chain of the site, the site’s links, the site’s location and content, the existence of the site, the site’s keywords, the site’s description. Among them, the first few items depend on what you write in the body tag, and the last few items are described in the Meta of our head tag, which can also improve the display effect and ranking.

viewport

The viewport tag, which should be familiar to anyone writing a responsive layout, has the format:

<meta name="viewport" content="Width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
Copy the code

Of course, you can customize the parameters inside the content, but the general template is like this. USES:

  • Mobile enlarged and width adaptive

Some search engine crawlers (E.G.Google) judge the suitability of a website by judging the page according to viewport. Therefore, this tag is best added:

description

Description tags, which use one sentence or paragraph to describe the content and information on a page; For example: the Nuggets.

<meta data-n-head="ssr" vmid="description" name="description" content="Nuggets is a community that helps developers grow. It's Hacker News for developers, Designer News for designers, and Medium for product managers. The technical articles of digging gold are edited by the technical masters and geeks gathered on rare earth to select the best dry goods for you, including: Android, iOS, front-end, back-end and other aspects of the content. Users can find the top stories from the tech world here every day. Meanwhile, nuggets also have boiling point, nuggets translation plan, offline activities, column articles and more. Even if you're a GitHub, StackOverflow, open Source China user, we believe you can get something out of it.">
Copy the code

Conducive to search engine crawls:

In my opinion, it’s best to have a short sentence that describes the main point of the story, preferably with key information, such as: nuggets, developers, product managers, and the community.

Let crawlers know what your site pages are doing, and then big data statistics to improve your site ranking.

keywords

Keywords tags, as the name implies, are keywords, keywords of website page design, convenient for search engines to enter keywords.

Like my own personal blog site:

Note the format here: Use half – corner commas to separate words

(Crawlers use split split?) .

Search engine background statistics, see what keywords users generally use to search your page, and then change:

In fact, after the website is included by the search engine, it is strongly recommended to check the Bing search report, and then give positive feedback to the keywords in the Meta of the article. Personally, Bing does a pretty good job of search and supports dynamic crawling on Vue. It is a pity that the market share is little, late into the bureau ~

Og tag

Another important meta category attribute is The Open Graph Protocol, which starts with The name og.

This label is quite special. The standard of H5 was determined in 2014, and the standard of H4 was established in 1994. The above meta attributes were basically determined in H4. But the OG tag is different. This one was introduced by Facebook in 2010 for social sharing.

Basic attributes

Basic attributes, corresponding to the basic content of the site:

  • og:title: Site page title.
  • og:type: Website and page type
  • og:image: Header diagram
  • og:url: Page address link

Like the og tag on my blog:

<meta property="" og: title" " content="Mintimate's Blog">
<meta property="og:description" content="Minxia's Blog contributes to you and me, mainly sharing Linux tutorials, but also sharing code design; Talk about Android, server and programmer life.>
<meta property=Og: "" image"," content="https://imagehost.mintimate.cn/index_img/od_banner.jpg">
<meta property="og:url" content="https://www.mintimate.cn/">
Copy the code

The og tag stands for: The Open Graph Protocol. The most useful thing is that when users use plug-in tools such as Sharing to share web pages on Weibo, Facebook or Twitter, the content will be presented according to the content specified in the OG protocol, so as to ensure that information sharing is more accurate and in line with the author’s thoughts.

It is easier to understand that when sharing, the outer chain card shows…

For example, QQ is an image set by referring to OG :image

Now, more and more search engines also support og (e.g. baidu supported crawling og tags in 2015).

Optional attribute

There are more optional attributes, including:

  • og:audio
  • og:description 
  • og:determiner 
  • og:locale
  • og:locale:alternate 
  • og:site_name
  • og:video 

I use the og:description tag to fill in the same content as description, which is easy to read when sharing.

If your site is a subsite of another project, use og:site_name to identify the parent site.

END

That’s all for this share. Do you also want to ask how to operate in Vue project? It’s a case by case analysis, but in terms of meta tag dynamic response, next time I’ll show you how to use the Meta-vue component.

Dig another hole ~ ~

However, Vue projects, if you do not do pre-render, write meta tags, depends on whether the search engine supports dynamic crawling… (Bing’s dynamic crawls work fine…)