feat(site): 소셜 미리보기 카드 + 페이지 자체 기능 서술 정정

site/index.html

@@ -6,8 +6,28 @@
     <title>editor-ruler — 웹 에디터를 위한 Word 스타일 줄자</title>
     <meta
       name="description"
-      content="웹 리치텍스트 에디터를 위한 Word 스타일 가로 줄자. 여백·첫 줄 들여쓰기 드래그 핸들, 가이드선·스냅, 테이블 컬럼 마커. Froala·Tiptap·CKEditor 5 어댑터. 의존성 0."
+      content="웹 리치텍스트 에디터를 위한 Word 스타일 가로 줄자. 여백·첫 줄 들여쓰기 드래그 핸들, 세로 줄자, 가이드선·스냅. Froala·Tiptap·CKEditor 5 어댑터, 의존성 0 코어. API 1.0 안정."
     />
+    <link rel="canonical" href="https://devslab-kr.github.io/editor-ruler/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="devslab open source" />
+    <meta property="og:url" content="https://devslab-kr.github.io/editor-ruler/" />
+    <meta property="og:title" content="editor-ruler — Word 스타일 줄자, 어느 웹 에디터에나" />
+    <meta
+      property="og:description"
+      content="여백·첫 줄 들여쓰기 드래그 핸들, 세로 줄자, 가이드선·스냅. Froala·Tiptap·CKEditor 5 어댑터, 의존성 0 코어. API 1.0 안정."
+    />
+    <meta property="og:image" content="https://devslab-kr.github.io/editor-ruler/og.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="editor-ruler: a Word-style ruler above an editor, with indented paragraphs" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="editor-ruler — Word 스타일 줄자, 어느 웹 에디터에나" />
+    <meta
+      name="twitter:description"
+      content="여백·첫 줄 들여쓰기 드래그 핸들, 세로 줄자, 가이드선·스냅. Froala·Tiptap·CKEditor 5 어댑터, 의존성 0 코어."
+    />
+    <meta name="twitter:image" content="https://devslab-kr.github.io/editor-ruler/og.png" />
     <meta name="google-site-verification" content="nIGsjwN9PU78ZpydYp5q4blPGCHBaZZRuvVI8wsJREg" />
     <style>
       :root {
@@ -186,8 +206,8 @@ <h1>웹 에디터에는 줄자가 없었습니다.<br />이제 어디에나 달
         <span class="badge">TypeScript</span>
         <span class="badge">cm · in · px</span>
         <span class="badge">가이드선 + 스냅</span>
-        <span class="badge">테이블 컬럼 마커</span>
-        <span class="badge">Froala · Tiptap</span>
+        <span class="badge">세로 줄자</span>
+        <span class="badge">Froala · Tiptap · CKEditor 5</span>
         <span class="badge">Apache-2.0</span>
       </div>
       <div class="hero-cta">
@@ -390,7 +410,7 @@ <h2>API 요약</h2>
       <section id="faq">
         <h2>자주 묻는 것</h2>
         <p><strong>결과물 HTML은 어떻게 나오나요?</strong> 순수 인라인 CSS입니다 — <code>&lt;p style="margin-left: 75px; text-indent: 38px"&gt;</code>. 어디로 내보내도(메일·다른 페이지·CMS) 레이아웃이 유지됩니다.</p>
-        <p><strong>테이블·이미지는요?</strong> Word처럼 다 밀립니다 — 테이블 안에 커서를 두고 드래그하면 <strong>테이블 전체</strong>가 이동하고, 셀 안 문단은 개별 들여쓰기, 이미지는 소속 블록과 함께 움직입니다. 테이블 안에서는 줄자에 <strong>컬럼 경계 마커</strong>가 떠서 드래그로 컬럼 폭도 조절됩니다 (병합 셀 테이블 제외).</p>
+        <p><strong>테이블·이미지는요?</strong> Word처럼 다 밀립니다 — 테이블 안에 커서를 두고 드래그하면 <strong>테이블 전체</strong>가 이동하고, 셀 안 문단은 개별 들여쓰기, 이미지는 소속 블록과 함께 움직입니다. 테이블 안에서는 줄자에 <strong>컬럼 경계 마커</strong>가 떠서 드래그로 컬럼 폭도 조절됩니다 (병합 셀 테이블 제외). <em>이 테이블·이미지 동작은 현재 Froala 어댑터 전용입니다 — Tiptap·CKEditor 5에서는 문단 들여쓰기·세로 줄자·가이드선까지 동일하게 동작합니다.</em></p>
         <p><strong>가이드선은 문서에 남나요?</strong> 아니요 — 순수 시각 오버레이라 내보내는 HTML에 전혀 남지 않습니다. 정렬 참고용이며, 드롭다운에서 잠그거나 한 번에 지울 수 있고, <strong>드래그 중 핸들과 컬럼 마커가 가이드 근처에서 스냅</strong>됩니다.</p>
         <p><strong>탭 스톱은요?</strong> HTML에는 탭 스톱 모델이 없어 의도적으로 범위 밖입니다. 여백·들여쓰기는 CSS와 1:1이라 어디서나 안전하게 동작합니다.</p>
         <p><strong>다른 에디터는요?</strong> 코어가 에디터 불문이라 어댑터는 "선택 블록 읽기/스타일 쓰기/undo 연결"만 하면 됩니다 — <a href="https://github.com/devslab-kr/editor-ruler/tree/main/packages/editor-ruler-froala">Froala</a>·<a href="https://github.com/devslab-kr/editor-ruler/tree/main/packages/editor-ruler-tiptap">Tiptap</a>·<a href="https://github.com/devslab-kr/editor-ruler/tree/main/packages/editor-ruler-ckeditor5">CKEditor 5</a> 어댑터가 이미 있고, 위 탭에서 셋 다 바로 써볼 수 있습니다. 다른 에디터가 필요하면 이슈로 알려주세요.</p>
@@ -456,7 +476,7 @@ <h2>자주 묻는 것</h2>
           '<p>기본 문단. 여러 문단을 걸쳐 선택하고 드래그하면 한꺼번에 이동합니다.</p>',
         table:
           '<h3>테이블</h3>' +
-          '<p>셀에 커서를 두면 줄자에 <strong>컬럼 경계 마커</strong>가 뜨고, 여백 핸들을 끌면 <strong>테이블 전체</strong>가 이동합니다.</p>' +
+          '<p>Froala 탭에서 셀에 커서를 두면 줄자에 <strong>컬럼 경계 마커</strong>가 뜨고, 여백 핸들을 끌면 <strong>테이블 전체</strong>가 이동합니다.</p>' +
           PRESET_TABLE,
         image:
           '<h3>이미지</h3>' +