HTML & CSS

링크 공유될 때 제목과 내용, 이미지 설정하기 : <meta property="og:title" content="!!"> + SEO 구글 검색에 노출시키기

2020. 10. 9. 12:56

meta 태그 설정 전과 후

URL을 공유할 때 제목과 설명, 이미지를 설정해보자

 

1
2
3
4
5
6
7
8
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta charset="UTF-8" />
<!-- SEO by rich 2020.10.09 -->
<meta name="author" content="withIT">
<meta name="description" content="쉽고 빠른 스터디 매칭, withIT에서 지금 바로 시작하세요.">
<meta property="og:image" content="https://i.imgur.com/DhKuWsC.png">
<meta property="og:description" content="쉽고 빠른 스터디 매칭, withIT에서 지금 바로 시작하세요">
<meta property="og:title" content="쉽고 빠른 스터디 매칭, withIT">
cs

 

meta 태그의 author, description은 SEO를 위해 사용되고

property는 링크 공유 시 상세 정보 전달을 위해 사용된다.

 

og:image는 외부에서 이미지를 가져올 수 있어야 하기 때문에 이미지 링크를 통해 전달해야할 듯 싶다.

이미지는 가로 세로가 같은 비율인 것으로 사용해야할 듯 싶다. 안 그러니 짤리네..

title과 description이 실제로 전달할 핵심 내용이 아닐까 싶다.

 

한글이 깨지고 저장시 오류가 나는 문제가 있었는데

첫줄의 내용이 빠져서였다.

이 파일은 템플릿 파일이고 한글이 들어온적이 없었어서 지금까지 문제는 없었는데

한글이 들어오려면 템플릿 파일로 합친다고 하더라도 모든 파일의 상단에 필요한 듯 싶다.

 

현재로선 검색해도 안 나오는데...

시간이 좀 지나고 봇에 크롤이 되고 나면 "스터디 매칭 withIT" 이런식으로 검색했을 때 잡힐까?;;

궁금하넹

 


2020. 10. 11 (일) 추가

 

구글 검색에 잡히기 시작했다

구글봇님께서 왔다가셨다.

스터디매칭 withit 라는 키워드로 검색하면 최상단에 노출된다. ㄷㄷ

'HTML & CSS' 카테고리의 다른 글

CSS 적용 우선순위 (Specificity), JS로 style 다루기  (0) 2020.11.29
CSS에 변수와 계산식을 사용해보자! - calc(var(--myVar) + 180px)  (0) 2020.11.28
HTML, Tomcat, JAVA의 시작 2020-05-25 : HttpServlet  (0) 2020.05.26
'HTML & CSS' 카테고리의 다른 글
  • CSS 적용 우선순위 (Specificity), JS로 style 다루기
  • CSS에 변수와 계산식을 사용해보자! - calc(var(--myVar) + 180px)
  • HTML, Tomcat, JAVA의 시작 2020-05-25 : HttpServlet
리차드
리차드
화음을 좋아하는 리차드🎶리차드 님의 블로그입니다.
리차드
화음을 좋아하는 리차드🎶
리차드
전체
오늘
어제
  • 전체 게시글 보기 (200)
    • Portfolio (0)
    • Thoughts & Records (17)
    • 우아한테크코스 4기 (43)
    • Java & Spring (36)
    • JPA & QueryDSL (2)
    • Database (18)
    • Server & Infra (21)
    • Network (0)
    • Algorithm (11)
    • IDE (12)
    • HTML & CSS (4)
    • JavaScript (11)
    • Life (13)

블로그 메뉴

  • Github

공지사항

인기 글

태그

  • EC2
  • 웹 백엔드 4기
  • IntelliJ
  • oracle
  • 알고리즘
  • aws
  • Spring
  • SQL
  • 자바
  • 리차드
  • java
  • 우아한테크코스
  • 자바스크립트
  • 스프링
  • 스프링부트
  • javascript
  • 화음을 좋아하는
  • 오라클
  • git
  • 우테코

최근 댓글

최근 글

hELLO · Designed By 정상우.
리차드
링크 공유될 때 제목과 내용, 이미지 설정하기 : <meta property="og:title" content="!!"> + SEO 구글 검색에 노출시키기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.