Pinterest SEO Description Generator

Pinterest topic / pin idea setTopic(e.target.value)} placeholder="e.g. Creamy Avocado Pasta" className="mt-1 block w-full rounded-md border p-2" />

Tone

Include "Visit Site" hint

setVisitButtonHint(e.target.checked)} className="mr-2" /> Yes

Suggested Title

setTitle(e.target.value)} className="w-full rounded border p-2" />

Ideal length: 30–60 chars

Suggested Description

setDescription(e.target.value)}
            className="w-full mt-2 rounded border p-2 h-28"
          />
          <div className="mt-2 flex justify-between items-center">
            <p className="text-sm text-gray-500">Recommended: 100–300 characters</p>
            <div className="flex gap-2">
              <button onClick={() => copyToClipboard(description)} className="px-3 py-2 rounded border">Copy</button>
              <button
                onClick={() => {
                  const newDesc = description + " \nFull recipe on the site — tap 'Visit Site'";
                  setDescription(newDesc);
                }}
                className="px-3 py-2 rounded border"
              >
                Add Visit Hint
              </button>
            </div>
          </div>
        </div>

<div className="p-4 rounded border">
          <h2 className="font-semibold">Keywords & Hashtags</h2>
          <div className="mt-2">
            <div className="mb-2">
              <label className="block text-sm">Keywords (comma separated)</label>
              <input
                value={keywordsList.join(", ")}
                onChange={(e) => setKeywordsList(e.target.value.split(",").map(s => s.trim()))}
                className="w-full rounded border p-2"
              />
            </div>

<label className="block text-sm">Hashtags</label>
            <input
              value={hashtags}
              onChange={(e) => setHashtags(e.target.value)}
              className="w-full rounded border p-2"
            />

<div className="mt-3 flex gap-2">
              <button
                onClick={() => {
                  setKeywordsList(topKeywordsFromTopic(topic));
                  setHashtags(makeHashtags(topic));
                }}
                className="px-3 py-2 rounded bg-emerald-600 text-white"
              >
                Auto-fill keywords
              </button>

<button
                onClick={() => copyToClipboard(keywordsList.join(", ") + "\n" + hashtags)}
                className="px-3 py-2 rounded border"
              >
                Copy Keywords + Hashtags
              </button>
            </div>
          </div>
        </div>

<div className="p-4 rounded border">
          <h2 className="font-semibold">SEO Meta (preview)</h2>
          <pre className="mt-2 bg-gray-50 p-3 rounded text-sm">
            {JSON.stringify(makeMeta(title || makePinTitle(topic), description || makeSEODescription(topic, tone, visitButtonHint), keywordsList), null, 2)}
          </pre>
        </div>
      </div>

<div className="mt-6 text-sm text-gray-600">
        <strong>Notes:</strong>
        <ul className="list-disc ml-6 mt-2">
          <li>For best results, use the primary keyword in the first 1–3 words of the title.</li>
          <li>Keep descriptions conversational and include a short CTA like "Tap 'Visit Site'".</li>
          <li>This is a client-side prototype. For large-scale generation, integrate with an AI API or add bulk CSV import/export.</li>
        </ul>
      </div>
    </div>
  );
}
</body></html>