Skip to main content

OG(Open Graph) 적용이 안돼요 (feat. Google Search Console)

· 5 min read

개요

블로그 게시글을 SNS에 공유할 때, 메인 도메인의 타이틀과 미리보기만 보였던 이슈와, Google Search Console에서 게시글 색인이 생성되지 않았던 이슈를 해결하는 과정을 소개합니다.

OG(Open Graph)란?

해결과정을 소개하기 앞서, OG가 무엇인지 간단하게 설명하고 넘어가겠습니다.

OG는 웹 페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화 하여 해당 컨텐츠에 대한 요약적인 내용을 사용자에게 노출함으로써 SNS에 게시되는데 특화된 프로토콜입니다.
페이스북이 최초로 발표했고, 트위터, 링크드인, 네이버, 카카오톡 등 널리 사용되고 있습니다.

image

게시글 깨알 홍보

어떻게 적용할까?

메타데이터 ㅇ쩌고

제목 뭐로하지

백엔드 개발자로써 나만의 서버, 나만의 서비스, 나만의 기술 블로그를 오픈해야지 라는 생각에 중고로 맥미니 2018를 샀습니다.

하지만 기술 블로그를 만드려 하다보니 디자인과 css라는 벽이 너무 커서 반 포기상태로 지내고 있다가.. "개발바닥" 이라는 카카오톡 오픈톡방에서 어느분이 올려주신 기술 블로그를 보다가 이 블로그를 만들게 도와준 Docusaurus라는 사이트 제너레이트 서비스를 알게 되었습니다.

로컬에서 테스트로 한번 띄워보고 이거다! 싶어서 바로 가비아에서 도메인을 사서 맥미니에 연결했습니다.

image

개발 블로그 역사의 시작

그리고 바로 지인들에게 개인 개발 블로그가 생겼다고 카카오톡으로 블로그 링크를 보내면서 자랑했습니다 ㅋㅋ..
이때까지는 아무것도 수정하지 않고 바로 올려봤던 상황이라 당연히 Docusaurus의 기본 썸네일과 블로그 타이틀이 미리보기에 보였습니다. 이때는 OG의 개념을 모르고 단순하게 해당 페이지의 타이틀과 첫번째 이미지? 가 보여지는 줄 알았습니다.

이상한점 발견

24년 7월 4일 드디어 첫 게시글을 작성하고 자랑스럽게 카카오톡으로 링크를 공유했으나..
분명 링크는 방금 작성한 링크인데도 불구하고 타이틀과 썸네일이 아직도 기본으로 보였씁니다

이전에 티스토리로 글을 올렸을때는 바로 보였는데 뭔가 설정을 해줘야 하나..?

해결과정

도대체 타이틀이랑 썸네일도 적용이 안되고, 구글 서치콘솔도 계속 수집을 하지 못했습니다.

  1. 게시글 하나 쓰고 공유를 했는데 아직 그대로 메인 썸네일과 타이틀

  2. 구글 서치콘솔도 안됨

  3. 구글링하다가 og에 대해 알게됨 카카오톡, 메타, 등 디버거 사이트 공유

디버거엔 메인으로만 연결되어있다고 함

  1. 하지만 상세 페이지는 개발자도구를 보니 제대로 먹혀있는 상태임

  2. 대체 뭐가 문제일까

이제 블로그 구성보다는 nginx에 의심이 가기 시작했습니다. 아니나 다를까..

image

개발 블로그 역사의 시작

  1. nginx 설정 바꾸기

  2. 와 해결

  3. 구글서치콘솔 해결?

GitHub 계정 여러개 사용해보기 (with SSH)

· 5 min read
2nan
Backend Engineer, Outlier

개요

하나의 PC에서 여러개의 GitHub 계정을 사용해야 할 때가 있습니다. 회사의 GitHub 계정이나 교육용 GitHub 계정을 사용하면서, 개인 GitHub 계정을 사용해야 할 때가 있습니다.

SSH 설정을 통해 간편하게 여러개의 GitHub 계정을 사용하는 방법에 대해 설명합니다.

info

사용하려는 환경에 Git이 설치되어 있다고 가정하고 진행됩니다.

GitHub SSH 연동하기

SSH 키 생성하기

ssh-keygen 명령어를 통해 SSH 키 파일을 생성합니다. 이때 파일명은 추후 GitHub 계정별로 식별하기 쉽도록 다음과 같은 규칙으로 생성하면 좋습니다.

# Windows의 경우 C:/Users/{USER}/.ssh 디렉토리에서 진행
# Mac의 경우 /Users/{USER}/.ssh 디렉토리에서 진행

# 회사 GitHub 계정
$ ssh-keygen -t rsa -C "2nan@company.co.kr" -f "id_rsa_company"

# 개인 GitHub 계정
$ ssh-keygen -t rsa -C "developer.2nan@gmail.com" -f "id_rsa_dev"

image

명령어를 사용한 이후에 디렉토리를 확인해보면 파일이 2개가 생성된 것을 확인이 가능합니다.

GitHub에 SSH 공개키 등록하기

생성한 2개의 파일중 .pub 확장자를 가지고 있는 파일이 공개키 파일입니다. 이 공개키를 GitHub에 등록하는 과정입니다.

image

GitHub 페이지에서 우측 상단의 프로필 이미지를 누르고 Settings 페이지에 접근합니다.

image

SSH and GPG keys 탭에 접근해서 New SSH Key 버튼을 누릅니다.

image

어떤 키를 등록하였는지 Title을 작성하고, .pub 파일을 메모장이나 vscode로 열어서 내용을 전체 복사하고 붙여넣은 다음, Add SSH Key 버튼을 눌러 SSH 키를 추가합니다.

SSH config 설정하기

아까 SSH 키 파일들을 생성했던 디렉토리에서 config 파일을 하나 생성해줍니다.

config
# ~/.ssh/config 파일에서 설정

# Host ⇒ SSH 명령어를 사용할때 실제로 사용하게 될 명령어
# HostName ⇒ GitHub
# User ⇒ GitHub 유저 이름 (GitHub config user.name)
# IdentityFile ⇒ SSH Private Key 파일 위치

# 회사 계정에 대한 SSH 설정
Host github.com-compnay
HostName github.com
User company
IdentityFile ~/.ssh/id_rsa_company

# 개인 계정에 대한 SSH 설정
Host github.com-dev
HostName github.com
User dev-2nan
IdentityFile ~/.ssh/id_rsa_dev

SSH 연결 테스트

위 과정을 모두 완료했다면, 터미널에서 아래와 같이 등록한 계정에 대해 테스트를 진행합니다.

$ ssh -T git@github.com-company
Hi company! You've successfully authenticated, but GitHub does not provide shell access.

$ ssh -T git@github.com-dev
Hi dev-2nan! You've successfully authenticated, but GitHub does not provide shell access.

GitHub SSH로 사용하기

이제 등록해놓은 SSH 키를 사용하여 여러 계정에서 원하는 레포지토리를 클론할 수 있습니다.

warning

config 파일에서 여러 계정을 사용하기 위헤 Host를 github.com-dev 이런식으로 작성했었습니다. SSH 테스트를 했을 때 처럼 git 명령어를 사용할때 마찬가지로 적용해야 합니다.

# 회사 GitHub Repository 클론 예시
git clone git@github.com-company:Company/project.git

# 개인 GitHub Repository 클론 예시
git clone git@github.com-dev:dev-2nan/project.git

클론받은 이후에 프로젝트 디렉토리에서 git config user.name, user.email 을 설정하고 사용하면 됩니다.

Obsidian 실시간 동기화 적용하기 (Self-hosted LiveSync)

· 7 min read
2nan
Backend Engineer, Outlier

개요

시놀로지 나스를 사용하거나 fly.io를 사용해서 Obsidian(옵시디언)의 Self-hosted LiveSync 플러그인을 사용하여 여러 기기에 실시간으로 동기화하는 방법은 구글링하면 나오지만, 일반 PC나 서버에서 Obsidian을 동기화하는 글은 없는것 같아 작성합니다.

info

사용하려는 환경에 Obsidian, Docker, Docker Compose가 설치되어 있다고 가정하고 진행됩니다.

서버 PC 설정하기

couchdb ini 설정하기

여러 기기에서 노트 데이터를 저장하고 공유하기 위해 couchdb 컨테이너를 사용합니다. 컨테이너를 실행하기 전, 간단한 ini 파일을 작성합니다.

저는 맥미니에 서버를 구성할 예정이라 /Users/{USER_NAME}/service/obsidian-db 디렉토리에 couchdb.ini 파일을 생성합니다.

couchdb.ini
[couchdb]
single_node=true
max_document_size = 50000000

[chttpd]
require_valid_user = true
max_http_request_size = 4294967296

[chttpd_auth]
require_valid_user = true
authentication_redirect = /_utils/session.html

[httpd]
WWW-Authenticate = Basic realm="couchdb"
enable_cors = true

[cors]
origins = app://obsidian.md,capacitor://localhost,http://localhost
credentials = true
headers = accept, authorization, content-type, origin, referer
methods = GET, PUT, POST, HEAD, DELETE
max_age = 3600

docker-compose로 couchdb 컨테이너 실행하기

couchdb 컨테이너를 실행하기 위해 docker-compose.yml 파일을 같은 경로에 생성합니다.

docker-compose.yml
version: "3.9"
services:
couchdb:
image: couchdb
container_name: obsidian-livesync
environment:
- COUCHDB_USER={DB 유저 명} # enter the desired CouchDB admin username
- COUCHDB_PASSWORD={DB 패스워드} # enter the desired CouchDB admin password
volumes:
- /Users/{USER_NAME}/obsidian-db/data:/opt/couchdb/data
- /Users/{USER_NAME}/obsidian-db/local.ini:/opt/couchdb/etc/local.ini
ports:
- 5984:5984
restart: unless-stopped

couchdb.ini 파일과 docker-compose.yml 파일을 생성했다면, 해당 경로에서 명령어를 사용하여 백그라운드로 컨테이너를 실행시켜줍니다.

$ docker-compose up -d

couchdb 접근 확인하기

컨테이너를 실행하고, 웹페이지에서 localhost:5984로 접근하면 다음과 같이 ID,PW를 물어보는 창이 나타나는데, docker-compose.yml 파일에서 작성했던 COUCHDB_USER, COUCHDB_PASSWORD 값을 통해서 로그인이 가능합니다.

image

정상적으로 로그인이 되면 아래와 같은 JSON 형태의 데이터가 나타납니다.

image

warning

이때 어디서든지 접근이 가능하도록 5984포트를 사전에 포트포워딩 합니다.

플러그인 설정하기

이제 Obsidian에서 플러그인을 다운받아 연동시키는 차례입니다.

아래와 같이 플러그인 탐색을 통해 Self-hosted LiveSync 플러그인을 검색하고, 설치하여 활성화합니다.

image

활성화하면 아래와 같은 팝업이 나오는데, 서버 설정을 하기 위해 Open setting dialog를 선택해줍니다.

image

Remote Configuration 탭에서 URI, Username, Password, Database name을 작성하고, Test를 눌러 정상적으로 연결이 되는지 테스트합니다. 이때 Username과 Password는 docker-compose.yml 파일에서 작성한 값을 사용합니다.

image

테스트가 정상이라면, Check를 눌러 Database configuration을 설정하고 Apply를 눌러 적용합니다.

image

추가 옵션으로 Incubate Chunks in DocumentEnd-to-End Encryption을 활성화 하고, 다른기기와의 동기화시 보안을 위해 비밀번호를 설정합니다. 전부 설정하였으면 Apply and Rebuild를 선택하여 적용합니다.

image

마지막으로 동기화 모드를 LiveSync로 설정하여 실시간으로 데이터가 동기화 되도록 설정합니다.

image

이제 외부와 연동하기 위해 Setup wizard 탭에서 Copy를 선택하고 팝업에서 비밀번호를 입력하면, 클립보드에 암호화된 URI가 저장됩니다. 클라이언트쪽에서 서버로 연동을 위해 메모장에 붙여넣기 해줍니다.

image

클라이언트 PC, 모바일 설정하기

플러그인 설정하기

클라이언트용은 서버용과 마찬가지로 플러그인을 다운받고 진행합니다. PC와 모바일 둘다 같은 프로세스로 진행되니 모바일로 적용해보겠습니다.

먼저 Setup wizard 탭에서 Copy를 선택하여 복사했던 URI를 붙여넣기 하고, 비밀번호를 입력합니다.

image image

정상적으로 URI와 비밀번호를 입력했다면 다음과 같은 팝업이 발생하는데 yes를 선택합니다.

image

다음은 서브 기기 설정을 위해 Set it up as secondary or subsequent device를 선택합니다.

image

마지막으로 서버와 마찬가지로 동기화 모드를 LiveSync로 설정하여 실시간으로 데이터가 동기화 되도록 설정합니다.

image

적용 확인하기

이제 연동했던 서버나 다른 PC, 모바일에서 노트를 수정하면 실시간으로 동기화가 되는것을 확인할 수 있습니다.

image