Meta-SEO

Nitigya Verma

SSE - Fullstack @ Airtel ?? | ICAEST'21 Representer ???| Part-time Comedian?? | LearnCodingWithHumour??♀?

发布日期: 2023年4月16日

Well, we are all aware about meta-tags and their functionalities. But do we really know about the working of META-TAGS ? What exactly is the data which meta tags send to google? How do google receive this data? How are pre-renders useful in website's ecosystem? And many more ...

So here, we are learning about all the meta-stuff in this article.

First and foremost, what are meta-tags ????

Answer is very simple : HTML tags used to provide additional information about a page to search engines and other clients.?

In meta-tags, we pass the data in key-values,

Simply passing through :

title : Lorem Ipsum

desc: Lorem Ipsum?is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

canonical: https://lorem/ipsum/

You can put your meta's in both ways - Static and Dynamic

Static is basically passing these tags through the <head> of index.html
Dynamic is passing tags through the help of - Helmet ( Refer the attached URL to learn more about Helmet )

Now the question arises how? which is very simple to understand

"" With the help of GoogleBot ""

Googlebot is the generic name for Google's two types of?web crawlers :

Googlebot Desktop : a desktop crawler that simulates a user on desktop.
Googlebot Smartphone : a mobile crawler that simulates a user on a mobile device.

Googlebot was designed to be run simultaneously by thousands of machines to improve performance and scale as the web grows. Googlebot can crawl the first 15MB of an HTML file or?supported text-based file . Each resource referenced in the HTML such as CSS and JavaScript is fetched separately, and each fetch is bound by the same file size limit. After the first 15MB of the file, Googlebot stops crawling and only considers the first 15MB of the file for indexing.

Now let's talk about Pre-rendering - What is pre-rendering?

By default, JS pre-renders every page. This means that JS?generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and?SEO .

Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called?hydration.)

Example of dynamic routing:

file pages/posts/[id].js will parse the content for each specific blog and expose it as posts/best-practices-in-life, posts/break-the-bad-habits, etc.

export default function Post({postData, blogger}) 
 return (
   <Layout user={blogger}>
     <Head>
       <title>{postData.title}</title>
     </Head>
     <article>
       <h1 className={utilStyles.headingXl}>{postData.title}</h1>
       <div className={utilStyles.lightText}>
         <DateLabel dateString={postData.date}/>
       </div>
       <div dangerouslySetInnerHTML={{__html: postData.contentHtml}}/>
     </article>
     <ShareFooter postData={postData}/>
   </Layout>
 )
}{

For pre-render testing, puppeteer is used.

Puppeteer is?a Node library which provides a high-level API to control headless Chrome or?Chromium?over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium. To learn about Puppeteer, click here .

Now mentioning the complete flow example for website and googleBot

There are also some robot tags available - Valid meta robots content values

Googlebot interprets the following?robots?meta?tag values:

noindex: prevents the page from being included in the index.
nofollow: prevents Googlebot from following any links on the page. (Note that this is different from the link-level?nofollow?attribute, which prevents Googlebot from following an individual link.)
noarchive: prevents a cached copy of this page from being available in the search results.
nosnippet: prevents a description from appearing below the page in the search results, as well as prevents caching of the page.
noodp: blocks the?Open Directory Project ?description of the page from being used in the description that appears below the page in the search results.
none: equivalent to?noindex, nofollow