Category

WordPress

Category

제 블로그의 도메인인 “sijinii.com“은 섬네일이 이상했습니다. 제가 사용하는 테마의 기본 섬네일은 Header에 있는 이미지를 가져와서 섬네일로 보여줬죠. 제 header의 이미지는 일반 섬네일에 나오는 비율보다 가로가 길어서 아래 사진과 같이 나왔습니다. 워드프레스 섬네일 이 이상하게 보였죠.

 

sijinii.com
블로그 메인 header 이미지
워드프레스 섬네일
카카오톡 전송 시 블로그 섬네일

이렇게 카카오톡 또는 페이스북에 공유하면 워드프레스 섬네일 이미지가 보기 싫어서 클릭률을 저하시킬 수 있었습니다. 그래서 섬네일 이미지를 바꿔보려고 합니다. 테마 편집기의 코드를 수정해야해서 무섭습니다.

우선 “워드프레스 관리자 왼쪽 사이드바 > 테마 디자인 > 테마 편집기 > 오르쪽 테마 파일 리스트 > views > general > header > common.php” 에 접속합니다. 그렇면 아래와 같이 나타납니다.

 

워드프레스 섬네일

그 후 <meta name> 아래에 다음과 같은 코드를 삽입합니다.

<!–blog thumbnail–>
<meta property=”og:image” content=”이미지 주소”>

그러면 아래와 같은 모습이 됩니다.

워드프레스 섬네일

 

여기서 이미지 주소는 워드프레스에 업로드 되어 있는 이미지를 사용했습니다. 이미지의 주소를 알기 위해서는 “왼쪽 사이드바에서 미디어 > 원하는 이미지 선택 > 보기”를 누르시면 주소창에 표시됩니다. 또는 마우스 우클릭으로 ‘이미지 주소 복사’를 클릭하면 됩니다.

워드프레스 섬네일

 

이미지 주소와 함께 테마 편집기에 코드를 삽입한 후 ‘Save Change’를 누르고 30분 정도 지나면 섬네일이 아래와 같이 변경된 것을 확인할 수 있습니다.

카카오톡 이미지


이 글은 2020년 2월 14일 제 워드프레스에서 발생한
“워드프레스 사이트에 기술적 문제가 발생했습니다.”
를 해결하기 위해 작성한 글입니다.
To. 미래의 나

“워드프레스 사이트에 기술적 문제가 발생했습니다.” 무섭습니다. 워드프레스 사이트에 안들어가져요.

글을 쓰기 위해 워드프레스 어드민을 열었는데 아래와 같은 사진이 나타남.

워드프레스, 사이트에 기술적 문제가 발생했습니다.

웹사이트에 에러가 났으니, 너의 관리자 메일함을 확인해라 란 내용임.

영어 워드프레스를 만들려고 이것 저것 건들다가 테마를 건드린 것이 생각나서 내 것은 100% 테마 충돌 문제라고 생각함.

메일에 들어갔더니 아래와 같은 메일이 와있었음. 구글에서 검색해보니 워드프레스 테마를 바꿔줘야 한대서 워드프레스 관리자 > 테마에 계속 들어갔더니 자꾸 오류가 뜨면서 8통이나 옴. 이거 무슨 문제가 생겼다싶어서 무서웠음.

워드프레스, 사이트에 기술적 문제가 발생했습니다

 

구글에 검색해서 나온 이 글을 참고했음. WordPress 오류를 해결하는 방법 “사이트에 기술적 인 어려움이 있습니다”

이 글에는 아래의 사진과 같은 내용으로 나와있는데, 무슨 말인지 도통 이해가 안가서 일단 호스트 서버에 들어감.

워드프레스, 사이트에 기술적 문제가 발생했습니다.

나의 호스트 서버는 bluehost

  1. 웹 호스트의 파일 관리자를 사용하여 문제를 해결하거나
  2. FTP 또는 sFTP를 사용해야 합니다.
  3. 폴더의 이름 끝에 DISABLE 또는 OFF를 추가하여 활성 테마의 폴더 이름을 바꿉니다.

3개를 보고 먼저 웹호스트의 파일 관리자에 들어감. 설치된 테마 이름으로 된 폴더가 없음(X)

FTP 또는 sFTP를 찾아 들어감, 뭘 할 수 있는게 아무것도 없음

 

bluehost 내 왼쪽 사이드바에서 My sites라는 것을 발견 클릭 해보니 이런게 나왔다.

워드프레스, 사이트에 기술적 문제가 발생했습니다.

내 블로그를 눌러서 들어가봤다. 그러니까 여기서 테마를 관리할 수 있더라.

워드프레스, 사이트에 기술적 문제가 발생했습니다.

Manage 버튼을 눌러보았다. 참고한 글에서 테마를 기본 테마로 변경했다가 다시 원래 테마로 돌아오면 된다는 말을 듣고 워드프레스 접속 오류가 떴을 때 운좋게 설치한 기본 테마와 내가 설치한 테마 2개가 보였다. 기본 테마를 먼저 Active 한 다음, 다시 원래 테마를 Active 했다.

워드프레스, 사이트에 기술적 문제가 발생했습니다.

 

이렇게 정상적인 워드프레스로 돌아왔다.

후.. 쫄았다.

블루호스트 워드프레스 도메인 연결 문제

워드프레스에서 구글 애드센스 설정하는 방법

블로그 최적화 점수

워드프레스 블로그의 SEO 최적화 점수를 측정해주는 확장 프로그램을 찾았다. 

SEO Analysis & Website Review by WooRank

내 블로그의 SEO 최적화 점수를 올리고 싶다. 왜냐하면 프로그램의 측정 기준 상 잘된 블로그는 아니라고 판단해서 그런지 점수의 동그라미가 빨간색이기 때문이다. 다른 블로그들을 몇개 둘러보니 점수가 높은 블로그들은 초록색 동그라미로 그려져 있었다. 다른 블로그 몇개를 더 둘러보니 49점 이하는 빨간색, 50~69점은 노란색, 70점 이상은 초록색으로 추정된다. 그렇다면 나의 목표는 초록색이다. 초록색을 목표로 블로그 최적화를 진행해보자.

 

다른 블로그들의 점수를 알아보기 전에 블로그의 공정성을 맞추기 위해 나와 같은 워드프레스 블로그를 찾아보았다. 언뜻보기에는 어떤 블로그가 워드프레스 블로그인지 알 수가 없다. 일단 블로그를 선택하는 기준은 내가 떠오르는 블로그지만 해당 블로그가 워드프레스로 만들었는지 알아보기 위해서는 나만의 방법을 사용했다. 워드프레스 블로그의 관리자모드로 들어가기 위해서는 블로그 주소 끝에 “wp-admin”을 붙이면 된다. 그 말은, 워드프레스로 블로그를 만들었다면 블로그 주소 끝에 “wp-admin”를 붙이면 워드프레스로 로그인을 하라는 아래와 같은 사진이 나타나게 된다.

slack blog seo

 

커뮤니케이션 툴로 유명한 슬랙의 블로그는 워드프레스 블로그로 만들었다는 뜻이 된다. 이와 같은 방법으로 떠오르는 다른 몇개의 블로그들을 방문하여 워드프레스로 만들어진 블로그들을 추려보았다. 워드프레스로 만들어지지 않은 사이트라면 사이트 주소 끝에 “wp-admin”을 붙여도 아무런 반응이 일어나지 않거나 오류 페이지가 나타난다. yoast blog 같은 경우에는 my yoast 로 들어가지는데, 이런 경우에는 yoast에서 회원가입을 워드프레스로 받고 각 계정마다 공간을 만들어주었다고 추정된다. 추정의 근거는 워드프레스의 사이트 UI와 너무 흡사하기 때문이다.

 

yoast blog wordpress
위 : yoast blog, 아래 : wordpress

처음 봤을 때는 워드프레스와 많이 닮았다고 생각했는데 이렇게 비교해보니까 조금 다른 것 같다. 어쨌든 워드프레스 블로그라면 SlackHQ 의 블로그처럼 나타날 것이고 아니라면 아래처럼 에러가 나거나 아무런 반응이 없을 것이다.

wordpress, fastfive, wp-admin, blog, SEO, 워드프레스, 패스트파이브

 


 

어떤 블로그들이 워드프레스로 만들었고, SEO에는 몇점을 받았는지 살펴도보록 하자.

 

1.Slack

blog slack seo  블로그 최적화

커뮤니케이션 툴을 서비스하고 있는 슬랙(Slack)다. 서양권에서 3세대 메신저 서비스로 공룡 기업으로 불리고 있다. 현재 가치가 19조 7천 억이라고 한다. 슬랙의 블로그에 들어가봤다. 깔끔하게 그려진 일러스트들과 디자인들이 마주하고 있다. 사이트가 로딩되는 속도도 상당히 빠르다. 

사이트 속도는 어떻게 측정하지? – 나중에 사이트 속도 측정에 관한 글을 써야겠다.

 

2. 생각노트

블로그 최적화 seo blog 생각노트

개인적으로 콘텐츠에 대해 롤모델이라고 생각하는 생각노트님의 블로그이다. 슬랙의 블로그도 72점을 받았는데 무려 86점을 받으셨다. 이미 수백 개의 양질의 콘텐츠가 들어가있고, 꾸준히 오랫동안 관리해온 결과라고 생각한다. 존경합니다 생각노트님

 

3. Yoast

yoast, seo, blog, wordpress, 워드프레스

워드프레스 블로그 SEO 중에서 가장 유명한 Yoast 다. SEO를 위해서는 Yoast가 꼭 필요하다. 암. 나도 많이 배우고 있다. SEO 전문 회사인 만큼 블로그 점수가 90점이나 된다. 워드프레스에서 SEO를 하려면 Yoast 플러그인이 필수라고 할 만큼 유명한 회사의 블로그인데 점수가 90점이라면 아마 최상위 점수가 아닐까. SEO 점수를 최적화시켰을 때 현실적으로 가장 높은 점수랄까? 그런데 생각노트 블로그의 점수가 86점이라는 것은.. 상대적으로 아주 높은 점수라고 한다.

 

4. ㅍㅍㅅㅅ

ppss, ㅍㅍㅅㅅ, blog, seo

국내 미디어 스타트업 ㅍㅍㅅㅅ. 다양한 글들을 큐레이션 해주고 있다. 해당 사이트에는 73점이라는 점수를 받았다. 다양한 콘텐츠를 가져오는 만큼 다양한 주제로 검색해도 1페이지에 검색이 잘되는 사이트다.

 

5.THE EDIT

theedit, 디에디트, 매거진, blog

마지막은 내가 정말 정말 사랑하는 디에디트. 나를 서울로 올라올 수 있게 용기를 준 디에디트다. 디에디트 사이트는 홈페이지처럼 생겼다. 혹시나 해서 확인해봤는데 워드프레스 로그인 화면이 뜬다. 워드프레스에 이런 테마가 있다는 것도 신기하지만 이런 사이트를 만든 것도 정말 대단하다고 생각한다. 정말 특이한 사이트란 것은 들어가보면 안다. 디에디트는 홈페이지 말고도 페이스북, 인스타그램, 유튜브, 카카오톡 등 멀티 채널에 콘텐츠를 발산하고 있기 때문에 SEO에는 조금 아쉬운 부분이 있나보다. 하지만 콘텐츠는 정말 너무나도 좋다.

 


 

5개 블로그의 SEO 최적화 점수를 알아보았다. 블로그로서 운영을 하고 있는 사이트는 모두 초록색 원을 가진걸 보니 일단 나도 최소 70점을 넘겨야 겠다는 생각이 든다. 2020년 2월 목표는 초록색 원을 가지는 걸로! 

확장 프로그램을 클릭하면 아래와 같이 어떤 부분을 어떻게 수정해야 하는 지도 나온다.

 

블로그 최적화 점수 타이틀 태그

 

처음 블로그를 만들었을 때부터 알고 있었다. 조금 따라해보다가 갑자기 개발 용어들이 나와서 파랑새도 지쳤는지 번역을 이상하게 해주기 시작해서 멈추었더랬다. 이번 달에는 집중해서 블로그 수정을 진행해봐야겠다. 

 

잠이 와서 도저히 못쓰겠다. 

 

끝[끗]

 

구글 애드센스 사용법 워드프레스 플러그인 사용
워드프레스에서 구글 애드센스 설정하는 방법

블루호스트

워드프레스 도메인 변경 문제로 겪은 상황에 대한 진술서

워드프레스 도메인 변경할 때 문제 상황

  1. 워드프레스로 들어오는 도메인을 변경하고 싶음
  2. 도메인 변경을 위해 블루호스트에서 도메인을 구매 – sijinii.com
  3. 도메인 리다이렉트를 진행했으나 도메인을 변경하는 과정에서 워드프레스와 호스팅의 연결 해제
  4. 워드프레스에서 제공하는 도메인과 블루호스트에서 제공하는 도메인이 매치가 안됨
  5. 워드프레스 상 주소는 sijinii.com으로 되어있으나 블루호스트에서 연결해주는 사이트가 sijinii.com이 아님
  6. 워드프레스의 기본 주소였던 muggleboss.net는 워드프레스 내에서 변경된 상황
  7. 워드프레스로 들어가는 주소를 muggleboss.net로 되돌려야 함
  8. 블루호스트 -> advanced -> phpmyadmin -> wp options 에 접속
  9. siteurl, home의 주소가 sijinii.com으로 되어 있었는데 muggleboss.net로 변경하니 정상 접속 가능

참고자료 : 워드프레스 주소 변경으로 사이트에 접속하지 못하는 문제 해결

 

워드프레스로 접속하는 도메인을 변경하고 싶을 때 -> Transfer

  1. 블루호스트 내에 Transfer 기능을 이용하면 됨
  2. Transfer 할 도메인 입력
  3. 새로운 도메인 검색
  4. 도메인 구매
  5. Transfer 진행 1~5시간 소요

 

위 Transfer 기능을 모르고 도메인부터 구매

  1. 기존 muggleboss.net 가 Primary 되어있는데 구매한 도메인 sijinii.com을 Primay로 변경해야함
  2. muggleboss.net은 packed로 변경해야함. 
  3. 방법을 몰라서 블루호스트 chat을 신청
  4. 사정을 설명하니 모두 해결해줌.
  5. ‘http://’로 접속하면 ‘https://’로 자동으로 넘어갈 수 있게 해달라고도 요청
  6. 블루호스트 Chat에서 아주 친절하게 모두 변경 완료

 


 

  1. 워드프레스에서 구글 애드센스 설정하는 방법
  2. 구글 애드센스 사용법 워드프레스 플러그인 사용

워드프레스 수익형 블로그를 운영할 때 드디어 받은 구글 애드센스 승인! 그런데 어떻게 광고를 넣어야할 지 모르겠다고요? 구글 애드센스 사용법 알려드립니다! 구글 애드센스 광고 넣는 방법은 두가지 있습니다. 첫번째는 구글에서 자동으로 광고를 넣어주는 방법이죠. 간단한 한줄 짜리 광고코드만 <head></head> 코드 안에 넣어두면 쉽게 광고가 세팅됩니다. 하지만 광고가 너무 많이, 무분별하게 들어가서 소중한 블로그가 안좋게 보일 수 있습니다. 조금 귀찮긴 하지만 수동으로 광고를 넣는 것을 추천드립니다. 아래와 같은 방법으로 따라해보세요. 혹시나 수동이 귀찮아서 자동으로 넣어도 되는 분들을 위해 자동 광고 승인 방법도 넣어두었습니다.

구글 애드센스 사용법

  1. 구글 애드센스 승인을 받는다.
  2. 구글 애드센스에는 2가지 광고 세팅 방법이 있다.
    1. 자동 광고 설정
    2. 수동 광고 설정
  3. 자동 광고 설정은 내가 설정하지 않아도 구글에서 알아서 광고를 생성해준다.
    왼쪽 위 사이트 기준이라는 곳에 들어가면 자동으로 광고를 설정할 수 있다.

    • 장점 : 후속 설정이 필요없다.
    • 단점 : 사이트가 광고판이 될 수 있다.
  4. 수동 광고 설정은 내가 일일이 설정해야하지만 내가 원하는 모양으로 광고를 생성해준다.
  5. 수동 광고 설정을 위해서는 워드프레스 플러그인이 필요하다.
  6. Ad inverter 라는 플러그인을 추가한다.
  7. 플러그인 Setting에 들어간다
  8. 1번부터 16번까지의 블록에 각각 원하는 위치에 원하는 광고를 설정할 수 있다.
  9. 먼저 구글 애드센스에서 광고 -> 개요 -> 광고 단위 기준을 클릭하면 원하는 광고를 만들 수 있다.
  10. 디스플레이 광고를 클릭한다.
  11. 광고 이름 지정, 사각형/수평형/수직형 선택, 광고 크기를 선택한다.
    구글 애드센스 사용법
  12. 만들어진 광고의 태그 복사한 후 ad inverter 블록 1~16번 사이에 붙여 넣는다.
    구글 애드센스 사용법
    구글 애드센스 사용법
  13. 광고를 넣길 원하는 곳을 선택(Post, Homepage, Category pages 등),
    Insertion(광고 위치) 선택
    Save Settings 를 클릭한다.
  14. 광고가 나타난다.

 


 

수익에 부정적인 영향이 미치지 않도록 하려면 ads.txt 해결방법

구글 애드센스 사용법

ads.txt : ad inverter에서 수정하는 법

 

 

구글 애드센스 광고 세팅 

  1. 구글 애드센스 광고 승인을 받았다.
  2. 광고 코드를 붙여넣고 플러그인에서 설명대로 했는데도 원하는 위치에 나타나지 않음
  3. 알고보니 자동 광고용 코드를 넣고 자꾸 설정을 하고 있었음.
  4. 위 사이트에서 보니까 내가 넣은 코드랑 다르더라.
  5. 왜 나랑 코드가 다르지 하고 구글 애드센스를 찾아보니 광고를 만들 수 있다.
  6. 위 사진처럼 내가 원하는 광고 형태를 만들 수 있다.
  7. Ad inverter 플러그인을 통해 광고를 만들려면 ‘디스플레이/인피드/콘텐츠내 자동삽입 광고’에 들어가서 만들어야 한다.
  8. 먼저 디스플레이 광고 / 반응형 / 수평형 을 만들어봄
  9. 아직 디스플레이 / 인피드 / 콘텐츠 내 자동 삽입 광고의 차이를 모르겠음
  10. 위젯에 광고를 넣어보았다.

 

다른 T.I.L이 궁금하시다면

  1. Today I Learn 2019년 11월 18일(월)
  2. Today I Learn 2019년 11월 21일(목)