🌈사이트 만들기_Head

cho·2023년 11월 16일

⭐ SEO (Search Engine Optimization)

SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 이는 검색 랭크 개선이라고도 한다.

검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성한다. 검색 결과에 보이는 것은 바로 콘텐츠 색인이다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 수익으로 연결될 수도 있다.

<title>Cindy&#39;s Portfolio</title>
    <meta name="description" content="Portfolio for world-renowned software engineer Cindy"/>
    <meta name="author" content="Cindy"/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

⭐ Favicon (Favorite icon)

웹 사이트에 포함된 작은 아이콘으로, 브라우저의 주소 표시줄, 페이지 탭, 북마크 메뉴와 같은 위치에 표시된다. 일반적으로 파비콘의 크기는 16 * 16 픽셀이고 GIF, PNG 또는 ICO 파일 형식으로 저장된다.

파비콘은 사용자 경험을 개선하고 브랜드 일관성을 강화하는 데 사용된다. 예를 들어, 브라우저 주소 표시줄에 익숙한 아이콘이 표시되면 사용자는 자신이 올바른 위치에 있다는 것을 알 수 있다.

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

⭐ OG (Open Graph Data)

이는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 데이터 프로토콜이다.

	<meta property="og:title" content="현지의 포트폴리오" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="배포후 생성된 URL" />
    <meta property="og:image" content="배포 후에 생성된 이미지 URL" />

⭐ Google Fonts

무료 폰트를 사용할 수 있는 사이트

⭐ Font Awesome

무료 이미지를 사용할 수 있는 사이트

⭐ CSS link

    <link rel="stylesheet" href="css/style.css">

⭐ JavaScript link

    <script src="src/main.js" defer></script>

defer는 스크립트와 HTML이 동시에 로드되어 코드가 작동한다. defer 속성으로 로드된 스크립트는 페이지에 순서대로 로드된다. 또한 페이지 콘텐츠를 모두 불러오기 전까지는 실행하지 않으므로, 스크립트가 DOM의 위치에 의존하는 경우 유용하다.

⭐ HTML 전체를 한 눈에 보기_Head

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO -->
    <title>Cindy&#39;s Portfolio</title>
    <meta name="description" content="Portfolio for world-renowned software engineer Cindy"/>
    <meta name="author" content="Cindy"/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

    <!-- OG (Open Graph Data) -->
    <meta property="og:title" content="현지의 포트폴리오" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="배포후 생성된 URL" />
    <meta property="og:image" content="배포 후에 생성된 이미지 URL" />

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@200;400;600&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/4c7acac75d.js" crossorigin="anonymous"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">

    <!-- JavaScript -->
    <script src="src/main.js" defer></script>

</head>

cho

이전 포스트

CSS_요약

다음 포스트