당신의 블로그 게시물을 위해 사람들의 주목을 끄는 풍부한 부분을 만듭니다
소셜 미디어 플랫폼은 풍부한 부분을 위해 자신의 메타데이터 규범을 만들었는데 그 목적은 인터넷 창조자들이 그 내용을 더욱 잘 홍보하도록 돕는 것이다.검색 엔진 결과는 일반적으로 사용자가 제공한 메타데이터로 채워집니다.
메타데이터는 HTML 페이지를 설명하는 정보로 일반적으로 페이지의 요소에 포함된 내용입니다.
왜 이렇게 귀찮아요?
TLDR:태그입니다.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<!-- usually used by search engines -->
<title>Pimp your Blog: Calculate the 'reading time' ⏱🦉</title>
<meta name="author" content="Rob O'Leary" />
<meta
name="description"
content="Can we add anything to a standard blog that would enhance the reading experience? How about the estimated reading time?"
/>
<!-- For social media rich snippets-->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitterhandle" />
<meta name="twitter:creator" content="@twitterhandle" />
<meta
property="og:url"
content="https://roboleary.net/programming/2020/04/24/pimp-blog-reading-time.html"
/>
<meta property="og:type" content="article" />
<meta property="article:section" content="Technology" />
<meta property="article:published_time" content="2020-04-24T14:54:50+00:00" />
<meta property="article:author" content="https://www.facebook.com/username" />
<meta
property="og:title"
content="Pimp your Blog: Calculate the 'reading time' ⏱🦉"
/>
<meta
property="og:description"
content="Can we add anything to a standard blog that would enhance the reading experience? How about the estimated reading time?"
/>
<meta
property="og:image"
content="https://roboleary.net/assets/img/blog/2020-04-24-pimp-blog-reading-time/banner.jpg"
/>
</head>
공통 메타데이터
제목 요소
title 요소는 문서의 제목을 설정합니다.검색 엔진 결과 페이지(SERP)에서는 일반적으로 결과의 제목입니다.페이지마다 제목이 있어야 합니다!
원소
메타데이터는 광범위한 메타데이터를 덮어쓰는 일반적인 메타데이터 요소입니다.
이름 및 컨텐트 속성 사용
우리는 이름과 내용 속성을 명칭-값 쌍으로 사용하여 메타데이터를 설명할 수 있다.
name="author": 페이지의 작성자를 설명합니다.한 명의 작가만 성명할 수 있습니다.
name = "description": 페이지의 내용을 설명합니다. 보통 검색 엔진에서 그 결과에 대한 설명으로 사용됩니다.150자로 유지하는 것은 좋은 경험칙이다. 왜냐하면 텍스트는 보통 이 점 근처에서 끊어지기 때문이다.
소셜 미디어 플랫폼의 메타데이터
도면 열기
페이스북의 개방형 그래픽은 사용자의 타임라인에 내용을 표시하는 방식을 지정할 수 있습니다.만약 이런 라벨이 없다면, 페이스북 파충류는 내부 계발식 알고리즘을 사용하여 내용의 제목, 묘사, 이미지에 대해 가장 좋은 추측을 할 것이다.
다음 소셜 미디어 플랫폼은 Open Graph를 사용합니다.
속성 이름
묘사
컨텐트 속성에 허용되는 값
og:url
페이지의 사양 URL입니다.
이것은 세션 변수와 매개변수가 없는 URL이어야 합니다.
og: 제목
페이지의 제목입니다.
한 줄
head 요소와 동일한 값을 사용합니다.og: 설명
내용의 간략한 묘사.
한 줄
title와 같은 값을 사용합니다.og:이미지
누군가가 내용을 페이스북에 공유할 때 표시되는 이미지의 URL입니다.최소 1080 픽셀의 이미지를 사용하여 고해상도 장치에서 최상의 디스플레이를 구현합니다.최소한 600픽셀 너비의 이미지를 사용하여 이미지 링크 광고를 표시해야 합니다.
이미지의 URL입니다.
fb:app\U id
Facebook Insights를 사용하기 위해서는 응용 프로그램 ID를 페이지에 추가해야 합니다.
한 줄
og: 유형
컨텐츠의 미디어 유형입니다.이 라벨은 당신의 내용이 뉴스 요약에 표시되는 방식에 영향을 줄 것입니다.유형이 지정되지 않으면 기본적으로 웹 사이트입니다.
이것은full list of types입니다.일부 가치관은 다음과 같다. - 문장-서적-사이트-음악-영상
og:로케일
리소스의 로케일기본값은 en_US입니다.
언어는 ll_CC 형식을 사용합니다. 여기서 ll은 두 알파벳의 언어 코드이고 CC는 두 알파벳의 국가 코드입니다.
글: 게시 시간
이 문장이 처음 발표되었을 때.
날짜 시간
글: 수정 시간
문장의 마지막 변경 시간.
날짜 시간
약관: 만료 시간
물품이 기한이 지났을 때.
날짜 시간
글: 저자
글의 작자.
구성 파일 패턴
문장: 장
기술 같은 고급 부분 이름
한 줄
글: 태그
본문과 관련된 표기.
문자열 배열
전형적인 블로그 글은 다음과 같이 표시할 수 있다.
<head>
<meta
property="og:url"
content="https://roboleary.net/programming/2020/04/24/pimp-blog-reading-time.html"
/>
<meta property="og:type" content="article" />
<meta property="article:section" content="Technology" />
<meta property="article:published_time" content="2020-04-24T14:54:50+00:00" />
<meta property="article:author" content="https://www.facebook.com/username" />
<meta
property="og:title"
content="Pimp your Blog: Calculate the 'reading time' ⏱🦉"
/>
<meta
property="og:description"
content="Can we add anything to a standard blog that would enhance the reading experience? How about the estimated reading time?"
/>
<meta
property="og:image"
content="https://roboleary.net/assets/img/blog/2020-04-24-pimp-blog-reading-time/banner.jpg"
/>
</head>
이 탭들은 페이스북 분석 세트Facebook Insights의 데이터 통계 데이터를 추적할 수 있다.페이지에 포함
<meta name="description" .. /> 해야 사용할 수 있습니다.더 많은 정보the specification for Open Graph here를 읽을 수 있습니다.
지저귀다
트위터는 풍부한 부분을 트위터 카드라고 부른다.
Twitter Cards are customizable media units that advertisers can use to drive traffic to their website or mobile app.
트위터의 메타데이터는 개방도와 유사하며 같은 약정을 바탕으로 한다.오픈 맵을 사용하여 페이지의 데이터를 설명할 때 트위터 카드를 쉽게 만들 수 있으며 요소와 데이터를 복제할 필요가 없다.트위터 카드 프로세서가 페이지의 메타데이터를 볼 때 트위터의 특정한 속성을 먼저 검사하고 존재하지 않으면 같은 Open Graph 속성으로 돌아갑니다.
속성 이름
묘사
컨텐트 속성에 허용되는 값
트위터: 카드
카드 유형.페이지당 하나의 카드 유형만 지원됩니다.페이지에 여러 개의 값이 있으면 순서의 마지막 값이 우선합니다.
다음 값 중 하나:
- 요약: 트위터의 기본 카드.제목, 설명, 축소판, 트위터 계정 속성, 내용에 대한 직접 링크가 포함됩니다.이것들은 모두 위대한 블로그 게시물이다!
- 요약 _ 큰 그림 _ 이미지: 큰 그림 요약 카드는 일반 요약 카드와 같은 기능을 가지지만 이미지가 더 큽니다.
- 애플리케이션
- 플레이어
트위터: 사이트
콘텐츠를 게시하는 사이트나 플랫폼의 트위터 계정@카드 페이지에 사용된 사이트의 사용자 이름입니다.
@ 사용자 이름
트위터: 작성자
카드에 내용을 만든 개인 사용자입니다.
@ 사용자 이름
따라서 Open Graph 메타데이터를 제공한 경우 추가할 유일한 추가 메타데이터는 다음과 같습니다.
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitterhandle" />
<meta name="twitter:creator" content="@twitterhandle" />
마지막 한마디
풍부한 코드 세션에 메타데이터를 포함하기 위해 많은 노력을 기울일 필요가 없습니다. 독자 수를 늘리려면 가치가 있습니다.
너는 모든 박문을 위해 재미있고 독특한 이미지를 선택해 보아야 한다.모든 화면 해상도에서 잘 보일 수 있도록 최소 1080픽셀 너비와 1MB 이하의 이미지를 사용해 보십시오.
정적 사이트 생성기를 사용한다면, 메타데이터 필드를 변수로 채우는 간단한 방법이 있어야 합니다.Jekyll을 사용하는 경우 메타데이터를 채울 수 있는 전역 변수와 프런트엔드 내용을 보려면 this article 를 읽을 수 있습니다.
Reference
이 문제에 관하여(당신의 블로그 게시물을 위해 사람들의 주목을 끄는 풍부한 부분을 만듭니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/robole/pimp-your-blog-create-eye-catching-rich-snippets-54ei텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
