Lighthouse 점수를 개선하는 방법 - 검색 엔진 최적화(SEO)

9310 단어 beginnerslighthousewebdevperformance


등대 시리즈의 첫 기사입니다 🎉🎉🎉

웹사이트의 Lighthouse 점수를 확인하는 방법을 모르십니까? 문제 없습니다. 제 마지막 기사How to Check Lighthouse Scores using Chrome or Firefox 를 가이드로 사용하세요.

이 게시물에서는 Lighthouse SEO 점수와 웹 사이트의 전반적인 가시성을 개선하기 위한 팁을 살펴보겠습니다.

검색엔진 최적화란 무엇인가요?



검색 엔진 최적화(SEO)는 단순히 관련 검색에 대한 가시성을 높이기 위해 사이트를 개선하는 프로세스를 의미합니다. SEO 점수가 높을수록 검색 결과에서 웹 페이지의 가시성이 높아집니다.

Lighthouse는 귀하의 웹사이트에 대한 다양한 감사를 수행하며 이러한 감사는 몇 가지 간단한 변경을 통해 통과할 수 있습니다. 그들이 무엇인지 알고 싶습니까? 계속 읽으세요.

제목 요소 추가



제목 요소를 추가하는 것은 Google과 같은 검색 엔진이 페이지가 검색과 관련이 있는지 결정하는 데 크게 의존하기 때문에 매우 중요합니다. 또한 스크린 리더 사용자에게 페이지 개요를 제공합니다. 제목 요소는 일반적으로 아래와 같이 index.html 파일의 헤드에 추가됩니다.

<head>
    <title>Linda Ojo</title>
</head>


필요한 메타 태그 추가



메타 태그는 웹 페이지에 대한 정보를 제공합니다. 메타 태그는 페이지 자체에는 나타나지 않고 페이지의 소스 코드에만 나타납니다. 우선 웹사이트에는 아래와 같은 메타 태그가 있어야 합니다.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //optimize your webpage for smaller screens
    <meta name="author" content="Linda Ojo">
    <meta name="description" content="Articles on frontend development written by Linda Ojo, Frontend Developer"> //included in search results to concisely summarize page content.
    <meta name="keywords" content="HTML, CSS, JavaScript, Frontend, Web Development">
</head>


Twitter 및 Facebook과 같은 소셜 미디어 플랫폼에서 웹 페이지 링크가 표시되는 방식을 사용자 지정할 수도 있습니다. 이것이 등대 점수에 영향을 미치지는 않지만 권장됩니다.

다음은 내 웹사이트에 대한 링크를 사용자 지정하는 데 사용하는 메타 태그입니다.

<head>
    <!-- Facebook, Whatsapp -->
    <meta property="og:site_name" content="Linda Ojo">
    <meta property="og:title" content="Linda Ojo's Personal website and Blog">
    <meta property="og:description" content="Articles on frontend development written by Linda Ojo, Frontend Developer">
    <meta property="og:image" content="logo.png">
    <meta property="og:url" content="https//www.lindaojo.com">

     <!-- Twitter -->
    <meta name="twitter:title" content="Linda Ojo's Personal website and Blog">
    <meta name="twitter:description" content="Articles on frontend development written by Linda Ojo, Frontend Developer">
    <meta name="twitter:image" content="logo.png">
    <meta property="twitter:url" content="https//www.lindaojo.com">
    <meta name="twitter:card" content="summary">
</head>


위의 메타 태그를 사용하여 Twitter의 내 웹사이트 링크는 다음과 같습니다.

대화형 요소의 적절한 크기 조정



링크 및 버튼과 같은 대화형 요소는 크기와 간격이 적절해야 합니다. 이는 검색 엔진이 모바일 친화적인 정도에 따라 페이지 순위를 매기기 때문에 매우 중요합니다.

이러한 요소는 최소 크기가 48x48픽셀이고 모든 방향에서 최소 8픽셀의 간격을 가져야 합니다.

링크에는 설명 텍스트가 있어야 합니다.



Lighthouse는 "여기를 클릭하세요", "이동", "시작", "더보기", "자세히 알아보기"와 같은 일반적인 링크 텍스트에 플래그를 지정합니다. 앵커 요소에 대한 설명 텍스트를 사용하면 검색 엔진이 콘텐츠를 이해하는 데 도움이 됩니다.

<!-- Don't  -->
❌ <p>To read more articles about JavaScript, <a href="/articles">click here</a>.</p> 

<!-- Do -->
✅ <p><a href="/articles">Read more JavaScript articles</a>.</p>


이미지에 대체 텍스트 추가



모든 이미지에는 짧은 설명 텍스트가 포함된 alt 속성이 있어야 합니다. 이미지가 장식 역할을 하고 유용한 콘텐츠를 제공하지 않는 경우 빈 alt=""속성을 제공합니다.

<!-- Do -->
<img src="background.png" alt=""> <!--decorative image -->
<img src="dancers.png" alt="4 female dancers in yellow dresses"> <!-- informative image-->


모든 화면 크기에 읽기 쉬운 글꼴 크기 사용



텍스트에 허용되는 최소 글꼴 크기는 12px입니다. 글꼴 크기가 12픽셀 미만인 텍스트는 대부분의 모바일 사용자가 읽기 위해 확대해야 합니다. 작은 글꼴이 필요한 극단적인 경우가 있습니다. 이러한 작은 글꼴은 페이지 텍스트의 40% 이상을 차지해서는 안 됩니다.

"hreflang" 링크를 사용하여 웹 사이트의 다른 버전 지정



hreflang 링크를 사용하면 검색 엔진이 사용자의 언어와 지역에 따라 웹사이트의 올바른 버전을 선택할 수 있습니다. Lighthouse는 페이지 헤드와 해당 페이지에서 hreflang 링크를 확인합니다response headers.

hreflang 링크는 웹페이지의 헤드에 추가되어야 합니다.

<link rel="alternate" hreflang="en" href="https://example.com" />    //English
<link rel="alternate" hreflang="es" href="https://es.example.com" /> // Spanish
<link rel="alternate" hreflang="de" href="https://de.example.com" /> // German


사용자가 언어를 선택할 수 있는 페이지의 경우 x-default 키워드를 사용하십시오.

<link rel="alternate" href="https://example.com" hreflang="x-default" />



위의 팁은 확실히 등대 SEO 점수를 높이고 인터넷에서 웹 사이트의 전반적인 가시성을 향상시킵니다.
AWS에서 위성 이미지 Landsat8의 데이터를 대량으로 다운로드하는 방법
[java][io][serialize] 객체 서열화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage