안녕하세요 잡오브브라더스입니다 : )
홈페이지를 제작 하다보면 SEO에 대해서 한번쯤은 들어보셨을거라 생각합니다!
저희 잡오브브라더스에서 SEO에 대해 알아보도록 합시다
SEO란? Search Engine Optimization의 약자로 검색엔진 최적화를 의미합니다.
SEO는 웹사이트나 웹 페이지를 검색 엔진의 검색 괄과에서 상위에 노출되도록 최적화 하는 작업을 포함합니다.
이를 통해 유기적인(비유료)트래픽을 유도하고, 브랜드의 인지도와 온라인 가시성을 향상 시킬 수 있습니다.
SEO를 홈페이지에 잘 알고 적용을 하면, 돈을 들이지 않고 검색시, 상위에 노출되게 할 수 있다는점! SEO를 홈페이지에 적용하기 전에, 준비해야 할것들이 있습니다.
1. 키워드 연구 : 검색어를 분석하고 타겟 키워드를 식별하여 해당 키워드를 포함한 콘텐츠를 생성합니다.
2.웹사이트 최적화: 웹사이트의 기술적인 측면을 개선하여 검색엔진이 쉽게 읽고 인덱싱 할 수 있도록 합니다. 이는 메타태그, URL구조, 사이트 속도, 모바일 호환성등을 포함합니다.
3.링크빌딩 : 다른 웹사이트로부터 품질 높은 백링크를 얻는것으로, 검색엔진에서 웹사이트의 신뢰도와 권위성을 증가시킵니다.
4.컨텐츠 최적화 : 고품질의 컨텐츠를 제공하고, 키워드를 적절히 사용하여 검색엔진에서 잘 노출되도록 합니다. 컨텐츠는 사용자에게 가치를 제공하고 검색 질의에 대한 응답을 제공해야 합니다.
5.사용자 경험 개선 : 웹사이트의 사용자 경험을 향상시켜 이탈률을 감소시키고 검색엔진에서의 순위를 개선합니다. 이는 사이트의 속도, 모바일 호환성, 사용자 친화적인 디자인등을 포함합니다.
6.소셜미디어 활용: 소셜미디어를 통해 웹사이트의 가시성을 높이고 소셜 신호를 구축하여 검색엔진 순위에 영향을 줄 수 있습니다. SEO 메타태그에는 어떠한 것들이 있을까요?
<head>
<meta charset="UTF-8">
<meta name="description" content="웹 페이지의 간단한 설명입니다.">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="author" content="작성자 이름">
<title>웹 페이지 제목</title>
</head>
매다태그(Meta tags)는 HTML문서의 헤더 부분에 포함되는 태그로, 웹 페이지의 메타데이터를 정의하는데 사용합니다.
(<head></head>태그 사이에 삽입)
name는 메타 데이터의 종류를 명시하고, content는 실제 값을 지정합니다.
SEO 메타태그 콘텐츠
마크업 페이지 제목 <title> : 페이지의 제목을 정의하는 메타태그입니다.
로봇은 페이지의 제목을 중요한 요소로 간주하므로 각 페이지마다 고유하고 설명적인 제목을 제공해야합니다.
<head>
<title>페이지 제목</title>
</head>
페이지 설명 작성 TIP!
페이지의 description 태그는 해당 페이지의 콘텐츠에 대한 간략한 설명으로, 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 이때, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 포함되어 있으면 검색 노출에 불이익을 받을 수 있습니다. 또한, 메인 페이지의 description 태그를 자주 변경하거나 과도하게 길게 작성하여 사용자가 사이트를 파악하기 어렵게 만드는 경우에도 검색 노출에 불이익을 받을 수 있습니다.
복사 붙여넣기나 키워드 나열과 같이 콘텐츠에 맞지 않는 설명문을 작성하는 것은 검색 노출에 부정적인 영향을 줄 수 있으므로 피해야 합니다. 필요한 문구만을 간추려서 작성해주세요.
검색 엔진은 페이지 내의 정보 중에서 가장 적절한 것을 자동으로 추출하여 검색 결과에 표시합니다. 따라서 페이지의 설명문 태그뿐만 아니라 오픈 그래프 태그에도 일관된 문구를 작성하는 것이 좋습니다.
요약하면, 페이지의 description 태그는 해당 페이지의 콘텐츠에 대한 간략한 설명으로 작성되어야 합니다. 키워드의 반복이나 스팸성 키워드를 피하고, 메인 페이지의 설명문을 자주 변경하지 않고 적절한 길이로 유지해야 합니다. 또한, 오픈 그래프 태그에도 일관성 있는 문구를 작성해야 합니다.
오픈 그래프
<head>
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/myimage.jpg">
<meta property="og:url" content="http://www.mysite.com">
</head>
오픈그래프 태그는 사이트가 소셜 미디어로 공유 될 때 우선적으로 활용되는 정보입니다.
사이트의 제목, 설명과 더불어서 사이트를 대표하는 이미지도 같이 넣어주세요.
오픈그래프에서 사용하는 이미지 크기는 가로 세로 150x150보다는 커야합니다.
이미지 파일 사이즈 크기가 5,000byte이상이어야 합니다.
가로 세로 비율이 3:1을 넘지 않아야 합니다. 각 문서를 대표 할 수 있는 이미지를 넣어주세요.
서로 다른 페이지에 중복하여 출현하는 이미지 또는 로고이미지와 같은 경우 문서를 대표하는 이미지로 볼 수 없습니다!
* 참고 : 자세한 내용은 ( https://ogp.me/ )사이트에서 확인해주세요
소셜미디어
<head>
...
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/article/article1_featured_image.jpg">
<meta property="og:url" content="http://www.mysite.com/article/article1.html">
...
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="http://www.mysite.com/article/article1.html">
<meta name="twitter:domain" content="사이트 명">
...
</head>
페이지의 메타 정보에 소셜 미디어에서 제공하는 다양한 부가 정보를 넣어주세요. 검색 뿐만 아니라 소셜 미디어에 내에서 공유될 콘텐츠의 정보를 여러분 스스로 결정함으로써 사용자의 페이지 방문을 높일 수 있습니다 : )
반응형 웹
<head>
<meta name="viewport" content="width=device-width">
</head>
반응형 홈페이지의 장점은 웹 브라우저가 웹 문서의 가로폭을 기기의 스크린 크기에 맞게 자동적으로 조절하는 기법입니다. 반응형으로 제작된 홈페이지에 viewport 메타태그를 추가함으로써, 사용자가 페이지의 확대/축소 없이 웹 콘텐츠를 보다 쉽게 소비 할 수 있도록 도와줍니다.
오늘은 메타태그에 대해 알아보는 시간을 가졌습니다. 오늘 포스팅하여 정리한 글이 검색해서 들어오신 모든 분들에게 도움이 되셨으면 좋겠습니다 : )