• What’s going on in that front end head?
  • Andreea Macoveiciuc
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Jessica
  • Proofread by: Long Xiong, Liu Hanwen

What’s in the head tag in the front-end code?

Even if our SEO and marketing colleagues don’t ask for it, there should be a mandatory tag in our front-end code.

When I was preparing an SEO workshop to share with my team, I went through a list of tags THAT I thought we should use in <head>. But to my surprise, there were a lot of tags that didn’t appear in the real code, probably because they weren’t required.

So if you’re a front end person who wants to be good gay friends with marketing and SEO, or a product owner looking for something to quickly improve platform search performance, make sure you don’t miss the following tags and attributes in your code.

The language of the document — the lang tag

<html lang="En">...</html>
Copy the code

Google ignores the lang tag, but Bing and screen readers don’t, so it’s an important tag for accessibility and ranking. To be precise, Google is not ignoring it, but it is used to recognize document languages and provide translation services. But that’s not important for SEO.

Usually, the lang tag is included in <head>, but can also be used with other tags, such as <blockquote> or <p>. When the language of these elements (the language in the actual content) changes, you can use the lang tag.

Such as:

<blockquote lang="fr" cite="URL">Some french quote here</blockquote>
Copy the code

Hreflang label

We mentioned earlier that Google ignores the lang tag when retrieving documents in different languages, so what does Google use? The answer is the Hreflang tag!

<link rel="alternate" href="https://masterPageURL" hreflang="en-us" />
<link rel="alternate" href="https://DEVersionURL-" hreflang="de-de" />
Copy the code

What’s going on inside these labels?

The first line tells Google that the language used on the page is English and, more specifically, for our U.S. users.

The second line tells Google that if a user from Germany is browsing, it should load the page corresponding to the href attribute in the tag with hreflang= “de-de”.

As shown in the figure above, the Hreflang tag can be used in. It can also be used in Sitemap. This tag is useful if you have content in multiple languages and want to reduce the risk that users in a foreign country will get content in a mismatched language.

However, note that the lang and hreflang tags are reference information, not instructions. This means the search engine can still show the wrong version of the page.

Canonical tag

The Canonical tags are probably the most annoying and confusing of all, so here’s the most accessible explanation so you can understand what they do once and for all.

The Canonical tag looks like this:

<link rel="canonical" href="https://masterPageURL" />
Copy the code

What does it do? It tells the search engine that the URL added to the href attribute is the main page, or the set of repeating pages that are most relevant to the topic.

For example, dynamic urls are very common in a mall site. In dynamic urls, you can do this by adding things like? Parameter like category= or session ID to indicate the value that needs to be passed in the page.

When this happens, you need to tell Google which parameters should be indexed by the main page. You can do this by adding the Canonical tag and pointing it to the URL of the home page.

Note that all duplicate pages need to include this tag and point to the main page.

Robots meta tags

It is different from the robots.txt file. It is a tag that looks like this:

<meta name="robots" content="noindex, nofollow" />
Copy the code

What does it do? This tag tells the search engine robot how to crawl a page, index it or not, continue to crawl it or not to crawl it.

Unlike the lang tag and the robots.txt file, the Robots Meta tag is an instruction, so it provides strict instructions for search engine robots.

Possible values are as follows:

  • Noindex: Tells the search engine not to index the page.
  • Index: Tells search engines to index the page. This is the default, so you can skip it if you want the page to be indexed.
  • Nofollow: Tells the crawler not to continue to climb any links in the page or pass any link weights.
  • Follow: Tells the crawler to continue crawling the link on the page and pass the link weight (” juice “). It doesn’t matter if the page can’t be indexed.

Social meta tag: OG

OG stands for Open Graph Protocol, a technology that allows you to control what data is displayed when sharing pages on social media. Here’s what the label looks like:

<meta property="og:title" content="The title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://page.com" />
<meta property="og:image" content="img.jpg" />
Copy the code

The above four tags are required, but you can add more, and you can view the list here.

In the absence of these, you’ll probably hear some complaints sooner or later, because whenever a colleague shares a page, the image will be randomly selected if the OG :image tag is not specified.

Meta Title & Meta Description tags

To be honest, I think these are mandatory in <head>. But just in case, you can right click and check.

These two meta tags are important because they tell search engines and social platforms what the page is about, and they show up in the search results page. In addition, the title will appear in the browser TAB and in the bookmark when you add a bookmark.

Here’s what the label looks like:

<title>This is the page title<title />
<meta name="description" content="This is the meta description, meaning the text that's displayed in SERP snippets." />
Copy the code

Now, you may recall an old answer from Google, dating back to 2009, that the Meta Description tag does not help SEO. Still, they are the most convincing elements to click on a page, along with the Meta title and the page URL. So whether they help SEO or not, they are very important.

Meta tags for responsive design

The official name of this tag is ViewPort, and it looks something like this:

<meta name="viewport" content="width=device-width, initial-scale=1" />
Copy the code

Adding it to the/in the document makes the page responsive and renders it properly on mobile devices and tablets. As you’ve probably heard, Google scans and indexes mobile versions of websites first, with the goal of making the web more mobile-friendly.

Although it doesn’t technically turn your site into a mobile version, the search engine will refer to this tag if it doesn’t find a mobile-first design. So when m.site.com is missing, Google will scan the Web version, and ideally it should be able to find the ViewPort tag. Pages that do not support movement and response rank lower.

The label used to display the site icon

Your colleagues will be pleased because it enables the browser to display a nice icon or logo in a TAB next to the name of the site. The tag for adding favicon looks like this:

<link rel="icon" href="favicon-img.ico" type="image/x-icon" />
Copy the code

Images are best saved in.ico format, which supports this better than.png and.gif.

I think here can not translate, did not understand the author’s meaning. See what the proofreader says and I’ll change it.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.