Linkpreview, 소셜 미디어 및 채팅 앱에서 사이트 URL 미리보기

 (linkpreview.xyz)
5P by GN⁺ | ★ favorite | 댓글 1개
  • LinkPreview는 웹사이트 링크의 미리보기를 생성하는 프로젝트임
  • 특정 URL이 구글/X/페이스북/디스코드/왓츠앱 에서 어떻게 보이는지 한눈에 확인
  • 다른 제품이나 기존 오픈 소스 프로젝트에 비해 간단하고 사용하기 쉬운 인터페이스를 제공

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들
  • 잘 만들었고 가지고 놀기 좋음. 각 플랫폼의 기본 인터페이스 안에서 보이게 한 디테일이 특히 좋았음
    다만 플랫폼별 메타 크롤러가 다르게 동작하는 듯하고, 잘 아는 WhatsApp과 Discord 두 곳에서는 미리보기가 실제와 둘 다 맞지 않았음
    링크를 따라가며 발생하는 리다이렉트도 표시해주면 좋겠고, 대상 URL을 쿼리 파라미터나 프래그먼트로 넣을 수 있어야 함
    https://linkpreview.xyz/#example.com
    https://linkpreview.xyz/#url=https://example.com
    https://linkpreview.xyz/?url=https://example.com
    URL에 데이터를 지정할 수 없으면 귀여운 웹페이지 도구에 그치지만, URL로 제어되면 공유 가능한 네이티브 웹 유틸리티가 됨. 멋진 URL은 바뀌지 않듯, 웹에서는 URL이 API임
    트윗 https://x.com/fayazara/status/1830272619637047359을 보고 덧붙이자면, HN 상단 노출과 온갖 비판을 함께 받는 중임
  • 작은 도구로는 훌륭하지만, https://를 강제로 입력하게 하지 말고 example.com처럼 입력하면 자동으로 붙여줬으면 함
    • type="url"인 입력 필드를 쓰는 것도 방법임. 모바일 키보드에서 자동 대문자화와 자동 수정이 꺼질 것 같음
    • 맞음, 고치겠음. 진짜 짜증나는 부분임
  • 깔끔한 도구임. 몇 가지 제안하자면, 미리보기를 보여주는 서비스의 사용자 에이전트 문자열로 메타 태그와 이미지를 가져오면 좋겠음
    예를 들어 Twitter/X는 Twitterbot/1.0 사용자 에이전트 문자열로 메타 태그를 가져옴. 어떤 사이트는 해당 서비스 표시 방식에 맞게 이미지를 최적화하려고 서비스별로 다른 콘텐츠를 줄 수 있음
    또한 API가 Twitter 전용 메타 태그 [0]를 보지 않는 듯함. 모든 미리보기에 쓰이는 메타데이터 한 벌만 반환함. 예를 들어 https://govukvue.org에서는 이름과 설명 옆에 작은 이미지가 나오는 summary 카드 형식을 쓰는데, 이 도구는 summary_large_image처럼 렌더링함
    [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
    • 개선해보겠음. 사실 2시간 정도 만에 급히 만든 것임
  • Open Graph를 제대로 처리하지 못하는 듯함. 예를 들어 head 태그의 og:image 대신, 픽셀 깨진 파비콘을 컨테이너에 맞게 키워서 보여줬음
    • 그냥 사이트에 있는 걸 가져와 보여주는 중임. 확인해보겠음. 어떤 URL로 테스트했는지 궁금함
    • 이 말을 하려고 들어왔음. 파비콘을 쓰는 바람에 완전히 부정확한 묘사임
  • 보통 https://socialsharepreview.com/를 쓰는데 비슷한 도구가 많음. 이 도구가 어떻게 다르거나 더 나은지, 그리고 기존 해결책 대신 직접 만든 이유가 궁금함
    • 위 도구는 몇몇 미리보기에서 깨졌음. 여러 미리보기를 보려면 클릭해야 하고 느림. 원글 도구는 한 페이지에 전부 보여주고, 더 깔끔하며, 더 많은 미리보기가 있고, 스타일도 알맞음. 꽤 분명한 이유들임
    • 어젯밤에 심심했음
  • 이 도구의 반대 방향을 만들었음. 특정 플랫폼에서 어떤 메타 태그가 미리보기를 만드는지 확인할 수 있는 페이지를 생성해줌
    https://getoutofmyhead.dev/link-preview-tester/
  • 표준에 맞춰 웹사이트를 만들고 브라우저에서 테스트한 뒤, 당연히 다른 브라우저에서도 돌아갈 테니 만족할 수 있는 날을 아직도 꿈꾸고 있음
    그런데 이제는 수많은 독점 채팅 도구가 내 페이지 미리보기를 어떻게 렌더링하는지 수동으로 확인하는 도구가 있음
    그리고 모두가 종이 발명 이후 최고의 물건인 것처럼 열광함. 재미있는 미디어 업계 포럼도 아니고 HN에서 이런 흐름이 보이니 흥미로운 시대임
  • 왜 https://socialsharepreview.com/나 https://www.opengraph.xyz/, https://socialmediasharepreview.com/ 대신 이 도구를 써야 하는지 모르겠음
    피드백을 하자면, HTTPS가 없는 URL에서 실패하는 건 어색함. 어떤 사이트든 입력하면 알아서 URL로 이동하고 최종 해석된 URL을 기준으로 스캔할 만큼 똑똑해야 함. 예를 들어 "blizzard.com"을 입력하면 "https://www.blizzard.com/en-us/"를 로드해줘야 함
    Discord와 WhatsApp이 보이는 건 좋지만 LinkedIn, Pinterest는 어떻고 Slack은 어떨지 궁금함. Slack은 Discord와 같아야 할 듯함
    무엇을 고쳐야 하는지도 알려주지 않음. socialsharepreview.com이 어떻게 하는지 보면 좋음
    https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
    https://i.imgur.com/LDXNYYR.png
    콘텐츠가 제대로 펼쳐지도록 무엇을 고쳐야 하는지 유용한 팁을 많이 제공함. 이런 걸 좋아하는 마케팅 쪽 사람들에게 정말 유용함. 사이트마다 형식과 글자 수 제한이 다르니, 고칠 정보를 공유하는 게 좋음. 예를 들면 Twitter 카드와 Open Graph 메타데이터의 차이 같은 것임. 확인해보진 않았지만 각 사이트에 맞는 메타데이터를 제대로 읽는지도 보장하면 좋겠음
    • 이미 https://socialmediasharepreview.com/ 같은 무료 미리보기 도구들이 이 문제를 해결하고 있는데 잘 이해가 안 됨
      유일한 설명은 이게 전체 스택 키트를 팔기 위한 무료 도구 미끼라는 것뿐임
  • 꽤 멋짐. 다만 매달 최신 상태로 유지할 준비를 해야 하고, 아니면 금방 쓸모없어질 것임
    이런 도구의 단점 중 하나는 URL이 온라인에서 접근 가능해야 해서, 문제가 생기면 반복 개선 주기가 꽤 길어진다는 점임
    Polypane [1]에는 로컬 URL도 동작하는 소셜 미디어 미리보기를 만들었고, 해당 소셜 미디어가 표시할 URL을 덮어쓸 수도 있게 했음. X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon, Threads 미리보기를 만들었고 자주 유지보수함. 각각의 밝은 모드와 어두운 모드 디자인도 있어서 실제로 전부 테스트할 수 있음. 빠진 것과 호환되지 않는 것도 알려줌. 여기서 볼 수 있음: https://polypane.app/social-media-previews/
    [1] https://polypane.app/
    • HN 사람들이 도움 되는 조언처럼 포장해서 자기 제품 광고를 던질 때 싫음
  • LinkedIn과 Mastodon이 빠져 있음. 깔끔한 도구임. 페이지에 빠진 게 있으면 무엇을 해야 하는지 같은 개선 안내 문구가 있으면 도움이 되겠음
    • 나도 정확히 같은 생각임. 그리고 이유는 모르겠지만 LinkedIn이 우리 페이지를 전부 잘못된 이미지로 보여줌
      누가 알아낼 수 있다면 알려줬으면 함. godotengine.org 사이트의 아무 블로그 글이나 가져와 LinkedIn에 붙여넣으면, 글 썸네일 대신 작성자 이미지가 끌려오는 걸 볼 수 있음. 해결하지 못했음
    • 오늘 밤에 LinkedIn, Telegram과 몇 가지를 더 추가하겠음
답변달기