블로그에 트위터 카드 메타 추가 방법

7719 단어 htmlwebdev
최근에 제 블로그를 읽지 않은 사람들에게 저는 제 사이트를 워드프레스에서 정적 사이트 생성기Gridsome로 바꾸고 있습니다. 이것은 VueJS를 바탕으로 구축된 것입니다.내가 워드프레스와 같은 성숙한 블로그 플랫폼을 사용할 때, 나는 많은 일들이 당연하다고 생각한다.워드프레스에서 새로운 블로그 게시물을 만들고 트위터에 공유할 때 링크가 아니라 블로그 게시물을 잘 보여 줍니다.
이것은 대다수 사람들에게 큰 일이 아닐 수도 있지만, 읽는 사람이 없다면 왜 또 써야 합니까?참여도는 소셜 미디어 플랫폼(예를 들어 트위터)의 게임 이름으로 트위터 카드(그리고 일반적인 이미지)가 참여도를 높일 수 있다는 것이 증명되었다.본고에서 나는 너에게 트위터 카드가 무엇인지, 그리고 어떻게 트위터 카드를 블로그에 표시하는지 알려줄 것이다.

트위터 카드가 뭐예요?


우리가 어떻게 트위터 카드를 블로그의 기술적 세부 사항에 추가하는지 깊이 연구하기 전에 트위터 카드가 실제로 어떤 의미가 있는지 이해한다.나는 현재 내 사이트 홈페이지에 어떤 트위터 카드도 설치하지 않았다.앉아서 이 글을 쓴 후, 나는 내가 이 문제를 해결해야 한다는 것을 깨달았다.만약 내가 트위터에 나의 홈페이지 링크를 공유한다면, 그것은 보기에 이렇다.

심심하죠?내 정보가 무엇이든지 간에 너는 그 링크를 눌러야만 하지 않을 것이다.
이것은 내가 최근 트위터에 올린 블로그 글이다.

이런 상황에서 요약과 그림이 있는 포맷이 좋은 카드를 볼 수 있다.현재 나는 그림이 측면에서 실행되기 때문에 약간의 처리가 필요할 수도 있다는 것을 인정하지만, 너는 알았다.나는 이것이 매우 좋은 보충이라고 생각한다. 너는 너의 블로그에 오늘 몇 줄의 코드만 추가할 수 있다.

무엇이 원 표시입니까


만약 네가 HTML에 익숙하다면, 아마도 너는 이전에 원 표기를 본 적이 있을 것이다.메타데이터는 데이터에 대한 데이터(정보)입니다.이것은 meta 태그가 HTML 문서에 대한 메타데이터를 제공한다는 것을 의미한다.메타데이터는 페이지에 표시되지 않지만 기계 분석을 할 수 있습니다.이것은 단지 표시되지 않을 것을 의미하지만, 페이지 원본 코드에 존재할 것입니다.
메타 태그는 HTML 문서의 헤더에 정의되며 다음 속성을 포함합니다.
속성
가치
묘사
문자 세트
문자 세트
HTML 문서의 문자 인코딩 지정하기
수용물
텍스트
http equiv나name 속성과 관련된 값을 제시합니다
등효
컨텐트 유형 기본 스타일 새로 고침
컨텐츠 속성의 정보/값에 대한 HTTP 헤더 제공
이름
응용 프로그램 이름 AuthorDescriptionGeneratoryWordsviewport
메타데이터의 이름을 지정합니다.
이것은 원 표기의 예이다.
<head>
    <meta name="description" content="Welcome to my website!">
</head>

메타 태그 용례


기왕 당신이 원 표기가 무엇인지 알게 된 이상, 그것들의 용도를 이해하는 것이 가장 좋다.다음은 당신이 이미 만났을 수 있는 원 표기 예시입니다.
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Welcome to my website!">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Dan Vega">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
검색 엔진 최적화 (SEO) 유형을 선택하면 메타 설명이 나타날 수 있습니다.

The meta description is a snippet of up to about 155 characters – a tag in HTML – which summarizes a page's content. Search engines show the meta description in search results mostly when the searched-for phrase is within the description, so optimizing the meta description is crucial for on-page SEO.


대부분의 원 표기는 이름과 내용에 불과하지만, 사실상, 당신이 원한다면, 당신이 직접 만들 수 있다.
<meta name="msg" content="hello meta tags"/>
비록 이것은 효과적인 문법이지만, 그것은 정말 아무런 작용도 하지 않는다.만약 당신이 HTML을 스캔해서 이 특정한 메타태그를 찾으려고 한다면, 그것을 포함하는 것은 의미가 있다. 그렇지 않으면 그것은 소용없다.

블로그 또는 웹 사이트에 트위터 카드 추가


아니오, 원 라벨에 대한 지식을 더 많이 알고 있습니다. 이 지식을 트위터 카드에 적용하겠습니다.설정해야 할 첫 번째 원 표시는 트위터: 카드 원 표시입니다.
<meta name="twitter:card" content="summary_large_image" />
이 태그는 다음 값 중 하나를 가질 수 있습니다.




    • 나의 사례와 예시에서 나는 앞의 블로그 글에서 내가 사용하는summary\ularge\uimage를 보여 주었다.만약 다른 표시를 예시 카드와 비교한다면, 그것들은 매우 분명하다.내가 말하고자 하는 것은 트위터에 이미지 탭이 사용하고 싶은 이미지의 전체 경로를 제공해 줄 수 있도록 하는 것이다.
    다음은 내가 그 블로그 글에서 사용한 모든 라벨과 외관이다.
    <head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:description" content="How to create your first npm package and publish it." />
  <meta name="twitter:title" content="Creating your first npm package" />
  <meta name="twitter:site" content="@therealdanvega" />
  <meta name="twitter:image" content="https://www.danvega.me/assets/static/npm_cover.bd64798.eced3da.png" />
  <meta name="twitter:creator" content="@therealdanvega" />
</head>

    만들 수 있는 다양한 유형의 카드와 모든 옵션에 대한 자세한 내용을 알고 싶으면 모두 읽어 보십시오.

    트위터 카드 인증 프로그램


    만약 당신의 트위터 카드가 정확하지 않다면, 그것들을 테스트할 수 있는 방법이 있습니다.트위터 카드 검증기를 사용하여 테스트하고 싶은 URL을 삽입하고 결과가 무엇인지, 디버깅 정보를 볼 수 있다.여기서 나는 또 다른 블로그 게시물에 들어가 트위터 카드가 어떤 모습인지 미리 보기를 받았다.

    결론


    나는 본고의 첫머리에서 사이트를 워드프레스에서 Gridsome으로 바꾸고 있다고 언급했다.이 블로그에 트위터 카드를 추가하는 방법에 관심이 있다면 알려주세요.만약 당신도 다른 소셜네트워크서비스에 유사한 메타마크를 추가하는 방법에 흥미가 있다면, 개방도에 대해 연구를 하거나 이것에 관한 다른 글을 보고 싶다고 나에게 알려줄 수 있다.
    즐거움 코드
    활용단어참조
    이 글은 처음으로 나의 블로그에 발표되었다https://www.danvega.dev/blog.만약 당신이 이 문장이 재미있다고 생각한다면 subscribing to my newsletter 나를 고려하거나 따라오세요.
    POI 작업 EXCEL
    c# excel 파일 읽기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage