website launch checklist
1.0.0
홈페이지 오픈 전 꼭 확인해야 할 사항
웹사이트를 시작하기 전에 다음 사항을 확인하세요.
대체 태그("alt 속성" 또는 "alt 설명")는 이미지에 대한 보이지 않는 설명 역할을 하는 이미지에 적용되는 속성입니다.
이는 이미지의 내용을 설명하며 화면 판독기가 시각 장애인에게 큰 소리로 읽어주는 데 사용됩니다. 이미지를 해석할 수 없고 Alt 태그 설명에 의존하기 때문에 검색 엔진에서도 사용됩니다. 이미지에 Alt 태그를 사용하면 검색 엔진 순위에 긍정적인 영향을 미치므로 SEO에 좋습니다. 이미지를 로드하지 못한 경우에도 대체 텍스트가 표시됩니다.
Alt 태그는 이미지 내용을 설명해야 하며 최대 125자 이내를 권장합니다.
예:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > "스테이징" 또는 "개발" 환경이 있는 경우 인덱싱에서 스테이징을 차단할 가능성이 있습니다.
귀하의 웹사이트가 검색 결과에 나타나기를 원하는 경우, 해당 검색 엔진은 귀하의 웹사이트를 "인덱싱"합니다. 검색 엔진에는 웹페이지를 방문하고 콘텐츠를 "크롤링"하여 검색 엔진 색인에 저장하는 자동화된 "봇"이 있습니다. 그러면 검색 엔진이 나중에 가장 관련성이 높은 검색 결과를 검색할 수 있습니다.
출시하기 전에 출시될 버전이 웹사이트 색인 생성을 허용하는지 확인하세요. HTML에 이러한 메타 태그가 없는지 확인하십시오.
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search engines또한 robots.txt 파일을 확인하세요. 웹사이트의 모든 페이지를 색인화하도록 허용 하려면 robots.txt에 다음 내용이 포함되어야 합니다.
User-agent: *
Disallow:
확인해야 할 또 다른 곳은 Apache/Nginx 구성입니다.
웹사이트가 Facebook이나 Twitter에 공유되면 섬네일, 제목, 설명이 표시됩니다.
웹사이트에 올바른 썸네일, 제목 및 설명이 표시되도록 하려면 Facebook 및 Twitter에서 요구하는 메타 태그를 추가해야 합니다.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->다음 도구를 사용하여 Facebook이나 Twitter에 공유할 때 웹사이트가 어떻게 보이는지 테스트할 수 있습니다.
Facebook 공유 디버거
트위터 카드 검사기
파비콘은 브라우저 탭의 웹사이트 제목 근처에 있는 작은 아이콘입니다.
많은 탭이 열려 있을 때 웹 사이트를 쉽게 식별하고 브라우저 기록과 북마크를 볼 수 있습니다. DuckDuckGo와 같은 일부 검색 엔진은 검색 결과의 URL 근처에 파비콘을 표시합니다. 사용성을 향상시키는 것 외에도 검색 결과에서 사용자의 관심을 끌 수 있으므로 간접 SEO 기법이라고 부를 수 있습니다.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > 사용자는 모바일 장치의 홈 화면에 웹페이지를 저장할 수 있습니다. 그러면 앱 아이콘과 마찬가지로 웹사이트용 아이콘이 생성되며, 해당 아이콘을 탭하면 브라우저에서 웹사이트가 열립니다.
개발자에게는 웹 사이트 경험을 모바일의 기본 앱 경험에 더 가깝게 만들 수 있는 일부 제어 권한이 부여됩니다. 예를 들어, iOS는 기본적으로 웹사이트의 스크린샷을 아이콘으로 설정합니다. 하지만 Apple 메타 태그를 사용하여 사용자 정의 아이콘 디자인을 설정할 수 있습니다.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android는 "apple-touch-icon" 값 또는 파비콘(메타 태그가 없는 경우)을 사용하여 홈 화면 아이콘을 생성합니다.
사용하는 분석 도구에 해당 환경에 대한 필터가 없으면 비프로덕션 환경에서 테스트한 결과로 웹사이트 분석이 오염되게 됩니다. 분석 도구에 필터를 추가하거나 프로덕션 환경에만 조건부로 코드를 삽입할 수 있습니다.
제목 태그는 웹사이트의 제목을 지정합니다. 메타 설명 태그에는 페이지에 대한 간단한 설명이 포함되어 있습니다.
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >제목은 검색 엔진 결과에 표시되는 내용으로, 공유 시 브라우저 탭과 소셜 네트워크 카드에 표시됩니다(소셜 네트워크에 별도의 제목이 제공되지 않는 경우).
설명은 검색 결과에도 표시됩니다. 순위 알고리즘에 직접 사용되지 않으므로 검색 결과에 나타날 가능성에는 영향을 미치지 않지만 사용자가 결과에서 귀하의 웹 사이트를 클릭할 가능성이 높아집니다. 그러면 Google 페이지의 클릭률(CTR)이 높아집니다. 즉, Google이 이를 좋은 결과로 간주하고 향후 검색 결과에서 더 높은 순위를 차지한다는 의미입니다.
웹페이지에 외부 링크, 특히 새 탭이나 창에서 열리는 링크가 있는 경우 rel="noopener" 사용해야 합니다.
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > 그렇게 하면 보안 및 성능상의 이점이 있습니다. 이것이 없으면 외부 페이지는 window.opener 사용하여 창 개체에 액세스할 수 있습니다. 여기에서 noopener 사용하여 어떤 취약점이 해결되는지 자세히 알아볼 수 있습니다. rel=noopener 정보
다른 웹사이트도 현재 페이지와 동일한 프로세스에서 실행될 수 있으므로 외부 페이지에서 과도한 JavaScript를 실행하는 경우 웹사이트 성능에 부정적인 영향을 미칠 수 있습니다. noopener 도 이를 방지합니다.
자세한 내용은 여기를 참조하세요. rel=noopener의 성능 이점
웹 사이트를 많이 변경하거나 외부 라이브러리 또는 CSS 프레임워크를 많이 사용하는 경우 CSS 파일에 페이지에서 사용되지 않는 스타일이 많이 포함될 가능성이 있습니다. 예를 들어, 일부 플러그인의 한 테마를 사용하고 있지만 다른 테마의 CSS는 사용되지 않은 채 CSS 파일에 그대로 남아 있고 스타일시트 파일 크기가 커질 수 있습니다.
PurgeCSS라는 도구를 사용하여 사용하지 않는 스타일을 모두 제거할 수 있습니다. CLI와 함께 사용하거나 Webpack, Gulp 등에서 사용할 수 있습니다. 페이지를 분석하고 페이지에 사용된 선택기를 CSS 파일의 선택기와 일치시키고 사용하지 않는 스타일을 제거합니다. Tailwind CSS 프레임워크를 사용한 최근 프로젝트에는 물론 제가 사용하지 않은 유틸리티가 많이 있었습니다. PurgeCSS는 내 app.css 파일의 크기를 214KiB에서 45.6Kib로 줄였습니다.
하지만 플러그인이 페이지에 요소를 동적으로 생성하는 경우 PurgeCSS는 해당 요소의 스타일을 감지하지 못합니다. 그러나 구성에서 선택기 또는 선택기 패턴을 전달하여 선택기를 화이트리스트에 추가할 수 있으며, 특정 규칙을 화이트리스트에 추가하는 특수 설명을 사용하여 선택기를 화이트리스트에 추가할 수도 있습니다. PurgeCSS 화이트리스트에 대해 자세히 알아보세요.
브라우저가 리소스를 요청하면 서버는 리소스를 얼마나 오랫동안 저장할 수 있는지 또는 "캐시"할 수 있는지 브라우저에 지시할 수 있습니다. 다음에 리소스가 필요할 때 로컬 복사본을 사용할 수 있습니다. 속도가 크게 향상되고 서버의 부하가 줄어듭니다. 자산이 캐시되는 기간을 알려주는 헤더를 반환하도록 서버를 구성할 수 있습니다.
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
자산이 변경되는 빈도에 따라 최대 수명을 설정해야 합니다.
Gzip 압축과 같은 압축을 사용하도록 서버를 구성하면 리소스를 더 빠르게 전송할 수도 있습니다. gzip으로 CSS 파일을 압축하면 파일 크기가 약 50-70% 절약됩니다.
