sherby-메타데이터

문맥

이중 언어 웹사이트의 첫 번째 버전을 코딩할 때, 내가 가진 유일한 두 페이지인 프랑스어와 영어 버전이 검색 엔진(SEO – 검색 엔진 최적화)에 올바르게 표시되기를 원했습니다. Google에서 내 이름을 검색하고 내 웹사이트를 찾을 수 있기를 원했습니다(알아요, 저는 자기 중심적인 사람입니다 😂).

그러기 위해서는 웹에서 페이지를 쉽게 찾을 수 있도록 도와주는 데이터인 페이지의 메타 데이터를 업데이트해야 했습니다. 주로 검색 엔진에서 검색 결과의 페이지를 올바르게 인덱싱하고 소셜 미디어에서 링크 미리 보기를 추가하는 데 사용됩니다. 🧐

HTML에서 메타 태그라고도 하는 메타 데이터는 각 페이지에 대해 아래와 유사한 코드로 정의됩니다.

<meta name="description" content="One of these experiments was to start a personal blog, a place where I could freely write and mostly, deepen some things that I want to know or to remember better.">
<meta name="twitter:title" content="Introduction - Benjamin Rancourt">
<meta property="og:locale" content="en_CA">

이전 게시물의 메타 태그 예Introduction



그러나 PWA(Progressive Web App)의 경우 HTML 페이지가 하나뿐이었기 때문에 그렇게 할 수 없었습니다. 그래서 JavaScript 애플리케이션 내에서 이러한 태그를 동적으로 업데이트하는 방법을 찾아야 했습니다.

창조

내 웹 사이트가 웹 구성 요소로 구축되었기 때문에 내 응용 프로그램 내에서 메타 태그를 관리하는 것을 찾기 위해 WebComponents.org database을 조사하기 시작했습니다. 🔍

내가 찾은 유일한 구성 요소는 app-metadata 의 Captain Codeman 요소였습니다. 내가 찾던 모든 것이 있었지만 더 이상 사용되지 않는Polymer 1 라이브러리로 빌드되었습니다…

그래서 작업에서 영감을 얻어 내 웹 사이트에 Polymer 2 구성 요소를 만들기로 결정했습니다. 며칠(혹은 몇 주) 후에 마침내 Google에서 모든 것이 예상대로 작동하는 것을 볼 수 있었습니다. 변경 사항이 검색 엔진에 전파되는 데 시간이 걸리기 때문입니다. ⏳




2020년 9월 7일 Google 검색결과 스크린샷

출판

잠시 후, 나는 이 구성 요소를 다른 사람과 나 자신이 재사용할 수 있다고 판단하여 마침내 sherby-metadata라는 새 이름으로 웹에 첫 번째 버전(1.0.1 – 2017년 8월 20일)을 게시했습니다. 저장소에 풀 리퀘스트를 할 수도 있었지만 저와 구현을 보는 다른 사람들이 소스 코드를 이해하는 데 도움이 되도록 많은 리팩토링을 수행하고 많은 주석을 추가했습니다. 📖

또한 GitHub에서 NPM.js까지 웹 구성 요소의 전체 게시와 최신WebComponents.org 데이터베이스를 경험하고 싶었습니다. 이를 통해 문서 작성 및 단위 테스트도 실험했습니다. 📗

Captain Codeman의 작업이 저에게 많은 도움이 되었기 때문에 README.md 파일에 크레딧을 추가하여 해당 구성 요소를 언급했습니다.

sherby-metadata 구성 요소가 NPM 레지스트리에 게시되었으므로 새 웹 사이트에서 사용하기 위해 아래 명령을 실행하기만 하면 되었습니다. 이 구성 요소를 게시하는 것이 정말 좋습니다. 😊

npm install @sherby/sherby-metadata

역사와 미래의 일

제 개인 웹사이트가 발전함에 따라 Polymer 3 (2.0.0-rc.2 – 2018년 5월 11일) 및 마지막으로 LitElement (3.0.0 – 2019년 7월 7일)을 지원하도록 리팩토링했습니다.

내 블로그 내 구성 요소의 새로운 사용 사례를 통해 태그에 대한 multiple values 지원(사용 사례: 기사:태그 및 기사:작성자) 및 렌더링할 것이 없기 때문에 mixin.

그리고 내가 하는 동안 노드 버전 업데이트 및 문서 개선과 같은 일부 유지 관리 작업이 있을 것이라고 확신합니다. 🤖

따라서 곧 3.1.0 버전이 나올 것입니다. 다음 릴리스가 나올 때 알림을 받으려면 저장소를 확인하십시오. 또는 간단히 실행하십시오npm-check-updates ! 😉 그리고 사용하신다면 망설이지 말고 GitHub에서 프로젝트에 별표를 남겨주세요! 🌟

우연히 검색엔진에서 이 글을 찾으셨나요? 😉