https://web-affiliator.vercel.app/
최근에 웹페이지를 하나 만들었는데, 웹썸네일에 대해서 공부한 내용을 공유합니다^^
웹 썸네일을 위한 Open Graph 적용
웹 썸네일을 설정하는 것은 소셜 미디어나 다른 플랫폼에서 링크를 공유할 때 어떻게 표시될지를 결정하는 중요한 작업입니다.
이를 위해 Open Graph 메타 태그를 사용하여 웹페이지에서 사용할 이미지를 지정할 수 있습니다.
Open Graph를 적용하기 위해서는 서버에서 이미지를 가져오는 것이 필연적입니다.
서버에 이미지를 업로드하는 방법은 여러 가지가 있지만, 가장 간편한 방법 중 하나는 SCP(Secure Copy Protocol)를 사용하는 것입니다.
SCP란 무엇인가?
SCP는 SSH(Secure Shell) 프로토콜을 사용하여 네트워크를 통해 안전하게 파일을 복사하는 방법입니다. 이를 통해 로컬 머신에서 원격 서버로 파일을 전송할 수 있습니다. SCP는 주로 Linux 및 Unix 시스템에서 사용되지만 Windows에서도 사용할 수 있습니다.
SCP 기본 구문
SCP 명령어의 기본 구조는 다음과 같습니다:
scp [옵션] [로컬 파일 경로] [사용자명]@[서버 주소]:[원격 파일 경로]- 옵션: 다양한 옵션을 추가하여 SCP의 동작 방식(예: -i: 특정 SSH 키를 사용).
- 로컬 파일 경로: 내 로컬 컴퓨터에서 전송할 파일의 경로.
- 사용자명: 원격 서버에서 사용할 사용자 계정 (예: ubuntu).
- 서버 주소: 파일을 전송할 EC2 인스턴스의 IP 주소 또는 도메인 이름.
- 원격 파일 경로: 파일이 저장될 서버에서의 경로.
로컬에서 서버로 파일 전송하기
예를 들어, 다음과 같은 SCP 명령어를 사용할 수 있습니다:
scp -i ".\test-test.pem" ".\capture.png" ubuntu@ec2-54-180-201-51.ap-northeast-2.compute.amazonaws.com:/home/ubuntu/위 명령어의 의미는 다음과 같습니다:
- -i ".\test-test.pem": 해당 경로의 SSH 키 파일을 사용하여 인증합니다.
- ".\capture.png": 로컬 컴퓨터에서 전송할 이미지 파일의 경로입니다.
- "ubuntu@ec2-54-xxx-xxx-xx.ap-northeast-2.compute.amazonaws.com": EC2 인스턴스에서 사용할 사용자 이름과 IP 주소입니다.
- ":/home/ubuntu/": EC2 인스턴스 내의 복사될 위치입니다.
이 명령을 실행하면, capture.png 파일이 EC2 인스턴스의 /home/ubuntu/ 디렉토리에 전송됩니다.
이미지를 Open Graph 메타 태그로 설정하기
이미지를 서버에 성공적으로 업로드한 후, 웹페이지의 HTML 파일 내에 Open Graph 메타 태그를 추가하여 해당 이미지를 소셜 미디어에 게재할 때 썸네일로 사용하도록 설정할 수 있습니다. 예를 들면:
<meta property="og:image" content="http://54.xxx.xxx.xx/capture.png" />위의 코드에서 content 속성에 이미지를 불러올 수 있는 URL을 입력합니다. 이렇게 하면 이 페이지가 공유될 때 지정한 이미지가 썸네일로 사용됩니다.
마무리
SCP를 사용하여 로컬 컴퓨터에서 원격 서버로 파일을 전송하는 과정은 매우 직관적이며 웹 서버에 이미지 파일을 효율적으로 업로드하는 방법입니다.
Open Graph 메타 태그를 통해 해당 이미지를 적절히 설정함으로써 링크가 소셜 미디어에서 더 매력적으로 표시될 수 있습니다.
추가적인 질문이나 더 필요한 정보가 있다면 언제든지 문의해 주세요! 😊
