블로그 및 패키지를 위한 아름다운 소셜 이미지 만들기
태그에 포함할 수 있는 동적 오픈 그래프 이미지를 생성하는 서버리스 서비스입니다.
오픈 그래프 이미지란 무엇입니까?
Twitter, Facebook 또는 Slack에 하이퍼링크를 게시하고 이미지 팝업을 본 적이 있습니까? 귀하의 소셜 네트워크는 URL을 "펼치고"이미지를 얻는 방법을 어떻게 알았습니까? 답은 당신의 .
Open Graph 프로토콜은 이 이미지를 정의하기 위해 웹 페이지에 태그를 넣을 수 있다고 말합니다.
다음과 같습니다.
<head>
<title>Title</title>
<meta property="og:image" content="http://example.com/logo.jpg" />
</head>
이 서비스를 사용하는 이유는 무엇입니까?
짧은 대답은 모든 단일 블로그 게시물과 모든 단일 문서 페이지의 이미지를 힘들게 디자인하는 데 오랜 시간이 걸린다는 것입니다. 그리고 우리는 모든 블로그 게시물에 정확히 동일한 이미지를 원하지 않습니다. 그렇게 하면 기사가 Twitter에 공유되었을 때 눈에 띄지 않을 것이기 때문입니다.
여기서 banners.adrianub.vercel.app이 등장합니다. 블로그 게시물의 제목을 생성기 서비스에 전달하기만 하면 즉시 이미지가 생성됩니다!
다음과 같습니다.
<head>
<title>Hello World</title>
<meta property="og:image" content="https://banners.adrianub.vercel.app/Hello%20World.png" />
</head>
이제 텍스트Hello%20World를 원하는 제목으로 변경하고 마법이 일어나는 것을 지켜보세요 ✨
이 서비스를 사용하면 PHP, Laravel 패키지, NPM 및 Yarn을 위한 아름다운 소셜 이미지를 생성할 수도 있습니다. 당신은 이미 당신의 패키지에 많은 시간과 노력을 들였으니, 이 서비스를 사용하여 패키지를 아름답게 꾸며보세요.
내 저장소
ublabs
/
현수막
블로그와 패키지를 위한 아름다운 소셜 이미지를 만드세요.
그래프 이미지를 서비스로 열기
<meta> 태그에 포함할 수 있는 동적 오픈 그래프 이미지를 생성하는 서버리스 서비스입니다.
각 키 입력에 대해 HTML 페이지를 렌더링하고 캐시되는 결과의 스크린샷을 찍는 데 헤드리스 크롬이 사용됩니다.
실제 사용 사례는 트윗에 포함된 이미지를 참조하십시오.
오픈 그래프 이미지란 무엇입니까?
Twitter, Facebook 또는 Slack에 하이퍼링크를 게시하고 이미지 팝업을 본 적이 있습니까?
귀하의 소셜 네트워크는 URL을 "펼치고"이미지를 얻는 방법을 어떻게 알았습니까?
답은 귀하의 <head>에 있습니다.
Open Graph protocol은 이 이미지를 정의하기 위해 웹페이지의 <meta>에 <head> 태그를 넣을 수 있다고 말합니다.
다음과 같습니다.
<head>
<title>Title</title>
<meta property="og:image" content="http://example.com/logo.jpg" />
</head>
…
View on GitHub
Reference
이 문제에 관하여(블로그 및 패키지를 위한 아름다운 소셜 이미지 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/adrianub/create-beautiful-looking-social-images-for-your-blog-and-packages-1m2k
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<head>
<title>Title</title>
<meta property="og:image" content="http://example.com/logo.jpg" />
</head>
짧은 대답은 모든 단일 블로그 게시물과 모든 단일 문서 페이지의 이미지를 힘들게 디자인하는 데 오랜 시간이 걸린다는 것입니다. 그리고 우리는 모든 블로그 게시물에 정확히 동일한 이미지를 원하지 않습니다. 그렇게 하면 기사가 Twitter에 공유되었을 때 눈에 띄지 않을 것이기 때문입니다.
여기서 banners.adrianub.vercel.app이 등장합니다. 블로그 게시물의 제목을 생성기 서비스에 전달하기만 하면 즉시 이미지가 생성됩니다!
다음과 같습니다.
<head>
<title>Hello World</title>
<meta property="og:image" content="https://banners.adrianub.vercel.app/Hello%20World.png" />
</head>
이제 텍스트
Hello%20World를 원하는 제목으로 변경하고 마법이 일어나는 것을 지켜보세요 ✨이 서비스를 사용하면 PHP, Laravel 패키지, NPM 및 Yarn을 위한 아름다운 소셜 이미지를 생성할 수도 있습니다. 당신은 이미 당신의 패키지에 많은 시간과 노력을 들였으니, 이 서비스를 사용하여 패키지를 아름답게 꾸며보세요.
내 저장소
ublabs / 현수막
블로그와 패키지를 위한 아름다운 소셜 이미지를 만드세요.
그래프 이미지를 서비스로 열기
<meta> 태그에 포함할 수 있는 동적 오픈 그래프 이미지를 생성하는 서버리스 서비스입니다.
각 키 입력에 대해 HTML 페이지를 렌더링하고 캐시되는 결과의 스크린샷을 찍는 데 헤드리스 크롬이 사용됩니다.
실제 사용 사례는 트윗에 포함된 이미지를 참조하십시오.
오픈 그래프 이미지란 무엇입니까?
Twitter, Facebook 또는 Slack에 하이퍼링크를 게시하고 이미지 팝업을 본 적이 있습니까?
귀하의 소셜 네트워크는 URL을 "펼치고"이미지를 얻는 방법을 어떻게 알았습니까?
답은 귀하의 <head>에 있습니다.
Open Graph protocol은 이 이미지를 정의하기 위해 웹페이지의 <meta>에 <head> 태그를 넣을 수 있다고 말합니다.
다음과 같습니다.
<head>
<title>Title</title>
<meta property="og:image" content="http://example.com/logo.jpg" />
</head>
…
View on GitHub
Reference
이 문제에 관하여(블로그 및 패키지를 위한 아름다운 소셜 이미지 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/adrianub/create-beautiful-looking-social-images-for-your-blog-and-packages-1m2k
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(블로그 및 패키지를 위한 아름다운 소셜 이미지 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/adrianub/create-beautiful-looking-social-images-for-your-blog-and-packages-1m2k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
