Why Search Engine Optimization (SEO) is Necessary

🤔 Why is Search Engine Optimization (SEO) necessary? Is it really essential?

Beyond marketing and promotion, SEO is crucial for the ultimate goal.

The ultimate goal in creating content and web pages is to deliver high-quality information correctly to users. Even well-crafted content and well-written documents are meaningless if not read by users.

Indeed, SEO is an essential process. Content must be consumed to be truly complete. 😎 Isn't it satisfying when someone appreciates the hard work you've put in?

Moreover, accessibility, SEO, and performance optimization are all different but closely related. (If one part is weak, other parts may also become weak... 🪄)

Although it's difficult to know the exact algorithms of search engines, by undergoing the SEO process, you can make your web pages or content appear higher in search lists!

Factors Affecting SEO

🔎 Factors Influencing Search Engine Optimization (SEO)

• Page Title
• Proper Use of Meta Tags
• Use of Canonical Tags
• Mobile-Friendly Web
• Semantic Markup, Meaningful Document Creation, and Proper Use of Tags and Attributes for Links (a), Images (img), etc.
• Use of SSL (https) (http❌ | https✅)
• Core Web Vitals (LCP, FID, CLS) and Loading Speed
• Backlinks
• Regular Provision of Relevant High-Quality Content
• Click-through Rate Compared to Exposure

In summary, a document that is easy for search engines to understand and convenient for users to use is well-optimized for search engines.

SEO Methods

📌 1. Page Title <title>

The title tag is a child element of the head tag in an HTML document. It is displayed in the browser tab but not within the main content. The title tag should consist only of text, and titles dynamically generated via JS are also crawled. However, be mindful of loading speed when generating dynamically. It should be concise as it provides information about the webpage when using a screen reader, and appropriate titles are needed for each subpage.

📎 How to Write a Title

• Choose keywords that best represent the main content.
• Use specific and appropriate words for each page title.
• Avoid repetitive content.
• Consider screen reader users and write concisely, keeping in mind that it is displayed in the browser tab.
• Separators like hyphens (-), pipes (|), and colons (:) can be used.

Examples:

• Notice Board - Velog
• Notice Board | Velog
• Notice Board: Velog

📌 2. Proper Use of Meta Tags

Meta tags are included in the head tag of an HTML document. They are tags for search engines, including meta tags for social networks like Twitter and Facebook. They provide metadata through attributes like name and content.

📎 Types of Meta Tags

✔️ charset The standard for character sets is UTF-8. When set to UTF-8, all languages, including Korean, can be displayed on the webpage.

<meta charset="UTF-8">

✔️ name="viewport" This meta tag sets the criteria for how the page is displayed in the browser. It indicates whether the webpage is viewable on mobile devices. Remember that mobile-friendly websites score higher, such as responsive web designs.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

✔️ name="robots" Specifies whether the page should be shown in search results (index) or not (noindex), and whether to follow links on the page (follow) or not (nofollow). The nofollow attribute is often used in comment sections to prevent crawlers from following external site links entered by visitors, which could otherwise affect the evaluation of the page.

Multiple directives can be specified and separated by commas (,).

Valid directives include:

• all: Default. No restrictions on indexing or displaying. Has no effect if displayed.
• none: Same as noindex, nofollow.

Examples:

<meta name="robots" content="all">

<meta name="robots" content="index,follow">

<meta name="robots" content="noindex,follow">

<meta name="robots" content="index,nofollow">

<meta name="robots" content="noindex,nofollow">

✔️ name="description" Text that appears in search engine results. It describes the site.

<meta name="description" content="Introduction to 10 SEO Methods">

✔️ name="author" Indicates the author of the document.

<meta name="author" content="Kim Momo">

✔️ name="keywords" Many search engines, including Google, no longer reference this meta tag. Therefore, it is not necessary to write it. Although there was a general guideline to define about 10 keywords representing the content, many creators and marketers wrote too many keywords in this attribute, which was found to confuse search results, leading to the discontinuation of the keywords meta tag.

<meta name="keywords" content="SEO, Search Engine, Optimization, Web Performance Optimization, Search Engine Optimization">

📎 Open Graph & og Tag Types

og tags are used to create previews when sharing a webpage. The crawler visits the webpage first and creates a preview by crawling metadata. Originally created by Facebook, it is used by various sites like Twitter, Naver, and KakaoTalk.

✔️ Facebook, Naver, KakaoTalk, etc.

You can set previews to be shown when links are shared on Facebook, Naver, and KakaoTalk.

<!-- Web Page URL -->

<meta property="og:url" content="www.youtube.com">



<!-- Content Title -->

<meta property="og:title" content="YouTube">



<!-- Content Description -->

<meta property="og:description" content="Click here to view the link.">



<!-- Web Page, Content Type (e.g., blog, article, website) -->

<meta property="og:type" content="video">



<!-- Preview Thumbnail Image -->

<meta property="og:image" content="../images/thumb.png">



<!-- Site Name -->

<meta property="og:site_name" content="YouTube">

✔️ Twitter

Twitter has its own tags.

<!-- Twitter Card Type -->

<meta name="twitter:card" content="summary">



<!-- Content Title -->

<meta name="twitter:title" content="SEO Optimization Methods">



<!-- Content Description -->

<meta name="twitter:description" content="Introduction to Publisher's SEO Optimization Methods">



<!-- Preview Thumbnail Image -->

<meta name="twitter:image" content="../images/thumb.png">

Twitter card types include summary, summary_large_image, app, and player. The layout of the preview can be changed according to the card setting.

📎 etc

There are many other meta tags such as date: creation date, copyright: copyright, subject: document subject, location: location, publisher: publisher or company, refresh: refresh, etc. The commonly used tags are those listed above, and other meta tags can be added as needed.

📌 3. Canonical Tag

A canonical tag is used to indicate the main URL to search engines when multiple URLs are used on a single screen. For example, if the following URLs are used on the main page of the website, a canonical tag is set in the head of the HTML to designate a representative URL.

https://www.website.com/main?id=1

https://www.website.com/main?id=as200-21d5-1e401ad123

<link rel="canonical" href="https://www.website.com/main">

⚠️ If a noindex robots meta tag is included in the representative URL, search engines cannot crawl it even if a canonical tag is set, so be careful. More details can be found in the Google Search Center.

📌 4. Mobile-Friendly Web

With the widespread adoption of smartphones, mobile has become essential in daily life. It is undeniable that more users surf the web conveniently using mobile devices than desktops. Usability and high-level user experience on mobile are very important!

Although it may be considered outdated, if there is no dedicated app, a responsive web is highly recommended. (Viewing PC screens on smartphones is uncomfortable... It's natural to think this way.)

Also, using the meta name="viewport" tag to inform search engines that the site is mobile-friendly is a way to score high in optimization. Detailed information is well-organized here, so I'll attach a link.

Additionally, from a publisher's perspective, when building a responsive web, it's better to go from mobile -> tablet -> PC (Web). Responsive web design is generally simple on mobile. Applying all the fancy styles on PC and then moving to mobile to reset styles is less efficient than expanding from mobile to PC in terms of both work efficiency and web performance. Although it may seem trivial, even minor efficiencies contribute to performance improvement.

📌 5. Meaningful Document Creation and Proper Use of Tags

It's important to know the rules of semantic tags and write them correctly. Properly written documents contribute to accessibility and performance improvement. Proper use of heading tags (h1, h2, h3...) and accurate use of img and a tags are crucial from an accessibility perspective. The title and alt attributes should be used to describe what the link is, how it opens (e.g., opens in a new window), and what the image is. If the explanation is lacking, using the ir technique with blind (screen-out) text appropriately is necessary. However, excessive repetition and verbosity should be avoided. A good web document or content should have no difference in the information conveyed when viewed/heard/with or without CSS.

📌 6. Use of SSL (https)

https stands for HTTP Secure, an encrypted version of the HTTP protocol. It enhances the security of data transmission functions by applying SSL to HTTP, with added technologies to prevent virus infiltration, and is recommended by Google.

Google recommends using https:// for all websites whenever possible. The host name is where the website is hosted and usually uses the same domain name as that used for email. Google distinguishes between the www version and the non-www version (e.g., www.example.com or just example.com). When adding a website to Search Console, it's recommended to add both the http:// and https:// versions and both the www and non-www versions.

[Source] https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko

📌 7. Core Web Vitals (LCP, FID, CLS) and Loading Speed

Core Web Vitals are metrics that show the performance of a page based on actual user data. They consist of three items: LCP, FID, and CLS.

The reason page performance is important is due to the bounce rate. Naturally, the longer the load time, the higher the bounce rate.

• If the page load time increases from 1 second to 3 seconds, the bounce rate increases by 32%.
• If the page load time increases from 1 second to 6 seconds, the bounce rate increases by 106%.

[Source] https://support.google.com/webmasters/answer/9205520?hl=ko#about_data

📎 LCP The time it takes to render the largest visible content on the page from the moment the user requests the URL. It is important to render quickly because users know the URL is actually loading as the content appears.

• Good: 2.5 seconds or less
• Needs Improvement: 4 seconds or less
• Poor: More than 4 seconds

📎 FID The time it takes for a web page to respond to a user's action (e.g., link click, button tap).

• Good: 100 milliseconds or less
• Needs Improvement: 300 milliseconds or less
• Poor: More than 300 milliseconds

📎 CLS Cumulative Layout Shift. If a page loads with a jolt, users cannot quickly access what they want.