๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
ํ”„๋ก ํŠธ์—”๋“œ/HTML

Head ํƒœ๊ทธ

by alswlfl 2022. 11. 18.

Head ํƒœ๊ทธ

<head>ํƒœ๊ทธ๋Š” ๋ฌธ์„œ์ •๋ณด(๋ฉ”ํƒ€๋ฐ์ดํ„ฐ)๋ฅผ ๋‹ด๊ณ  ์žˆ์Œ

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ์ง์ ‘์ ์œผ๋กœ ๋ณด์ด์ง€๋Š” ์•Š์ง€๋งŒ, ์ˆจ์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ •์˜ํ•˜๋Š” ํƒœ๊ทธ๋“ค์ด ๋“ค์–ด๊ฐ€ ์žˆ์Œ

head ์•ˆ์— ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ

  • <title> 
    • ๋ธŒ๋ผ์šฐ์ €์˜ ์ œ๋ชฉ ํ‘œ์‹œ ์ค„์ด๋‚˜ ํŽ˜์ด์ง€ ํƒญ์— ๋ณด์ด๋Š” ๋ฌธ์„œ ์ œ๋ชฉ์„ ์ •์˜, ํ…์ŠคํŠธ๋งŒ ํฌํ•จ ๊ฐ€๋Šฅ
<title>NAVER</title>
  • <base> 
    • ๋ฌธ์„œ ์•ˆ์˜ ๋ชจ๋“  ์ƒ๋Œ€ URL์„ ์ง€์ •, ๋ฌธ์„œ์—๋Š” ํ•˜๋‚˜์˜ <base>์š”์†Œ๋งŒ ์กด์žฌ ๊ฐ€๋Šฅ
<base href="/assets/images/" />
  • <link>
    • ์š”์†Œ๋Š” ํ˜„์žฌ ๋ฌธ์„œ์™€ ์™ธ๋ถ€ ๋ฆฌ์†Œ์Šค์˜ ๊ด€๊ณ„ ๋ช…์‹œ, <link>๋Š” ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ์—ฐ๊ฒฐํ•  ๋•Œ ์ œ์ผ ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€๋งŒ, ์‚ฌ์ดํŠธ ์•„์ด์ฝ˜(”ํŒŒ๋น„์ฝ˜”๊ณผ ํ™ˆ ํ™”๋ฉด ์•„์ด์ฝ˜)์—ฐ๊ฒฐ ๋“ฑ ์—ฌ๋Ÿฌ๊ฐ€์ง€๋กœ ์“ฐ์ผ ์ˆ˜ ์žˆ์Œ
<!-- ํŒŒ๋น„์ฝ˜ ์„ค์ • -->
<link rel="shortcut icon" href="./favicon.ico" />

<!-- Style ์‹œํŠธ ์—ฐ๊ฒฐ -->
<link href="/style.css" rel="stylesheet">

https://favicon.io/favicon-generator/ 

 

Favicon.io - The Ultimate Favicon Generator (Free)

With Favicon.io you can quickly generate a favicon for your website for free!

favicon.io

  • <style>
    • ์Šคํƒ€์ผ ๊ทœ์น™์„ ๋‹ด๊ณ  ์žˆ์œผ
<style>
.title{
	color: blue;
}
</style>
  • <meta>
    • <base> <link> <script> <style> <title> ๊ณผ ๊ฐ™์€ ๋‹ค๋ฅธ ๋ฉ”ํƒ€๊ด€๋ จ ์š”์†Œ๋กœ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์—†๋Š” ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ๋‚˜ํƒ€๋ƒ„
<meta property="og:image" content="https://example.com/image.jpg">
  • <script>
    • ๋ฐ์ดํ„ฐ๋‚˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์›น ๋ฌธ์„œ์— ํฌํ•จํ•  ๋•Œ ์‚ฌ์šฉ
<script src="javascript.js"></script>

์˜คํ”ˆ๊ทธ๋ž˜ํ”„ Open Graph

์ฝ˜ํ…์ธ ์˜ ์š”์•ฝ๋‚ด์šฉ์ด SNS์— ๊ฒŒ์‹œ๋˜๋Š”๋ฐ ์ตœ์ ํ™”๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ๊ฐˆ ์ˆ˜ ์žˆ๋„๋ก ์„ค์ •

๊ธฐ๋ณธ์ ์œผ๋กœ ์›น์— ์„ค์ •ํ•ด์•ผํ•˜๋Š” og๋ฉ”ํƒ€ ํƒœ๊ทธ

<meta property="og: type" content="website">
<meta property="og: url" content="https://example.com/page.html">
<meta property="og: title" content="Content Title">
<meta property="og: image" content="https://example.com.image.jpg">
<meta property="og: description" content="Description Here">
<meta property="og: site_name" content="Site Name">
<meta property="og: locale" content="en_US">

<!-- ๋‹ค์Œ์˜ ํƒœ๊ทธ๋Š” ํ•„์ˆ˜๋Š” ์•„์ง€๊ณ , ํฌํ•จํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœ -->
<meta property="og: image:width" content="1200">
<meta property="og: image:height" content="630">