웹사이트 공개 시 완성도를 높이는 포인트
6570 단어 HTMLProgressiveWebApps웹
소개
웹사이트를 만들고 공개할 때, 또 한 번 더 수고를 끼치는 것만으로 완성도는 군과 높아집니다.
Web 사이트 공개시에 제가 실천하고 있는 포인트를 소개합니다.
아이콘 및 OGP 이미지
두 가지 이미지를 준비합시다.
첫 번째는 아이콘으로, 브라우저의 탭에 표시되는 favicon이나, Progressive Web Apps (PWA)로 홈 화면에 추가했을 때의 앱 아이콘이 됩니다.
iPhone에서 홈 화면에 추가하면 다음과 같이 표시됩니다.
해상도는 512x512로 만들어 두는 것이 좋습니다.
두 번째는 SNS 등에서 URL이 붙어 있다고 표시되는 웹 사이트의
다음은 Slack에 URL을 붙였을 때의 표시 예입니다.
이 해상도는 1200x630으로 만들면 좋습니다.
웹 앱 매니페스트
웹 앱 매니페스트는 PWA용 애플리케이션 정보를 설명하는 파일입니다.
Web App Manifest Generator에서 필요한 항목을 입력하고 아이콘 이미지를 업로드하면 웹 앱 매니페스트의 파일과 필요한 크기의 아이콘을 정리합니다.
각 항목에 대한 자세한 내용은 MDN 등의 문서을 참조하십시오.
head 요소
favicon의 설정이나, 검색이나 SNS로 공유되었을 때에 표시되는 Web 사이트의 정보, PWA의 설정등을 head 요소에 써 둡시다.
설정할 수 있는 항목이 많기 때문에 내가 최근에 작성한 앱에서 구현 예를 소개합니다.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#fff" />
<title>ふせんトレーナー</title>
<meta
name="description"
content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
/>
<meta property="og:url" content="https://sticky-note-training.vdslab.jp/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ふせんトレーナー" />
<meta
property="og:description"
content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
/>
<meta property="og:site_name" content="ふせんトレーナー" />
<meta
property="og:image"
content="https://sticky-note-training.vdslab.jp/ogp.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<link
rel="apple-touch-icon"
sizes="192x192"
href="./images/icons/icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="./images/icons/icon-192x192.png"
/>
<link rel="manifest" href="./manifest.webmanifest" />
</head>
이미지 등의 경로는 여러분의 앱의 상황에 따라 적절히 설정해 주세요.
호스팅
웹사이트의 호스팅 대상을 선택할 때 유지하고 싶은 포인트는 HTTPS를 필수로 할 수 있는 것과 자신이 소유하는 도메인(사용자 정의 도메인)을 설정할 수 있다는 것입니다.
최근에는 보안 웹 사이트를 제공하기 위해 HTTP 대신 HTTPS를 사용하는 것이 좋습니다.
PWA에서도 HTTPS를 사용하는 것이 좋습니다.Service Worker와 같은 일부 기능은 HTTPS에서 호스팅되지 않으면 작동하지 않습니다.
맞춤 도메인 설정은 필수는 아니지만 브랜딩으로 이어지며 웹 사이트에 대한 애착도 솟을 것입니다.
싼 것은 연간 1000 엔 정도의 금액으로 도메인을 취할 수 있습니다.
나는 Google Domains에서 도메인을 가지고 있습니다.
저는 웹 사이트를 배포하기 위해 종종 Netlify을 사용합니다.
무료 플랜도 본격적인 웹사이트를 게시할 수 있는 충분한 기능을 제공합니다.
Netlify를 사용하면 위의 두 가지에도 쉽게 대응할 수 있습니다.
게시 후 확인
Lighthouse은 주로 PWA를 대상으로하는 웹 앱 감사 도구이지만 PWA에만 국한되지 않고 현대 웹 사이트에 필요한 모범 사례가 담겨 있으므로 배포가 완료되면 한 번 확인해보십시오. 생강.
또한 SNS 공유 설정이 제대로 이루어졌는지 확인하기 위해 Twitter Card Validator를 사용해 보겠습니다.
문제가 없을 경우 실제로 Twitter나 Slack 등에 URL을 붙여 보고 설정한 정보가 표시되어 있는지 확인해 보세요.
결론
각각의 항목에 대해서는, 이미 상세한 해설등이 많이 존재하고 있으므로, 본 기사에서 소개된 키워드로 모르는 점등은 개별적으로 조사해 보면 좋을 것입니다.
처음으로 웹 사이트를 공개하는 사람 등의 참고가 되시면 감사하겠습니다.
Reference
이 문제에 관하여(웹사이트 공개 시 완성도를 높이는 포인트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/_likr/items/b7cbb31aa7bcbdd71567
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
두 가지 이미지를 준비합시다.
첫 번째는 아이콘으로, 브라우저의 탭에 표시되는 favicon이나, Progressive Web Apps (PWA)로 홈 화면에 추가했을 때의 앱 아이콘이 됩니다.
iPhone에서 홈 화면에 추가하면 다음과 같이 표시됩니다.
해상도는 512x512로 만들어 두는 것이 좋습니다.
두 번째는 SNS 등에서 URL이 붙어 있다고 표시되는 웹 사이트의
다음은 Slack에 URL을 붙였을 때의 표시 예입니다.
이 해상도는 1200x630으로 만들면 좋습니다.
웹 앱 매니페스트
웹 앱 매니페스트는 PWA용 애플리케이션 정보를 설명하는 파일입니다.
Web App Manifest Generator에서 필요한 항목을 입력하고 아이콘 이미지를 업로드하면 웹 앱 매니페스트의 파일과 필요한 크기의 아이콘을 정리합니다.
각 항목에 대한 자세한 내용은 MDN 등의 문서을 참조하십시오.
head 요소
favicon의 설정이나, 검색이나 SNS로 공유되었을 때에 표시되는 Web 사이트의 정보, PWA의 설정등을 head 요소에 써 둡시다.
설정할 수 있는 항목이 많기 때문에 내가 최근에 작성한 앱에서 구현 예를 소개합니다.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#fff" />
<title>ふせんトレーナー</title>
<meta
name="description"
content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
/>
<meta property="og:url" content="https://sticky-note-training.vdslab.jp/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ふせんトレーナー" />
<meta
property="og:description"
content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
/>
<meta property="og:site_name" content="ふせんトレーナー" />
<meta
property="og:image"
content="https://sticky-note-training.vdslab.jp/ogp.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<link
rel="apple-touch-icon"
sizes="192x192"
href="./images/icons/icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="./images/icons/icon-192x192.png"
/>
<link rel="manifest" href="./manifest.webmanifest" />
</head>
이미지 등의 경로는 여러분의 앱의 상황에 따라 적절히 설정해 주세요.
호스팅
웹사이트의 호스팅 대상을 선택할 때 유지하고 싶은 포인트는 HTTPS를 필수로 할 수 있는 것과 자신이 소유하는 도메인(사용자 정의 도메인)을 설정할 수 있다는 것입니다.
최근에는 보안 웹 사이트를 제공하기 위해 HTTP 대신 HTTPS를 사용하는 것이 좋습니다.
PWA에서도 HTTPS를 사용하는 것이 좋습니다.Service Worker와 같은 일부 기능은 HTTPS에서 호스팅되지 않으면 작동하지 않습니다.
맞춤 도메인 설정은 필수는 아니지만 브랜딩으로 이어지며 웹 사이트에 대한 애착도 솟을 것입니다.
싼 것은 연간 1000 엔 정도의 금액으로 도메인을 취할 수 있습니다.
나는 Google Domains에서 도메인을 가지고 있습니다.
저는 웹 사이트를 배포하기 위해 종종 Netlify을 사용합니다.
무료 플랜도 본격적인 웹사이트를 게시할 수 있는 충분한 기능을 제공합니다.
Netlify를 사용하면 위의 두 가지에도 쉽게 대응할 수 있습니다.
게시 후 확인
Lighthouse은 주로 PWA를 대상으로하는 웹 앱 감사 도구이지만 PWA에만 국한되지 않고 현대 웹 사이트에 필요한 모범 사례가 담겨 있으므로 배포가 완료되면 한 번 확인해보십시오. 생강.
또한 SNS 공유 설정이 제대로 이루어졌는지 확인하기 위해 Twitter Card Validator를 사용해 보겠습니다.
문제가 없을 경우 실제로 Twitter나 Slack 등에 URL을 붙여 보고 설정한 정보가 표시되어 있는지 확인해 보세요.
결론
각각의 항목에 대해서는, 이미 상세한 해설등이 많이 존재하고 있으므로, 본 기사에서 소개된 키워드로 모르는 점등은 개별적으로 조사해 보면 좋을 것입니다.
처음으로 웹 사이트를 공개하는 사람 등의 참고가 되시면 감사하겠습니다.
Reference
이 문제에 관하여(웹사이트 공개 시 완성도를 높이는 포인트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/_likr/items/b7cbb31aa7bcbdd71567
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
favicon의 설정이나, 검색이나 SNS로 공유되었을 때에 표시되는 Web 사이트의 정보, PWA의 설정등을 head 요소에 써 둡시다.
설정할 수 있는 항목이 많기 때문에 내가 최근에 작성한 앱에서 구현 예를 소개합니다.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#fff" />
<title>ふせんトレーナー</title>
<meta
name="description"
content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
/>
<meta property="og:url" content="https://sticky-note-training.vdslab.jp/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ふせんトレーナー" />
<meta
property="og:description"
content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
/>
<meta property="og:site_name" content="ふせんトレーナー" />
<meta
property="og:image"
content="https://sticky-note-training.vdslab.jp/ogp.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<link
rel="apple-touch-icon"
sizes="192x192"
href="./images/icons/icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="./images/icons/icon-192x192.png"
/>
<link rel="manifest" href="./manifest.webmanifest" />
</head>
이미지 등의 경로는 여러분의 앱의 상황에 따라 적절히 설정해 주세요.
호스팅
웹사이트의 호스팅 대상을 선택할 때 유지하고 싶은 포인트는 HTTPS를 필수로 할 수 있는 것과 자신이 소유하는 도메인(사용자 정의 도메인)을 설정할 수 있다는 것입니다.
최근에는 보안 웹 사이트를 제공하기 위해 HTTP 대신 HTTPS를 사용하는 것이 좋습니다.
PWA에서도 HTTPS를 사용하는 것이 좋습니다.Service Worker와 같은 일부 기능은 HTTPS에서 호스팅되지 않으면 작동하지 않습니다.
맞춤 도메인 설정은 필수는 아니지만 브랜딩으로 이어지며 웹 사이트에 대한 애착도 솟을 것입니다.
싼 것은 연간 1000 엔 정도의 금액으로 도메인을 취할 수 있습니다.
나는 Google Domains에서 도메인을 가지고 있습니다.
저는 웹 사이트를 배포하기 위해 종종 Netlify을 사용합니다.
무료 플랜도 본격적인 웹사이트를 게시할 수 있는 충분한 기능을 제공합니다.
Netlify를 사용하면 위의 두 가지에도 쉽게 대응할 수 있습니다.
게시 후 확인
Lighthouse은 주로 PWA를 대상으로하는 웹 앱 감사 도구이지만 PWA에만 국한되지 않고 현대 웹 사이트에 필요한 모범 사례가 담겨 있으므로 배포가 완료되면 한 번 확인해보십시오. 생강.
또한 SNS 공유 설정이 제대로 이루어졌는지 확인하기 위해 Twitter Card Validator를 사용해 보겠습니다.
문제가 없을 경우 실제로 Twitter나 Slack 등에 URL을 붙여 보고 설정한 정보가 표시되어 있는지 확인해 보세요.
결론
각각의 항목에 대해서는, 이미 상세한 해설등이 많이 존재하고 있으므로, 본 기사에서 소개된 키워드로 모르는 점등은 개별적으로 조사해 보면 좋을 것입니다.
처음으로 웹 사이트를 공개하는 사람 등의 참고가 되시면 감사하겠습니다.
Reference
이 문제에 관하여(웹사이트 공개 시 완성도를 높이는 포인트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/_likr/items/b7cbb31aa7bcbdd71567
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Lighthouse은 주로 PWA를 대상으로하는 웹 앱 감사 도구이지만 PWA에만 국한되지 않고 현대 웹 사이트에 필요한 모범 사례가 담겨 있으므로 배포가 완료되면 한 번 확인해보십시오. 생강.
또한 SNS 공유 설정이 제대로 이루어졌는지 확인하기 위해 Twitter Card Validator를 사용해 보겠습니다.
문제가 없을 경우 실제로 Twitter나 Slack 등에 URL을 붙여 보고 설정한 정보가 표시되어 있는지 확인해 보세요.
결론
각각의 항목에 대해서는, 이미 상세한 해설등이 많이 존재하고 있으므로, 본 기사에서 소개된 키워드로 모르는 점등은 개별적으로 조사해 보면 좋을 것입니다.
처음으로 웹 사이트를 공개하는 사람 등의 참고가 되시면 감사하겠습니다.
Reference
이 문제에 관하여(웹사이트 공개 시 완성도를 높이는 포인트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/_likr/items/b7cbb31aa7bcbdd71567
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(웹사이트 공개 시 완성도를 높이는 포인트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/_likr/items/b7cbb31aa7bcbdd71567텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
