모든 소셜 미디어 및 메시징 앱에서 모든 링크 미리보기 메타 태그를 테스트했으므로 그럴 필요가 없습니다! 그것은 매우 지루했다!

11056 단어 htmlperformancewebperfwebdev
중복<head> 태그에 대한 시리즈의 첫 번째 부분 — 여기에서 읽을 수 있습니다: get out of my <head>

소셜 미디어는 정신 건강, 개인 정보 보호, 민주주의, 웹사이트 성능에 좋지 않습니다.

대부분의 웹사이트의 소스 코드에서 <head> 태그 사이를 보면 다음과 같은 메타 태그를 많이 볼 수 있습니다.

<!-- Meta tags generated by metatags.io -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate"><meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">


이러한 태그의 목적은 메시지 및 소셜 미디어 앱에 표시 방법을 알려주는 것입니다link previews.
Link previews 사람들이 링크를 클릭하기 전에 링크에 대해 알립니다. URL의 title , description , 때로는 image 를 표시합니다.

다음은 iMessage에 표시되는 링크 미리 보기의 예입니다.



링크 미리보기를 만드는 방법



링크 미리 보기를 생성하는 데 널리 사용되는 네 가지 시스템이 있습니다.
  • Facebook's open graph

  • oEmbed
  • schema.org

    • 이러한 시스템에는 구현 방법이 두 가지 이상 있습니다. (아래 표 참조)

    이러한 모든 시스템에는 페이지의 <head> 태그 사이에 코드 스니펫을 배치하는 작업이 포함됩니다.

    이러한 코드 스니펫을 추가하면 Facebook, Twitter 및 기타 앱에서 실행하는 봇이 사이트를 구축link previews하는 데 도움이 됩니다.

    그러나 이 코드는 또한 모든 인간 방문자를 위해 웹 사이트에 부담을 주므로 많은 웹 사이트에서 이러한 방법 중 서너 가지를 구현합니다.

    이러한 태그가 없을 수도 있습니다. 괜찮습니다.

    그러나 귀하의 웹사이트link previews가 표시되기를 원한다고 가정할 때 이러한 태그의 가장 효과적인 조합은 무엇입니까?

    그것이 세상이 알아야 할 사항입니다. 그래서 저는 link preview tester. 지금까지 만든 도구 중 가장 지루한 도구일 것입니다. 누군가에게 도움이 되었으면 합니다.

    어떤 메타 태그가 어떤 앱에서 작동합니까?



    This table shows the results 가장 인기 있는 일부 소셜 미디어 및 메시지 앱에서 사용 중입니다. 어떤<meta> 태그가 어떤 앱에 표시되는지link previews 보여줍니다.

    개방형 그래프 태그가 확실한 승자



    나는 오픈 소스 방법 중 하나인 schema.org 또는 oEmbed가 내가 추천할 수 있을 만큼 충분히 이러한 앱에서 잘 작동한다는 것을 발견하기를 바랐습니다.

    그러나 분명한 승자는 Facebook의 Open Graph 태그인 것 같습니다.

    다음은 중복 태그가 없는 metatags.io의 동일한 예입니다. 크기는 1.335 kB에서 729 bytes까지입니다.

    <title>Meta Tags — Preview, Edit and Generate</title>
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">


    내 사랑스러운 웹사이트를 오염시키는 Facebook 또는 Twitter 독점 메타 태그를 원하지 않으면 어떻게 합니까?



    Facebook과 Twitter는 기본적으로 사악하므로 태그를 사용하지 않으려는 경우 이해할 수 있습니다.
    meta description 태그를 사용하고 웹사이트의 링크 미리보기에 이미지가 없는 상태로 사는 방법을 배울 수 있습니다…

    <title>Get out of my &lt;head&gt;</title>
<meta name="description" content="An incredible website for testing meta tags">


    또는 meta description , Schema.org microdata 및 oEmbed JSON 조합을 사용할 수 있습니다. 이 조합은 독점 태그를 사용하지 않고 가장 많은 수의 앱에서 작동합니다.

    <head lang="en" itemscope itemtype="https://schema.org/WebPage">
    <title>Link Preview Test | Title Tag</title>

    <meta name="description" content="Test Description | Meta Description — This description came from the meta description tag"/>

    <meta itemprop="name" content="Test Title | Schema.org Microdata Title"/>
    <meta itemprop="description" content="Test Description | Schema.org Microdata — This description came from Microdata using Schema.org Schema"/>
    <meta itemprop="image" content="/previews/microdata.png"/>

    <link rel="alternate" type="application/json+oembed" href="https://getoutofmyhead.dev/oembed_link.json" title="Test Title | oEmbed JSON Title Attribute"/>
</head>


    내가 왜 이런 짓을 했지?



    나는 12kB의 엄격한 페이지 크기 제한으로 웹사이트(missingdice.com)를 구축하고 있습니다.

    나는 getoutofmyhead.dev에 게시될 일련의 기사에 대한 연구를 수집했습니다.

    더 배우고 싶거나 이것이 유용하다고 생각되면 알려주세요!
    OOP 상속 일명 "가족에 관한 것"
    【Spring Boot】 독자적인 프로퍼티 파일을 추가해, env.getProperty()로 값을 취득하고 싶다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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