나는 다시 소셜 미디어 이미지에 대해 생각하고있다. Twitter, Facebook 또는 Imessage와 같은 장소에서 링크를 공유 할 때 표시되는 이미지를 알고 있습니다. 당신은 본질적으로 그들 없이는 테이블에 돈을 남겨두고 있습니다. 왜냐하면 그들은 작은 honkin의 관심을 끌 수있는 큰 클릭 가능 영역으로 작은 honkin의 관심 Grabbin 'Image가있는 게시물로 정기적 인 게시물을 돌리기 때문입니다. 웹 사이트의 모든 이미지 중 소셜 미디어 이미지는 사이트에서 가장 많이 볼 수 있고 가장 많이 기억되는 가장 많이 기억되는 이미지 일 수 있습니다.

본질적 으로이 비트의 HTML입니다.

하지만 다른 HTML 태그가 올바르게되므로 읽어야합니다.

Github에 새로운 소셜 미디어 카드가있는 것 같아서 다시 생각하고 있다고 생각합니다. 이것들은 새롭습니까?

이러한 Github 소셜 미디어 이미지는 프로그래밍 방식으로 생성됩니다. 예제 URL을 확인하십시오.

오토메이션

나는 당신이 완전히 손으로 만들어진 맞춤형 소셜 미디어 이미지에서 많은 것을 막을 수 있다고 생각하지만, 블로그, 전자 상거래 등 많은 페이지가있는 사이트에는 실용적이지 않습니다. 이와 같은 사이트의 요령은 어떻게 든 템플릿을 통해 생성을 자동화하는 것입니다. 과거에 다른 사람들의 테이크에 대해 언급했지만 다시 요약하겠습니다 :

• Drew McLellan : 동적 소셜 공유 이미지
• Vercel : 서비스로 그래프 이미지 열기
Social-Image-Generator

Ryan Filler : 자동 소셜 공유 이미지

당신은 그 모든 공통점이 무엇인지 알고 있습니까? 인형극.

인형극은 크롬의 헤드리스 사본을 회전시키고 제어하는 ​​방법입니다. 브라우저 창의 스크린 샷을 찍을 수있는이 유용한 기능이 있습니다. 코딩 글꼴 웹 사이트가 스크린 샷을 수행하는 방식입니다. 스크린 샷 아이디어는 사람들의 마음을 사로 잡는 것입니다. HTML 및 CSS에서 소셜 미디어 템플릿을 설계 한 다음 인형극을 스크린 샷으로 요청하고

를 소셜 미디어 이미지로 사용하도록 요청하십시오.

나는이 아이디어를 좋아하지만 항상 실행중인 노드 서버 (Node에서 실행)에 액세스하거나 서버리스 기능으로 누를 수 있음을 의미합니다. 따라서이 아이디어가 이미 빌드 프로세스를 실행하고 서버리스 기능을 활용하는 것과 같은 작업을 수행하는 데 이미 익숙한 Jamstack 군중과 공명 한 것은 놀라운 일이 아닙니다.

URL에서 서버리스 기능을 "호스팅"한다는 아이디어는 URL 매개 변수를 통해 스크린 샷에 포함 할 내용의 동적 값을 전달한다고 생각합니다.

SVG 경로

나는 소셜 미디어 이미지에 대한 템플릿으로 svg를 사용한다는 아이디어를 파헤칩니다. 부분적으로는 소셜 미디어 이미지를 설계하는 데 필요한 정확한 차원을 만드는 정신적 모델과 일치하는 내부 디자인의 고정 좌표가 있기 때문에 부분적으로는 소셜 미디어 이미지를 템플릿합니다. 나는 SVG가 어떻게 그렇게 합성 가능한지를 좋아한다.

George Francis는 블로그“자신만의 생성 SVG 소셜 이미지 만들기”를 작성했습니다. 나는 만족스러운 트릭도 마음에 들기 때문에 일회성 스크린 샷에 유용한 도구입니다.

Dynamic SVG Creation에서도 덤벼 들었습니다. 회의 사이트 에서이 회의 페이지를 확인하십시오.

불행히도 SVG는 소셜 미디어 이미지를위한 지원되는 이미지 형식이 아닙니다. 트위터는 특별히 다음과 같습니다.

카드에 사용할 이미지의 URL. 이미지의 크기는 5MB 미만이어야합니다. JPG, PNG, Webp 및 GIF 형식이 지원됩니다. 애니메이션 GIF의 첫 번째 프레임 만 사용됩니다. SVG는 지원되지 않습니다.

Twitter Docs

여전히 SVG에서 작곡/템플릿이 시원 할 수 있습니다. 최종 사용을 위해 다른 형식으로 변환합니다.

가

SVG를 갖는 후에는 SVG에서 PNG 로의 변환은 거의 사소하게 쉽습니다. 제 경우에는 빌드 프로세스 중에 실행되는 SVG2PNG와 매우 작은 GULP 작업을 사용했습니다.

WordPress는 어떻습니까? WordPress 사이트에 대한 빌드 프로세스가 없습니다. 적어도 게시물을 게시하거나 업데이트 할 때마다 실행되는 것이 아닙니다. 그러나 WordPress는 동적 소셜 미디어 이미지에서

(내 세계에서) 가장

에 이익이 될 것입니다.

지금은 가지고 있지 않습니다. Jetpack 은이 작업을 멋지게 만들기 위해 먼 길을갑니다. 소셜 미디어 이미지의 게시물의 "특집 이미지"를 만들고 미리보기 및 소셜 네트워크에 대한 자동 포스트를 제공 할 수 있습니다. 여기 내가 한 비디오가 있습니다. 그것은 추천 이미지가 첨부되어 멋지게 표시되는 곳으로 나를 데려 갈 것입니다.

그러나 그들의 창조물을 자동화하지는 않습니다. 때로는 맞춤형 그래픽만으로는 갈 수있는 방법이지만 (위의 것은 좋은 예일 수 있습니다), 아마도 더 자주 템플릿 카드가 갈 길입니다.

다행히도 나는 Daniel Post의 WordPress에 대한 소셜 이미지 생성기의 바람을 잡았습니다. 얼마나 멋진지 :

이것은 WordPress가 필요로하는 것입니다!

Daniel 자신이 CSS 트릭을위한 맞춤형 템플릿을 만드는 데 도움이되었습니다. 나는 제목, 저자, 선택한 따옴표, 특집 이미지 및 기타 것들을 통합 한 템플릿을 선택할 수있는 큰 꿈을 꾸었습니다. 지금까지 우리는 단지 2 개, 제목과 저자가있는 템플릿, 특집 이미지, 제목 및 저자가있는 템플릿에 정착했습니다. 이미지는 해당 메타 데이터에서 생성됩니다.

이것은 인형극이 아닙니다. 이것은 Phantomjs에도 Svgtopng에 전원이 공급되지 않습니다. 이것은 PHP 생성 이미지입니다! 그리고 Imagemagick조차도, GD를 똑바로 세웠습니다. 따라서 이러한 이미지는 프론트 엔드 개발자에게 편안하게 느낄 수있는 모든 종류의 구문으로 만들어지지 않습니다. 당신은 아마도 템플릿 중 하나를 사용하는 것이 더 나을 것입니다. 그러나 내 커스텀 템플릿이 어떻게 코딩되었는지 (Daniel)에 의해 어떻게 코딩되었는지보고 싶다면 Lemme는 공개 어딘가에 코드를 게시 할 수 있습니다.

꽤 멋진 결과, 맞습니까?

이런 식으로 구축 해야하는 이유를 알 수 있습니다. WordPress가 실행할 수있는 곳마다 문자 그대로 작동하는 기술을 사용하고 있습니다. 그것은 WordPress 정신에 있습니다. 그러나 템플릿을 만드는 것이보다 현대적인 방식으로 수행 될 수 있기를 바랍니다. 소셜 미디어 이미지의 템플릿이 다른 템플릿 파일과 같이 테마의 루트에서 소셜 -Image.php와 같다면 멋지지 않습니까? 그리고 당신은 모든 일반적인 WordPress API와 함께 그 페이지를 템플릿하고 디자인합니까? 거의 ACF 블록처럼? 그리고 스크린 샷을 받고 사용합니까? 대답하겠습니다 : 예, 멋질 것입니다.