메타데이터 요소
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
Open Graph Protocol
위와 같은 미리보기를 구성하는데 사용할 수 있다.
head 태그 안에 meta 태그와 og: 접두사를 가진 속성이 이 프로토콜의 사양이다.
위 SO 질문의 경우 아래와 같은 메타데이터를 가지고 있다:
<meta property="og:type" content="website">
<meta property="og:url" content="https://stackoverflow.com/questions/44131207/could-any-one-tell-me-the-real-reason-of-spring-data-projection-in-my-case">
<meta property="og:site_name" content="Stack Overflow">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded">
<meta name="twitter:title" property="og:title" itemprop="name" content="Could any one tell me the real reason of spring-data projection in my case?">위에서 og:type, og:url, og:image, og:title 4개가 기본 메타데이터이고, og:site_name은 선택적인 메타데이터이다.
선택 메타데이터는 이미지 크기를 조정한다거나, 설명을 추가하는 등 다양한 종류가 있다.
트위터의 경우 Twitter Card라 부르는 독립적인 메타데이터를 사용하는데, 위의 twitter:title이 해당한다.
<h1> ~ <h6> 구역 제목 요소
여러개의 <h1> 사용을 피할 것
Avoid using multiple <h1> elements on one page - MDN
While using multiple
<h1>elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single<h1>element that describes the content of the page (similar to the document'selement).</p> </blockquote> <p><code class="language-text"><h1></code> 여러개를 사용하는 것이 허용되긴 하지만, 좋은 방법은 아니다. 페이지에는 보통 페이지의 내용을 설명하는 하나의 <code class="language-text"><h1></code> 요소가 있어야 한다.</p> <p>SEO 관점에서도 하나만 있는 것이 좋다고 한다.</p></div><div class="Comments__Container-sc-1ajj4d9-0 gcJKrk"><hr/><div></div></div></div></div><div class="PageLayout__Side-sc-11jfopf-2 fcNrhi"><div><h3 class="Wiki__RelatedLinksHeader-sc-16q9onf-1 dfdJvI">Related Links</h3><ul class="Wiki__RelatedLinks-sc-16q9onf-2 rESXq"><li><a href="../java" style="font-size:0.5em;margin-right:0.5em">java</a></li><li><a href="../gatsbyjs" style="font-size:0.5em;margin-right:0.5em">gatsbyjs</a></li><li><a href="../design-pattern" style="font-size:0.5em;margin-right:0.5em">design-pattern</a></li><li><a href="../object-oriented-programming" style="font-size:0.5em;margin-right:0.5em">object-oriented-programming</a></li><li><a href="../reactjs" style="font-size:0.5em;margin-right:0.5em">reactjs</a></li></ul></div><div class="Toc__Container-sc-1f76i2s-0 fVQyjs Wiki__TocSide-sc-16q9onf-7 dsJvyz"><ul> <li> <p><a href="#html">HTML</a></p> <ul> <li> <p><a href="#meta-%EB%A9%94%ED%83%80%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%9A%94%EC%86%8C"><meta> 메타데이터 요소</a></p> <ul> <li><a href="#open-graph-protocol">Open Graph Protocol</a></li> </ul> </li> <li> <p><a href="#h1--h6-%EA%B5%AC%EC%97%AD-%EC%A0%9C%EB%AA%A9-%EC%9A%94%EC%86%8C"><code class="language-text"><h1></code> ~ <code class="language-text"><h6></code> 구역 제목 요소</a></p> <ul> <li><a href="#%EC%97%AC%EB%9F%AC%EA%B0%9C%EC%9D%98-h1-%EC%82%AC%EC%9A%A9%EC%9D%84-%ED%94%BC%ED%95%A0-%EA%B2%83">여러개의 <code class="language-text"><h1></code> 사용을 피할 것</a></li> </ul> </li> </ul> </li> </ul></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/wiki/html/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" --> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-b032883371e35e8a6711.js\"],\"component---src-components-gatsby-templates-wiki-tsx\":[\"/component---src-components-gatsby-templates-wiki-tsx-bc549bc3d3e8ed565d53.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-2de46ab5bde6a80cb40d.js\"]}"; </script> <script>window.___webpackCompilationHash="32fe956eb1b8088f0852";</script><script src="/cat-logic/webpack-runtime-e3e074aae374812952b6.js" async></script><script src="/cat-logic/framework-3d24f1df4806fe1cdcfc.js" async></script><script src="/cat-logic/app-b032883371e35e8a6711.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>