# 트위터 임베드를 Semantic HTML로 교체하기

> Clean Markdown view of GeekNews topic #16517. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16517](https://news.hada.io/topic?id=16517)
- GeekNews Markdown: [https://news.hada.io/topic/16517.md](https://news.hada.io/topic/16517.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-08-29T09:54:47+09:00
- Updated: 2024-08-29T09:54:47+09:00
- Original source: [shkspr.mobi](https://shkspr.mobi/blog/2024/08/replace-twitter-embeds-with-semantic-html/)
- Points: 5
- Comments: 0

## Summary

트위터 임베드를 Semantic HTML로 교체해서, 사이트 방문자가 실수?로라도 트위터/X 사이트로 가는 것을 방지합니다. Python 스크립트를 사용해 트윗을 임베딩할 때 외부 링크 없이 모든 이미지와 링크를 인라인 처리하며, 트윗의 Like/Reply 수를 보여주고, Retweet 수와 Quote/Bookmark는 제외하며, Cards와 Polls도 지원합니다. Selenium Webdriver와 트위터 Embed API를 활용해 이미지와 내용을 캡쳐하며, 생성된 HTML은 간결하고 접근성도 지원됩니다.

## Topic Body

- 자신의 블로그/사이트에 트윗을 임베딩 하고 싶지만 트위터로 사람들을 보내고 싶지는 않을때 간단한 Python 스크립트로 전환하여 임베딩  
- 모든 이미지/아바타를 인라인 처리하며, 외부 사이트 링크, 해쉬태그, 멘션 등의 모든 링크를 처리   
  - Like/Reply 수는 보이지만, Retweet 수는 항상 보이지는 않음  
  - Quote/Bookmark 는 보이지 않음   
  - Cards, Polls 등도 지원   
  - 링크는 t.co 같은 것을 거치지 않고 직접 연결   
- 생성된 HTML은 Semantic, Short, Accessible 함   
- Selenium Webdriver로 이미지 등은 캡쳐하고, 트위터 Embed API로 내용을 가져옴   
  - 아바타는 WebP로 인라인 됨   
  - 첨부된 사진도 모두 인라인 처리   
  - 비디오는 포스터만 인라인   
  - 해당 트윗을 Archive.org 에 자동 등록

## Comments



_No public comments on this page._