본문 바로가기

openipc.kr

구글 최적화 점검 [SEO] 라이트 하우스와 코어 웹 바이탈

라이트하우스와 코어 웹 바이탈라이트하우스와 코어 웹 바이탈은 [ 구글 최적화 점검 ]을 하기위해 웹 성능을 측정하는 측정 항목과 측정 도구입니다. 검색 상위 노출을 하기 위해 필수 항목입

everydayhub.tistory.com

티스토리 블로그 스킨 꾸미기 블로그 수정에 유용한 코드와 팁 자료 모음

티스토리 블로그 스킨 꾸미기티스토리 블로그를 운영하면서, 블로그의 스킨을 자신만의 스타일로 수정하는 것은 블로그의 개성을 살리고, 방문자에게 더 나은 사용자 경험을 제공하는 작업입

everydayhub.tistory.com

티스토리 검색엔진 최적화 63

[ Async와 Defer 활용법 ] 검색엔진 최적화를 위한 자바스크립트 로딩 제어 페이지 로딩 속도 향상을 위한 Async와 Defer 사용법검색 엔진 최적화 로딩 제어검색엔진 최적화를 위해 페이지 로딩 속도를 향상시키는 작업은 필수적입니다. 이 글에서는 자바스크립트의 로딩 동작을 제어하여 검색엔진 최적화에서 최초 속도를 향상시키는 방법으로 async와 defer를 사용하는 방법입니다.async 와 deferasync 와 defer를 사용하게 되면 페이지가 로딩되는 속도를 제어할수 있습니다. 중요한 코드와 차후 실행되도 상관 없는 코드를 구분해서 순차적으로 로딩을 제어해서 최초 페이지가 로딩 되는 속도에 제어합니다.먼저 실행하지 않아도 상관없는 코드를 동시에 로딩시 실행하게 되면 그 실행 시간만큼 페이지가 로딩 되는데 소요됩니다.asyncasync는 자바스크립트를 비동기적으로 로드하는..

2024. 10. 27.

[ 검색엔진 최적화 ] 너무 길거나 짧은 Meta Description의 문제 Meta Description 길이 160자 이내로 제한하기의 중요성Description의 문제검색엔진 크롤러가 페이지를 크롤링 후 description을 표시할 때, 내용이 너무 길면 잘리고 너무 짧으면 불필요한 텍스트가 추가되어 검색 최적화에 좋지 않고 너무 길거나 짧은 Meta Description의 문제가 발생합니다. 이를 해결하기 위해 160자 이내로 description을 제한하는 스크립트를 사용할수 있습니다.description 역할검색엔진 크롤러가 검색 페이지를 크롤러 후 검색 페이지에 표시하게 될 경우 description의 내용을 화면에 출력하게 됩니다. description 내용이 너무 길게 작성되면 일부분이 잘려서 출력이 되며 너무 적은 경우는 불필요한 텍스트가 추가되어 글의 주제와..

2024. 10. 25.

검색 최적화 로딩 속도 향상 방법 [ DNS-prefetch ]를 사용 방법 로딩 속도 최적화중 DNS 최적화와 검색 엔진 속도 향상 방법로딩 속도 향상 방법DNS (도메인시스템, Domain Name System)은 인터넷에서 사용되는 주소체계입니다. 컴퓨터는 사람이 이해할 수 있는 도메인 이름(예: example.com)을 컴퓨터가 이해할 수 있는 IP 주소(예: 192.0.2.1)로 변환해 주는 역할을 합니다. DNS 최적화는 검색 엔진 속도를 최적화하는 방법 중 하나입니다.검색 엔진 최적화에서 속도는 외부 참조 사이트를 연결할 때 많은 부하를 받게 됩니다.브라우저가 페이지에 접속할 때 참조해야 하는 외부 사이트의 정보는 접속 시간과 해당 요소를 불러오는 시간을 포함합니다. 따라서 접속 지연이 발생하면 검색 엔진 최적화와 로딩 속도에 부정적인 영향을 미칠 수 있습니다.로딩 ..

2024. 10. 25.

HTTP 상태 코드 404,301,200.. 코드등 전체 에러 코드의 종류와 설명 웹사이트 상태 코드 1xx부터 5xx까지의 오류 분석HTTP 상태 코드HTTP 상태 코드를 통해서 우리는 서버와 클라이언트의 문제점을 쉽고 간단하게 파악할 수 있습니다. HTTP 상태 코드는 개발자 및 운영자가 관리하는 사이트에 대한 에러 상태를 구분해주기 때문에 어떤 부분에서 문제가 발생했는지를 관리자에게 알려주고 그 부분에 대한 수정 작업을 쉽게 할 수 있는 방법입니다.HTTP 상태 코드가 가지고 있는 의미를 알아보고 그에 대한 정보를 정리했습니다. HTTP 상태 코드는 크게 5가지 부분으로 나누어지며, 그중 가장 많이 사용하는 코드 위주로 설명한 내용입니다. 참고하시면 코드 수정 작업에 좀 더 구체적인 접근이 될 거라 생각됩니다.정보 1xx이코드는 임시로 서버가 응답을 했을경우 나타내는 HTTP 상..

2024. 10. 25.

[ 자동 글 목록 작성 ] 자동으로 글 목록 작성해주는 TOC 와 JS 사용 방법 TOC 플러그인과 JS 코드 블로그 글 목록 자동화 방법과 비교자동 글 목록 작성하는 방법과 비교블로그 글을 작성할 때 자동으로 글 목록을 작성해주는 코드를 사용하면 편리하고 빠르게 글을 구조화 할수 있습니다. 대부분 자동 글 목록 작성에 많이 사용하는 TOC 와 직접 작성한 JS의 사용방법과 2가지의 코드를 비교하는 시간을 가져 보겠습니다.자동 글 목록 작성 TOC JS 설치 방법jQuery TOC JS 다운로드먼저, 쉽게 글 목록을 작성해주는 jQuery TOC 플러그인 사용방법을 알아보겟습니다. 이 플러그인을 사용하기 위해 필요한 파일을 다운로드해야 합니다. 아래 링크에서 Download 버튼을 클릭하여 jquery.toc.min.js 파일을 다운로드합니다.HTML 설정다운로드한 파일을 사용하기 위..

2024. 10. 24.

블로그 꾸미기 제목에 색 넣고 글을 CSS로 개성적있게 글 꾸미기 CSS로 블로그 글의 가독성을 높이는 블로그 꾸미기블로그 꾸미기블로그는 개인의 생각과 아이디어를 표현하는 공간입니다. 이 공간을 잘 꾸미는 것은 단순히 디자인적 요소를 넘어, 독자가 내용을 쉽게 이해하고 흥미를 느끼게 하는 데 중요한 역할을 합니다. [ 블로그 꾸미기 ]는 글의 전반적인 품질을 높일 수 있는 효과적인 방법입니다.이를 통해 독자에게 매력적인 시각적 효과를 제공할 수 있으며, 정보 전달의 명확성을 높이는 데 효과가 있습니다.제목 꾸미기H2 제목을 활용하면 글의 주제를 간결하게 전달할 수 있습니다. H3, H4 소제목은 세부 내용을 체계적으로 정리하여 독자가 필요로 하는 정보를 빠르게 찾을 수 있도록 도와줍니다.그러나 소제목의 크기나 스타일이 시각적으로 구분되지 않을 경우, 전체 글의 가독성이..

2024. 10. 24.

[ 검색엔진 최적화 ] 이미지 최적화 자동 LAZY 속성 추가 방법 Lazy Loading 속성 자동 추가 방법으로 웹사이트 성능 향상시키기자동 LAZY 속성 추가 방법Lazy loading은 웹페이지 로딩 속도에서 이미지 최적화 하는 방법으로, 이미지를 필요할 때만 로드하여 초기 로딩 시간을 단축시키고 자원을 절약합니다. 이 방법은 페이지 로딩 시 불필요한 자원을 지연시켜 사용자 접근성을 향상시키며, HTML 코드에 loading="lazy" 속성을 추가해 구현할 수 있습니다.이 속성은 브라우저가 이미지가 화면에 보일 때만 로드하도록 하여 성능을 개선합니다. 이를 통해 웹페이지의 효율성을 높이고, 빠른 로딩 속도를 유지할 수 있습니다.이미지 최적화 LAZY 속성LAZY는 웹페이지가 로딩시 이미지와 다른 요소를 필요한 시점에서 로드되게 하는 코드입니다.이미지를 최적화하는..

2024. 10. 24.

[ 검색엔진 평가 확인법 ] 내 글의 평가를 확인하는 3가지 방법 내 글이 검색엔진에서 어떻게 평가되는지 확인하는 쉬운 방법작성한 글이 검색엔진이 어떻게 평가하는지 확인하는 [ 검색엔진 평가 확인법 ]에 대해 자료입니다. 먼저, 글을 작성한 후 1-2일 내에 검색엔진에서 색인 여부를 꼭 확인하고, 이후 색인이 되었다면 노출 상태를 확인합니다. 사이트 주소로 검색하여 색인 상태를 직접 확인하고, 작성한 글의 정확한 제목으로 검색하여 노출 상태를 파악합니다. 핵심 키워드로도 검색하여 검색엔진 최적화를 평가하며, 문제가 있을 경우 조치를 해야 합니다.검색엔진 평가 확인법이번에 다를 내용은 검색엔진이 평가한 자신의 글의 검색평가를 확인해 보는 방법입니다.글을 작성하면서 항상 궁금한 것은 내가 작성한 글이 검색엔진 또는 다른 사람들이 어떻게 판단하고 객관적으로 평가를 하고 있는..

2024. 10. 22.

[ 폰트 최적화 ] 로딩 속도와 폰트로 발생하는 레이이웃 변경 방지 방법 웹사이트 로딩 속도 개선을 위한 폰트 최적화 방법과 실용적인 적용 방법폰트 최적화 방법폰트 최적화는 페이지 로딩 속도와 레이아웃의 변경을 개선하는 데 중요한 요소입니다. 인라인 CSS로 폰트를 빠르게 로드하고, 외부 폰트 사이트를 미리 연결하며, 기본 시스템 폰트 사용, WOFF2 폰트 적용, 필요한 문자만 포함하는 방법으로 로딩 시간을 단축합니다. font-display로 폰트 로딩 방식을 조정하고, font-size-adjust로 레이아웃 변경을 최소화합니다. 이러한 최적화로 검색엔진 성능을 향상 시킬수 있습니다.검색엔진 최적화 중에서 폰트 최적화 방법에 대한 자료입니다. 폰트가 페이지에 늦게 로드되면 텍스트를 렌더링하는 데 지연이 발생하며, 그로 인해 최대 렌더링 시간(LCP)과 누적 레이아웃 변경..

2024. 10. 22.

블로그 글 작성시 블로그 내부.외부 링크 설정하는 방법 검색엔진 최적화(SEO)를 위한 효과적인 내부 외부 링크 설정 방법블로그 내부.외부 링크 설정 방법블로그의 내부 및 외부 링크를 활용하면 블로그 글에 추가 자료를 제공하고 정보 흐름을 개선할 수 있습니다. 내부 링크는 페이지 간 자연스러운 연결을 도와 정보 접근성을 높이며, 외부 링크는 신뢰성을 강화해주며 SEO 최적화와 글의 구조화에 유리하고, 티스토리 플러그인과 에디터 상단 버튼을 통해 쉽게 설정할 수 있습니다. 주의할 점은 연관성 없는 링크 사용을 피하고, 글과 관련된 정보만 링크하는 것입니다. 글을 작성할 때, 글에 내부 및 외부 링크를 걸어 주면 사용자에게 더 많은 자료를 제공해 줄 수 있습니다. 글의 내용과 연관된 정보를 내부, 외부 링크를 통해 연결해 주면 정보의 흐름을 자연스럽게 안내할 수..

2024. 10. 22.

티스토리 인용,리스트를 사용해서 블로그 글 꾸미기 [인용,리스트 CSS 코드] 인용 및 리스트 스타일로 정보 전달 개선하기 위한 블로그 글 꾸미기블로그 글 꾸미기인용과 리스트는 글을 풍부하게 하고 구조적으로 만드는 데 많이 사용하는 블로그 글 꾸미기 방법입니다. 인용은 신뢰성을 높이고 검증을 도와주며, 리스트는 정보를 체계적으로 정리하고 강조하는 데 도움이 됩니다. CSS를 활용하여 인용과 리스트를 자신만의 스타일로 꾸미면 시각적 효과를 추가할 수 있습니다.블로그 글을 작성할때 글을 개성적으로 보이기 위해서 블로그 글 꾸미 작업을 많이 합니다. 특히 글의 인용과 리스트는 글을 다채롭게 작성하기 위해 많이 사용하는 요소 중 하나입니다.인용 리스트 활용 글 꾸미기인용과 리스트는 글을 다채롭게 작성하기 위해 많이 사용하는 요소 중 하나입니다. 인용은 다른 사람의 자료를 인용할 때 주로 ..

2024. 10. 22.

[ 콘텐츠 최적화 작업 ] 글 작성시 글자 색상 최적화및 주의 사항 #666 흐린 글자 색상에서 발생할 수 있는 접근성 문제 해결법글자 색상 최적화블로그를 운영하다 보면 기본적으로 제공하는 스킨을 사용시 글자 색상에서 주의 해야할 사항이 발생하게 됩니다. [ 글자 색상 최적화 ] 에서 문제가 발생합니다. 기본 스킨을 그대로 사용하게 검색엔진 최적화 및 접근성에서 지적사항이 발생합니다. 그 이유는 글자의 색상이 너무 흐리다고 지적합니다. 더욱이 이상한것은 기본적으로 글자의 색상을 #666 이상으로 흐리게 지정하고 !important를 지정해 놓은 경우입니다.왜 이렇게 지정할가요? 접근성에서도 문제가 있고 시력이 좋지 않은 사용자가 글을 읽을 때도 불편한 #666 이상의 흐린 색상을 고집하는 이유?!important가 붙은 스타일은 다른 모든 스타일 규칙보다 우선 적용됩니다.왜 굳이..

2024. 10. 22.

자동 내부 외부 링크 설정으로 블로그 품질 향상하기 [ 백링크도 자동설정 ] 자동화된 링크 추가로 블로그 체류시간 늘리기자동 내부 외부 링크 생성 방법블로그를 작성할 때, 내부 링크와 외부 링크를 자동으로 설정해주는 자동 내부 외부 링크 코드입니다. 외부 링크는 백링크 용입니다. 백링크 요소를 적절히 활용하게 되면 사이트의 품질을 높일수 있는 방법이기도 합니다. 또한 링크를 통해 방문자에게 더 많은 정보를 제공하는 데 유용합니다.내부와 외부 링크를 설정해 주는것으로 방문자의 체류 시간을 늘리고, 검색 엔진이 블로그 내용을 보다 잘 이해하고 색인하는 데 도움을 줄수 있습니다.특히, 검색 엔진 최적화(SEO)에서도 내부와 외부링크는 중요한 역할을 합니다. 백링크는 다른 사이트로부터의 신뢰도를 높이는 데 기여하여 사이트 품질을 개선하는 효과가 있습니다.내부 외부 링크의 불편한 설정하지..

2024. 10. 20.

블로그 글 페이지 주소 문자 숫자 설정시 장단점 비교 SEO 최적화를 위한 페이지 주소 설정시 문자와숫자중에서 어떤 것이 좋을까?페이지 주소 문자 숫자 설정블로그에 글을 작성하고 나서 SEO 최적화 를 위해서 다 작성된 콘텐츠의 [ 페이지 주소는 문자 숫자]중 어느것이 좋을가요? 쉬우면서도 헷갈리수 있는 문제 입니다.먼저 자료를 정리해 본 결과 많은 SEO 관련 기업과 사이트에서는 포스트 주소를 문자로 지정하라고 권고 하고 있습니다. 심지어는 문자로 지정하지 않으면 SEO 테스트에서 마이너스 점수를 부가 하기도 합니다.구글 SEO 자료를 찾아 보니까. " 포스트 주소의 정보를 가지고 검색에 영향을 주지 않는다" 라고 명시되 있습니다.왜 검색 관련 전문 사이트들은 페이지 주소를 문자로 표시하는 것이 검색 우선 순위에는 반영이 되지 않는데도 사용하는것이 좋다고..

2024. 10. 20.

[ LCP 속도 최적화 ]콘텐츠 표시 시간 LCP 속도 향상을 위한 이미지 최적화 이미지 활용으로 페이지 로딩 시간 단축하기LCP 속도 최적화검색엔진 최적화 작업 중 LCP 속도 향상을 위해 이미지를 타겟으로 사용하는 방법입니다. 검색 엔진의 최적화 작업 중 LCP는 최초 로딩 중 가장 큰 콘텐츠의 로딩 속도입니다. 검색엔진 최적화 속도는 측정 대상인 콘텐츠의 로딩과 연관이 있기 때문에 이미지의 최적화를 통해 로딩속도를 향상시키는 방안입니다.LCP 속도 향상을 위해 이미지 활용방법이미지를 활용해서 LCP를 최적화 하는 방법입니다.LCP 정의LCP(최대 콘텐츠 표시 시간): 페이지 로딩 시 가장 큰 콘텐츠가 표시되는 시간.LCP 최적 이미지 활용이미지 타겟: LCP 속도 향상을 위해 이미지를 최적화하는 방법.텍스트 vs 이미지: 이미지가 텍스트보다 디자인적으로 더 효과적이며, 폰트 로딩..

2024. 10. 20.

이전 1 2 3 4 5 다음

티스토리툴바