본문 바로가기

openipc.kr

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

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

everydayhub.tistory.com

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

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

everydayhub.tistory.com

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

HTML의 기본 구조의 이해와 블로그 스킨 수정 방법 .[ 기초 1 ] HTML과 CSS로 간단하게 블로그 디자인스킨 변경하기블로그 스킨 수정 방법블로그의 페이지는 기본적으로 HTML과 CSS 두부분에서 코드를 변경해서 [ 블로그 스킨 ] 을 수정하는 작업을 하게 됩니다. 주로 관리자 페이지에서 스킨 편집 창을 통해 코드를 수정하거나 추가하는 작업을 진행하게 됩니다.이 작업은 많은 코딩 지식이 필요하지는 않고 누구나 할수 있습니다.자신이 필요한 부분만 수정하고 작업하기때문에 굳이 전체 코드를 이해하고 공부하실 필요는 없는거 같습니다.원하는 결과물만 나오면 그만이기 때문에 코딩공부를 하기 위한 목적이 아니라면 간단한 몇가지 지식만 가지고도 충분히 코드를 수정해서 자신만의 블로그를 만들수 있습니다.아래는 html의 기본 구성입니다. 크게 head 부분과 body부분을 구분해서 ..

2024. 11. 16.

[ 수익형 워드프레스 블로그 ] 제작하기 서버 데이터 베이스 구축 리눅스 서버에 MySQL 및 워드프레스 설치 방법수익형 워드프레스 블로그 제작자신의 서버에 수익형 워드프레스 블로그 와 사이트를 구축 합니다. 이번에는 MySQL 데이터베이스 설치 방법을 설명합니다. 리눅스에서 패키지 업데이트 후 MySQL을 설치하고, 데이터베이스와 사용자 생성, PHP-FPM 설치 및 워드프레스 설치 합니다. 마지막으로, Caddy를 이용해 워드프레스 설정을 완료합니다.수익형 워드프레스 블로그 와 사이트를 제작하기 위해 자신의 서버를 구축하는 작업을 먼저 진행합니다이번에는 웹서버에 데이터 베이스를 설치 하는 방법을 알아보도록 하겠습니다.리눅스 서버에 데이터베이스 와 워드프레스를 설치하는 방법을 단계별로 설명하겠습니다. 웹 서버로는 Apache와 Nginx등...여러종류가 있지만 여기서..

2024. 11. 15.

웹사이트를 쉽게 식별하는 파비콘을 쉽게 제작하는 사이트 소개 [ 파비콘(Favicon) 설정 방법 ] 웹사이트 인식도 향상과 브랜드 강화파비콘(Favicon)파비콘(Favicon)은 웹 사이트나 웹 페이지의 작은 아이콘으로, 사용자가 웹사이트를 식별하고 쉽게 사이트를 방문할수 있는데 중요한 역할을 합니다. 아이콘 형태로 웹 페이지의 탭, 북마크 목록, 브라우저 주소 표시줄 등에서 나타나며, 웹 사이트의 인식도를 높이는 데도 도움이 됩니다.파비콘의 역할파비콘은 단순하고 작은 아이콘이지만, 웹사이트의 전문성을 강화하고, 사용자가 사이트를 쉽게 찾을 수 있도록 돕습니다.특히, 사용자가 여러 개의 웹 페이지를 열어 놓고 검색할 때, 파비콘은 브라우저 탭에서 각 사이트를 구별할 수 있도록 도와줍니다. 이 작은 아이콘은 사이트의 로고나 상징적인 이미지를 작게 표현하여, 사이..

2024. 11. 14.

다른 사이트, 블로그 최신글을 이용해서 리스트 형태로 티스토리 메인 홈에 표시하기 티스토리 블로그에 최신글 목록 추가하는 방법 (스크립트 포함)블로그 최신글 목록 코드블로그의 메인 화면을 꾸미는 방법은 여러가지가 있습니다. 특히 이미지, 동영상, 최근 글 목록 등을 통해 블로그를 더욱 풍성 다채롭게 꾸밀 수 있습니다. 그중에서 다른 사이트나 서브 블로그의 최신 글 목록을 표시해 주면 방문자가 쉽게 다른 블로그로 안내를 해줄수 있습니다. 또한 방문자의 체류 시간을 늘려줄수 있고 더불어 백링크의 효과도 볼수 있습니다.아래 내용은 쉽게 티스토리 블로그 기본 스킨을 활용해서 다른 사이트나 블로그의 최신글 목록을 표시해 주는 방법입니다.티스토리 메인 리스트 꾸미기다른 블로그 또는 사이트의 RSS 정보를 이용해서 간단하게 메인 화면의 꾸밀 수 있습니다. 아래는 기존의 티스토리 BOOK 스킨의 기..

2024. 11. 10.

[ 검색 엔진 최적화 ] CSS 초기화 변동성 제거와 레이아웃의 안정화 웹사이트 CSS 초기화 방법과 필요성 [레이아웃 변동 최소화하기]CSS 초기화레이아웃 변동을 줄이기 위해서는 CSS 초기화 (CSS Reset)는 중요한 작업중 하나 입니다. 그 이유는 각기 다른 인터넷 브라우저들이 기본적으로 설정해 놓은 스타일이 서로 다르기 때문입니다. 이로 인해 웹 페이지의 레이아웃이나 디자인이 브라우저마다 다르게 표시될 수 있습니다.CSS 초기화 작업은 여러 종류의 인터넷 브라우저가 기본적으로 설정된 스타일이 서로 틀리기 때문에 발생할수 있는 불일치를 제거하고 기본적으로 설정된 CSS스타일을 CSS초기화를 통해 일관되고 의도된 방향으로 적용하는 방법입니다.CSS 초기화를 하지 않게 되면 기존의 설정된 브라우저의 기본 CSS요소가 적용될수 있고 CSS요소가 적용되는 과정에서 이미 설..

2024. 11. 8.

[ 티스토리 스킨 수정 ] 블로그에 유튜브 동영상 리스트 만들기 방법 티스토리 블로그에 유튜브 동영상 리스트 자동 생성하는 방법티스토리 블로그 동영상 리스트 만들기블로그를 운영하면서 글만으로 콘텐츠를 전달하는 데 한계가 느껴질 때가 있습니다. 특히 요즘처럼 다양한 형식의 미디어 소비가 활성화된 시대에서는 글만으로는 독자들에게 충분히 정보를 전달하기 어려운 경우가 많습니다. 이럴 때 유용한 도구가 바로 동영상입니다.유튜브 채널을 운영 중이거나 동영상 콘텐츠를 제작하는 블로거라면, 자신의 블로그에 동영상을 효과적으로 통합하는 것은 더 이상 선택이 아닌 필수가 되었습니다. 이 글에서는 블로그에 동영상을 공유하고, 블로그 스킨을 수정하여 이를 잘 노출시키는 방법에 대해 다뤄보겠습니다.블로그에서 동영상의 중요성기존의 블로그는 글과 이미지 중심으로 운영되는 경우가 많았습니다. 하지만..

2024. 11. 7.

[검색엔진 최적화] " 링크에 인식 가능한 이름이 포함되어 있지 않음 " 오류 해결하기 구글 성능 검사 개선 방법-"링크에 인식 가능한 이름" 오류 해결법링크에 인식 가능한 이름구글 성능 검사에서 " [ 링크에 인식 가능한 이름 ]포함되어 있지 않습니다. " 에 대한 오류 해결 방법입니다.웹 페이지에 글을 작성할 때, 이미지를 사용하는 경우가 많습니다. 좋은 이미지는 페이지의 품질을 크게 향상시킬 수 있으며, 글의 특색과 개성을 부각시키는 데 중요한 역할을 합니다.이 글에서는 이미지의 중요성과 함께 이미지 링크에 대한 대체 텍스트의 필요성에 대해 알아보겠습니다.링크에 인식 가능한 이름 해결 방법구글은 권장 사항중 하나로 이미지에 링크가 존재 하는데 링크를 대체할 텍스트가 누락돠게 되면 성능검사 점수에서 감점 시킵니다. 그 안내로 "링크에 인식 가능한 이름이 포함되어 있지 않습니다" 스크린 ..

2024. 11. 3.

[ 글 수정 날짜 표시 ] 티스토리 블로그 와 사이트에 글 수정 날짜 표시하는 방법 티스토리 블로그 글 수정 날짜 자동 표시하는 방법글 수정 날짜 표시 방법티스토리 블로그의 글을 작성하거나 홈페이지의 글을 작성한 후 추가적으로 글을 수정하는 경우 [ 글 수정 날짜 표시 ]하는 방법입니다. 아래 코드를 확용하시면 글 수정 날짜를 자동으로 원하는 위치에 표시해줍니다. 글을 작성하고 정보가 변경되거나 글의 내용이 수정될 경우 해당 글 수정 날짜를 방문자에게 안내하는 것은 글의 신뢰도를 높이는 중요한 요소입니다.한 번 작성한 글이 오랜 기간 동안 업데이트되지 않으면 방문자는 정보의 신뢰도에 의문을 갖게 되며, 최신 정보로 업데이트한 작업의 보람이 없어질 수 있습니다.따라서 글을 작성한 후 업데이트가 이루어진 경우 방문자에게 적극적으로 글을 수정한 날짜를 알리는 것은 글의 신뢰도를 높이는 중요한..

2024. 11. 2.

[ 티스토리 매거진 스킨 소개 ] 이미지 콘텐츠와 SEO 최적화를 고려한 선택 티스토리 블로그 매거진 스킨 사용법티스토리 블로그 스킨 소개티스토리 블로그를 시작하려면 제일 먼저 티스토리에서 제공하는 티스토리 블로그 스킨을 선택해야 합니다. 티스토리에서 기본적으로 제공하는 스킨은 총 10개가 있습니다. 그중 오늘은 magazine 스킨을 알아보겠습니다.Magazine 스킨티스토리 블로그 스킨중 magazine스킨은 개인적으로 디자인 측면에서 훌륭하다고 생각합니다. 특히 이미지와 관련된 콘텐츠를 제작하려고 생각중이라면 좋은 선택이 될수 있습니다.매거진 스킨의 커버 종류매거진 스킨에서 제공해주 는 스킨 커버는 총 6가지의 스킨커버를 제공해주고 있습니다. 대부분이 이미지에 특화되 있는듯합니다. 아래는 매거진 스킨의 종류입니다.구글 SEO 테스트아래는 기본 콘텐츠를 노출 시키고 광고를 올리..

2024. 10. 31.

[ HTML, CSS 코드 활용 ] 고정 광고로 블로그 수익 높이는 방법 고정 광고 활용으로 블로그 수익을 높이는 팁과 코드 적용법고정 광고 활용 방법블로그에서 광고는[ 블로그 수익 ]에서 매우 중요한 요소이며 [고정 광고 ]를 활용해서 수익을 개선하는 방법입니다. 가장 일반적인 광고는 구글 애드센스, 카카오 애드핏, 네이버 애드포스트와 같은 플랫폼에서 제공하는 광고입니다.블로그 수익 개선 광고 활용자동으로 제공되는 광고는 블로그 운영자가 쉽게 설정할 수 있어, 별다른 신경을 쓰지 않고 노출하는 경우가 많습니다. 하지만 이러한 방법에만 의존하게 되면 몇 가지 문제가 발생할 수 있습니다.가장 큰 문제는 과다 노출로 인해 방문자의 불편함을 초래하는 것입니다. 이는 블로그 방문 감소와 방문 기피 현상을 유발하며, 의도하지 않은 무효 클릭을 초래할 수 있습니다. 또한, 과도한 광고 ..

2024. 10. 30.

[ 검색엔진 최적화 ] 이미지 로딩 속도 최적화- 미리로드와 지연로드 활용 방법 검색엔진 최적화(SEO)에서 이미지 로딩 속도 개선 방법검색엔진 최적화와 이미지 로딩 속도검색엔진 최적화(SEO)에서 이미지 로딩 속도는 매우 중요합니다. 이 글에서는 특히 이미지 사용이 속도에 미치는 영향과 최적화를 위한 전략방법을 살펴보겠습니다.이미지 로딩 속도 최적화이미지 포맷 형태이미지 파일은 주로 PNG, GIF, JPG 형식으로 사용 하지만, SEO를 위해 WebP 형식으로 변환하여 사용하는 것이 권장됩니다. WebP는 더 나은 압축률을 제공하므로 로딩 속도를 개선할 수 있습니다.이미지 변환 및 압축다양한 이미지 포맷 변환 사이트를 활용하면 쉽게 이미지를 변환할 수 있습니다. WebP 포맷은 작은 용량으로 높은 품질을 유지할 수 있어 검색엔진 최적화에 유리합니다. 또한, 변환한 이미지 파일은 ..

2024. 10. 29.

PurifyCSS를 이용해서 CSS 코드 최적화 및 불필요한 코드 삭제 방법 PurifyCSS를 활용한 효과적인 CSS 코드 최적화 방법CSS 코드 최적화 방법검색 최적화를 위해서 CSS 코드 최적화 후 불필요한 CSS 코드를 삭제하는 작업입니다. PurifyCSS는 사용하지 않는 CSS를 제거해주는 도구입니다. 주로 웹 개발에서 사용됩니다. PurifyCSS 코드 최적화 방법은 프로젝트에서 사용되는 CSS 규칙을 분석하여 실제로 사용되는 스타일만 남기고 나머지는 삭제합니다.CSS 코드 최적화는 유료 사이트에서 진행할 수 있지만, 비용을 지불하지 않고도 직접 작업할 수 있습니다. 이 작업을 진행하기 전에 몇 가지 주의해야 할 사항을 설명하겠습니다. 문제가 발생할 경우를 대비하여 사전 작업을 진행해 주셔야 합니다.권장 사전 작업전체 데이터를 백업할 것을 권해 드립니다.티스토리 블로..

2024. 10. 28.

[ 글쓰기 개선하기 ] 블로그 최적화 [ 긴 문장의 문제 ]와 논리적 글쓰기 짧은 문장과 전환어 활용으로 블로그 글쓰기 개선하기[ 긴 문장의 문제 ]와 블로그 최적화[ 긴 문장의 문제 ]는 가독성을 저하시킬 수 있으며, 사용자와 검색 엔진 및 [ 블로그 최적화 ]와 논리적 글쓰기 방법에 부정적인 영향을 미칩니다. 따라서 짧은 문장으로 구성을 개선하고, 전환어와 능동태를 적절히 사용하는 것이 중요합니다.긴 문장이 블로그 최적화에 미치는 영향을 살펴보고, 이를 해결하기 위한 방법을 알아봅니다.긴 문장으로 논리적 글쓰기 문제이해의 어려움긴 문장은 독자가 생각의 흐름을 따라가기 어렵게 만듭니다. 하나의 문장에 여러 가지 정보가 담기면 독자는 내용을 쉽게 혼동하게 됩니다.특히, 생각이 끝나기 전에 다른 정보가 들어오면 문장의 핵심을 놓치기 쉽습니다. 이로 인해 글의 요점을 이해하지 못하게..

2024. 10. 28.

[ 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.

이전 1 2 3 4 5 다음

티스토리툴바