나는 메타 태그의 가치를 부끄러운 방식으로 배웠다. 몇 년 전에 나는 내가 자랑스러워하는 방문 페이지를 발송하고,몇 군데에 링크를 게시하고,제목도 설명도없고 깨진 이미지 아이콘이없는 맨 URL 로 모든 곳에서 나타나는 것을 보았다. 페이지 자체는 괜찮 았지만 - 나는 결코 추가하지 않았다 그래프 열기 태그, 그래서 모든 소셜 플랫폼은 추측으로 되돌아 갔고, 그들 모두는 잘못 추측했습니다.내용은 좋았고 링크의 프리젠 테이션은 쓰레기 였는데, 실제로 페이지가받을만한 것보다 훨씬 적은 클릭을 의미했습니다.
메타 태그는 페이지 자체를 제외한 모든 곳에서 페이지가 어떻게 보이는지를 결정하는 HTML 의 작은 블록입니다: Google's 결과에서,Slack unfurl 에서,Facebook 또는 LinkedIn 카드에서,트윗에서 세 개의 겹치는 표준이 있기 때문에 잘못되기 쉽습니다 - 표준 SEO 태그,오픈 그래프 및 트위터 카드 - 그리고 각각은 종종 동일한 정보에 대해 약간 다른 속성 이름을 구축합니다 Toolz.dev 그리고 그 주위에 많은 콘텐츠를 작성하기 때문에 지속적으로 메타데이터를 설정하고 구축했습니다 메타 태그 생성기 한 입력 세트에서 정확하고 완전하며 복사 준비가 완료된 태그 블록을 생성하려면 길이 경고가 포함되어 있으므로 다시 잘리는 제목을 배송하지 않습니다.
TL;DR: 메타 태그는 검색 스니펫과 소셜 링크 미리보기를 제어합니다. 표준 SEO 태그,대부분의 플랫폼에 대한 Open Graph 및 Twitter 카드 등 세 가지 중복 세트가 필요하며 대부분의 콘텐츠를 공유하지만 다른 속성 이름을 사용합니다. The 메타 태그 생성기 하나의 양식에서 세 가지를 모두 빌드하고, 제목이 ~60자를 통과하거나 설명이 ~160을 통과하면 경고하고, 텍스트를 안전하게 이스케이프하고, 일치하는 JSON-LD 블록을 모두 브라우저에서 내보낼 수 있습니다.
메타 태그란 무엇이며 왜 중요한가요?
메타 태그는 page's 안에 사는 요소이다 <head> 그리고 페이지에 표시된 내용보다는 페이지에 대한 정보를 가지고 다니세요. The <title> 태그와 <meta name="description"> 태그는 가장 오래되고 가장 중요한 두 가지입니다: 함께 그들은 일반적으로 구글 검색 결과에서 클릭 가능한 헤드 라인과 회색 요약 라인을 형성한다. 그들을 바로 얻을 결과는 잘 읽고 클릭을 적립; 그들을 밖으로두고 검색 엔진은 종종 어색하게, 페이지 텍스트에서 뭔가를 합성.
그 기본을 넘어 두 개의 사회적 기준을 앉아. 오픈 그래프, 원래 페이스 북에서하지만 지금은 링크드 인에 의해 영광, 슬랙, 불화, 핀터레스트, WhatsApp, 그리고 더 많은, 같은 태그를 사용합니다 og:title, og:description, 그리고 og:image 공유 링크가 카드로 표시되는 방식을 제어하려면 Twitter Cards do the same job for Twitter/X with twitter: 태그. 중복이 많습니다. 제목과 설명은 일반적으로 세 가지 모두에서 동일합니다. 하지만 각 플랫폼은 자체 네임스페이스를 읽으므로 링크가 공유될 수 있는 모든 곳을 포괄하려면 세 가지를 모두 제공해야 합니다.
이것이 중요한 이유는 레버리지입니다. 동일한 콘텐츠는 링크 미리보기가 완전하고 매력적일 때 훨씬 더 많은 참여를 얻습니다. 좋은 제목과 설명은 검색에서 클릭을 해제합니다; 적절한 Open Graph 카드는 모든 소셜 공유에서 클릭을 해제합니다. 메타 태그는 페이지를 찾거나 공유할 때마다 계속 성과를 거두는 페이지당 일회성 설정으로,정확히 신중하게 수행할 가치가 있는 작업입니다. 그만큼 메타 태그 생성기 설정이 메모리에서 복사하여 붙여넣는 작업이 아닌 양식 채우기 작업이 되도록 존재합니다.
메타 태그 생성기는 태그를 어떻게 구축합니까?
생성기는 하나의 구조화된 입력 집합 - 제목,설명, 이미지,URL, 사이트 이름,그리고 소수의 옵션 - 을 가져와서 HTML 의 세 개의 조정된 블록으로 팬아웃합니다. 팬아웃을 이해하면 한 양식이 왜 그렇게 많은 태그를 생성하는지 설명해 줍니다.
핵심 필드에서 먼저 작성합니다 기본 태그: 그만큼 <title>및 메타 설명과 선택적 키워드, 작성자, 로봇, 언어, 테마 색상, 표준 링크를 사용합니다. 그런 다음 동일한 제목, 설명, 이미지를 재사용하여 작성합니다 그래프 블록 열기 와 함께 og: 속성 이름을 추가합니다 og:type, og:url, 그리고 og:site_name. 마지막으로 다음과 같이 씁니다 트위터 카드 블록 와 함께 twitter: 카드 스타일과 매핑된 핸들을 포함한 이름입니다 twitter:site 그리고 twitter:creator. 세 가지 모두 동일한 입력에서 추출하기 때문에 자동으로 동기화됩니다. 실수로 Facebook에 제목을 하나, Twitter에 다른 제목을 부여할 수는 없습니다.
두 가지 세부 사항으로 출력을 붙여 넣기에 안전합니다. 첫째,실제로 입력 한 필드 만 생성 태그를 작성하므로 빈 상태로 배송하지 않습니다 content="" 속성. 둘째,모든 값은 HTML 이스케이프됩니다: 설명의 따옴표,앰퍼샌드 또는 앵글 괄호가 해당 엔터티로 변환되므로 속성에서 벗어나 마크업을 손상시킬 수 없습니다. The 메타 태그 생성기 또한 선택적으로 일치하는 JSON-LD 구조화된 데이터 블록을 방출합니다. 이는 페이지를 검색 엔진에 설명하는 별개이지만 보완적인 방법입니다.
제목과 메타 설명은 얼마나 길어야 합니까?
이것은 대부분의 사람들에게 걸려 넘어지는 질문이며,답은 하드 문자 캡이 아닌 디스플레이 너비에 관한 것입니다. 검색 엔진은 할당 된 공간을 초과하는 제목과 설명을 자르므로 실용적인 한계는 텍스트가 줄임표로 잘리기 시작하는 지점입니다.
제목의 경우 대략 50~60자를 목표로 합니다. Google은 제목을 최대 약 600픽셀 너비로 렌더링합니다. 이는 일반적인 텍스트의 경우 약 60자로 작동하며 끝을 자르는 것을 초과합니다. 메타 설명의 경우 약 120~160자를 목표로 합니다; 설명은 데스크탑에서 잘리기 전에 대략 160자까지 실행될 수 있으며 모바일은 때때로 더 짧습니다. 둘 다 문자가 아닌 픽셀로 측정되기 때문에 두 제한 모두 정확하지 않습니다. 넓은 문자로 가득 찬 제목은 좁은 문자로 가득 찬 제목보다 빨리 잘립니다. 그러나 문자 지침은 디자인할 만큼 충분히 가깝습니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 메타 태그 생성기 문자를 실시간으로 계산하고 임계 값을 넘을 때 경고합니다: 60 이상의 제목 또는 160 이상의 설명은 플래그가 지정되므로 배송 전에 다듬을 수 있습니다. 또한 제목이 매우 짧을 때 넛지됩니다. 20 자 제목은 키워드에 사용할 수있는 공간을 낭비하기 때문입니다. 규칙보다는 지침입니다 - 약간 긴 제목은 재앙이 아닙니다 - 그러나 글을 쓰는 동안 카운트를 보는 것은 정직하게 유지합니다. 제목과 설명을 많이 튜닝하는 경우 워드 카운터 길이 목표를 달성해야 하는 긴 복사본에 편리합니다.
SEO 태그, Open Graph 및 Twitter Cards의 차이점은 무엇입니까?
그들은 다른 소비자들에게 봉사하며,당신이 하나만 다루었을 때 당신이 끝났다고 생각하지 못하게하는 것이 무엇인지 아는 것입니다. 다음은 그들이 공유하는 분야에 대해 세 세트가 어떻게 정렬되는지입니다.
| 목적 | SEO 태그 | 그래프 열기 | 트위터 카드 |
|---|---|---|---|
| 페이지 제목 | <title> |
og:title |
twitter:title |
| 요약 | meta name="description" |
og:description |
twitter:description |
| 미리보기 이미지 | - | og:image |
twitter:image |
| 정식 주소 | link rel="canonical" |
og:url |
twitter:url |
| 카드 스타일 | - | og:type |
twitter:card |
| 귀속 | meta name="author" |
og:site_name |
twitter:site |
SEO 열은 Google 이 검색 결과에 대해 읽는 것입니다. Open Graph 열은 대부분의 소셜 및 채팅 플랫폼이 링크 카드에 대해 읽는 것입니다. Twitter 열은 Twitter/X 가 읽는 것입니다. 중복은 명백합니다 - 제목과 설명은 세 가지 모두에서 반복됩니다 - 그러나 각 플랫폼은 자체 네임스페이스에서만 보이기 때문에 열을 생략하면 플랫폼이 추측으로 되돌아갑니다. The 메타 태그 생성기 플랫폼 추측을 떠나지 않도록 한 양식의 세 열을 모두 정확하게 채웁니다.
JSON-LD 구조화된 데이터가 계속 필요합니까?
메타 태그와 구조화 된 데이터는 서로 다른 질문에 답하므로 유용한 것들은 서로를 대체하기보다는 보완합니다. 메타 태그는 플랫폼에 페이지를 표시하는 방법을 알려줍니다; JSON-LD 는 풍부한 결과를 잠금 해제 할 수있는 기계 판독 가능한 방식으로 페이지가 무엇인지 검색 엔진에 알려줍니다.
JSON-LD는 JSON 블록으로 둘러싸여 있습니다 <script type="application/ld+json"> 태그, 그 입력 된 엔터티로 페이지를 설명 - 웹 사이트, 기사, 제품, 조리법, 등등 - 명명 된 속성과. 검색 엔진은 관계를 이해하고, 올바른 경우에, 검색에 직접 기사 bylines, 별 등급, 또는 FAQ 아코디언과 같은 향상된 결과를 표시하기 위해 그것을 사용하여 제목과 설명이하는 방식으로 스니펫을 제어하지 않습니다; 그것은 상단에 의미의 레이어를 추가합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 메타 태그 생성기 메타 태그와 함께 스타터 JSON-LD 블록을 방출하며 Open Graph 유형을 기반으로 웹 사이트 또는 문서로 입력되고 동일한 필드에서 채워집니다. 이는 유형별 속성으로 확장할 수 있는 견고한 기반입니다. 구조화된 데이터는 풍부한 결과를 얻을 수 있는 자격을 원할 때마다 추가할 가치가 있지만 마법 순위 레버는 아니지만 기능을 활성화하지만 강제로 적용하지는 않습니다. 이러한 조각이 어떻게 조화를 이루는지에 대한 더 넓은 그림을 위해 웹 개발자 툴킷 검거는 제가 사용하는 주변 도구들을 덮습니다.
메타 태그 생성기의 일반적인 사용 사례입니다
새 페이지 또는 사이트 실행하기
명백한 것. 모든 새로운 페이지에는 제목,설명 및 소셜 카드가 필요하며 SEO,Open Graph 및 Twitter 태그의 전체 세트를 손으로 입력하는 것은 지루하고 오류가 발생하기 쉽습니다. 양식을 한 번 채우고 완전하고 올바른 블록을 복사하면 까다로운 작업이 30 초로 바뀌고 길이 경고는 첫날 잘리는 대신 완전히 표시되는 스니펫으로 페이지가 시작됨을 의미합니다.
잘못되었거나 누락된 링크 미리보기 수정
공유 링크가 이미지 또는 잘못된 텍스트 없이 표시되면 거의 항상 원인이 누락되거나 잘못된 형식의 Open Graph 태그입니다. 생성기로 태그 다시 작성 - 확인 og:image, og:title, 그리고 og:description 모두 존재하고 정확합니다 - 미리보기를 수정합니다. 업데이트 후 관련 platform's 캐시는 때때로 디버깅 도구를 통해 새로 고쳐야 하지만 태그 자체가 올바르게 나옵니다.
팀 전체의 메타데이터 표준화
여러 기여자가 있는 프로젝트에서 메타 태그가 드리프트됩니다: 한 페이지에는 트위터 태그가 있고 다른 페이지에는 그렇지 않으며 세 번째 페이지에는 권장 길이의 두 배에 해당하는 설명이 있습니다. 단일 생성기를 완전한 태그 세트의 모양에 대한 참조로 사용하면 모든 사람이 동일한 형태의 메타데이터를 생성하고 출력은 프로젝트가 기대하는 태그를 정확하게 문서화하는 데 두 배가 됩니다.
프레임워크를 위한 메타데이터 준비
Next.js, Nuxt, React 또는 이와 유사한 것에서는 원시 붙여넣기를 하지 않습니다 <meta> 태그 - 당신은 헤드 또는 메타 데이터 API 에 값을 공급. 생성기는 여전히 당신이 필요로하는 태그와 값에 대한 진실의 소스로 유용합니다: 양식을 작성하고,전체 세트를 읽고,당신의 framework's 메타 데이터 개체에 번역에 대한 추측을 제거합니다 og: 그리고 twitter: 포함할 필드입니다.
왜 브라우저에서 메타 태그를 생성합니까?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 메타 태그 생성기 완전히 클라이언트 측에서 실행됩니다. 입력한 제목,설명, URL 및 이미지 링크는 브라우저에 유지되며 업로드되지 않으며,이 도구는 로드된 후 오프라인으로 작동합니다. 아직 공개되지 않은 페이지 - 미공개 제품,client's 초안 캠페인,내부 도구에 대한 메타데이터를 자주 준비하고 있기 때문에 개인 정보 보호가 중요합니다. 서버 측 생성기에 붙여넣는 것은 예고되지 않은 계획을 다른 사람에게 전달하는 것을 의미합니다's 로그; 브라우저에서 수행하면 기계를 떠나지 않는다는 것을 의미합니다. 그만큼 온라인 도구의 데이터 개인 정보 보호 가이드는 내가 이것을 협상할 수 없는 것으로 취급하는 이유를 설명합니다.
메타데이터 작업은 또한 몇 가지 이웃 작업에 연결됩니다. The 슬러그 생성기 표준 및 깨끗한 URL을 구축합니다 og:url 태그가 가리킵니다. 그만큼 HTML 엔터티 인코더 고집스런 캐릭터를 손에서 벗어나야 할 때 유용합니다. 그리고 URL 인코더/디코더 때때로 표준 URL 을 끊는 쿼리 매개 변수에 대한 인코딩을 처리합니다. 함께 그들은 올바르게 페이지를 배송 둘러싸고있는 작고 엄격한 작업을 다룹니다.
자주 묻는 질문
생성기는 어떤 메타 태그를 생성합니까?
제목,설명, 키워드,저자, 로봇,언어, 테마-색상,정규-표준 SEO 태그와 더불어 og:title,og: description,og: image,og:url 과 같은 Open Graph 태그와 일치하는 Twitter Card 태그를 생성합니다. 또한 JSON-LD 구조화된 데이터 블록을 방출할 수도 있습니다. 입력한 필드만 태그를 생성하므로 출력은 깨끗하게 유지됩니다.
내 제목과 메타 설명은 얼마나 길어야 합니까?
약 50~60 자 정도의 제목과 약 120~160 자 정도의 설명을 목표로 합니다. Google 은 정확한 문자가 아닌 픽셀 단위로 너비를 측정하기 때문에 해당 지점을 지나 텍스트를 잘라냅니다. 생성기는 입력할 때 카운트하며 검색 결과에서 제목이나 설명이 잘릴 가능성이 있을 때 경고합니다.
열린 그래프 태그는 무엇이며 필요합니까?
Open Graph 태그는 Facebook,LinkedIn, Slack,Discord 및 기타 여러 플랫폼에서 공유 할 때 페이지가 어떻게 보이는지 제어합니다. 공유 링크가 없으면 이미지 나 어색한 대체 텍스트가 표시되지 않을 수 있습니다. 콘텐츠가 공유되는 모든 곳에서 매력적이고 예측 가능한 링크 미리보기를 원한다면 Open Graph 태그를 강력히 권장하며 생성기가이를 구축합니다.
두 트위터 카드 유형의 차이점은 무엇입니까?
요약 카드는 제목과 설명 옆에 작은 사각형 축소판을 표시하고 summary_large_image 는 그 위에 큰 배너 이미지를 표시합니다. 미리보기를 지배하려는 넓은 고품질 공유 이미지가있을 때 큰 이미지 카드를 사용하고 요약을 사용하여보다 컴팩트 한 카드를 생성기로 전환하여 올바른 twitter: card 값을 작성할 수 있습니다.
생성된 메타 태그는 어디에 두나요?
HTML 페이지의 헤드 요소 내부에 블록을 붙여넣기,이상적으로는 다른 스크립트보다 맨 위에 가까이 붙입니다. Next.js,React, Vue 와 같은 프레임워크에서는 생성된 HTML 을 정확히 어떤 태그와 값을 포함할지에 대한 참조로 사용하여 framework's 헤드 또는 메타데이터 API 를 통해 동등한 태그를 추가합니다.
오픈 그래프 태그가 있는 경우에도 표준 URL이 필요합니까?
예. 표준 링크는 중복 콘텐츠 문제를 피하기 위해 페이지의 권한 있는 버전인 URL 을 검색 엔진에 알려주는 반면,og: url 은 소셜 미리보기에 사용되는 URL 을 설정합니다. 값이 일반적으로 동일하더라도 서로 다른 용도로 사용되므로 둘 다 설정하는 것이 좋습니다.
메타 태그 생성기는 무료이며 비공개입니까?
예. 제한 없이 완전 무료이며,모든 태그는 브라우저 내부에 JavaScript 로 빌드됩니다. 입력한 텍스트,URL 및 이미지 링크는 서버로 전송되지 않으므로 게시되지 않은 페이지 또는 내부 페이지에 대한 메타데이터를 안전하게 준비할 수 있습니다.
메타 태그를 추가하면 검색 순위가 향상되나요?
메타 태그는 검색 엔진과 소셜 플랫폼이 페이지를 올바르게 표시하는 데 도움이되지만 많은 요소 중 하나입니다. 강력한 제목과 설명은 클릭률을 높일 수 있으며 구조화 된 데이터는 풍부한 결과를 가능하게하지만 콘텐츠 품질,링크 및 사이트 상태는 여전히 순위를 매기는 것이 아니라 필요한 기초로 좋은 메타 태그를 취급합니다. 순위 바로 가기.
