# 3/11 Search Engine Optimization
###### tags: `experience_sharing` `electrical_system` `NTURT`
##### Author: @andre-liang

## Frontend Evolution

### Static Page

Example: https://www.spacejam.com/1996/

1. Lack interactivity.
2. Hard to maintain.

e.g. raw HTML, JQuery.

### Single-Page Application

Example: https://ahfarmer.github.io/calculator/


1. Interactivity through state management.
2. Scalability through Component & Build tools.
3. Poor SEO (unfriendly to web crawler).

e.g. React, Angular, Vue.

### Server-Side Rendering
1. Pre-render user view on server.
2. Great SEO
3. Fast load time

e.g. Next.js(React), Gastby(React), Nuxt.js(Vue).

## Google Search Console

https://search.google.com/search-console/about

~~Vendor Lock~~

### Authentication


#### HTML tag

<meta name="google-site-verification" content="m0P1Lsy3xq5qQ88rESu0nzvo2RkWDCV-KGVxe_lit_Y" />

### Submit Sitemap


<?xml version="1.0" encoding="UTF-8"?><sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://pdaowebsite.gatsbyjs.io/sitemap-0.xml</loc></sitemap></sitemapindex>

### Traffic


## Optimization

No clear answer, use sketchy tools.

https://smallseotools.com/website-seo-score-checker/

Some common practice:

### Meta Data

<title>2023 PDAO - 臺灣大學資管系學生會</title>
<meta charSet="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="全名 Programming Design and Optimization ，是國立臺灣大學資訊管理學系不分年級的大型程式競賽。" />
<meta name="keywords" content="PDAO Programming Design and Optimization" />
<meta name="author" content="臺大資管系" />

### Proper \<h1> and \<h2> page structure

Help the crawler to understand the structure of the webpage.

### Modern Image Features

Responsive Size for different devices & loading placeholder (implemented by modern framwork).

Alt text for images.

### Short load time

### Add icons

### Link from other website