{/* LEFT: Main Settings */}

Search Metadata

Global Meta Title setData('seo_title', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all" placeholder="Company Name | Tagline" />

Recommended: 50-60 characters.

Global Meta Description

setData('seo_description', e.target.value)}
                                        rows={4}
                                        className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all resize-none"
                                        placeholder="Enter a brief summary of your business..."
                                    />
                                    <p className="mt-1.5 text-[11px] text-[#8C92AC]">Recommended: 150-160 characters.</p>
                                </div>

<div>
                                    <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">
                                        Global Keywords
                                    </label>
                                    <input 
                                        type="text"
                                        value={data.seo_keywords}
                                        onChange={e => setData('seo_keywords', e.target.value)}
                                        className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all"
                                        placeholder="growth, strategy, digital assets..."
                                    />
                                    <p className="mt-1.5 text-[11px] text-[#8C92AC]">Comma-separated list of keywords.</p>
                                </div>
                            </div>

<div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden p-6 space-y-6">
                                <div className="flex items-center gap-2 text-accent">
                                    <Share2 className="h-5 w-5" />
                                    <h3 className="font-bold text-ink">Social Sharing (OG Image)</h3>
                                </div>

<div>
                                    <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-3">
                                        Default Social Media Image
                                    </label>
                                    <div className="relative group aspect-video rounded-2xl bg-[#FAFAF8] border-2 border-dashed border-[#E8E6DF] flex items-center justify-center overflow-hidden">
                                        {data.seo_og_image ? (
                                            <img src={data.seo_og_image} alt="SEO" className="w-full h-full object-cover" />
                                        ) : (
                                            <div className="text-center">
                                                <ImageIcon className="h-8 w-8 text-[#C0BDBA] mx-auto mb-3" />
                                                <span className="text-[12px] text-[#8C92AC]">1200 x 630px recommended</span>
                                            </div>
                                        )}
                                        <button 
                                            type="button"
                                            onClick={() => setPickerOpen(true)}
                                            className="absolute inset-0 bg-ink/60 text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 text-[14px] font-medium"
                                        >
                                            <ImageIcon className="h-4 w-4" />
                                            Choose Image
                                        </button>
                                    </div>
                                    <p className="mt-3 text-[11px] text-[#8C92AC]">This image will appear when you share links on WhatsApp, Twitter, and LinkedIn.</p>
                                </div>
                            </div>
                        </div>

{/* RIGHT: Preview & Tips */}
                        <div className="lg:col-span-4 space-y-6">
                            <div className="bg-ink text-white rounded-2xl p-6 shadow-xl">
                                <div className="flex items-center gap-2 mb-6">
                                    <Info className="h-5 w-5 text-accent" />
                                    <h3 className="font-bold">Google Preview</h3>
                                </div>
                                
                                <div className="space-y-1">
                                    <div className="text-[14px] text-accent truncate">altivatesolutions.com</div>
                                    <div className="text-[18px] font-medium text-blue-400 line-clamp-2 hover:underline cursor-pointer">
                                        {data.seo_title || 'Your SEO Title'}
                                    </div>
                                    <div className="text-[13px] text-gray-300 line-clamp-3">
                                        {data.seo_description || 'Your meta description will appear here to attract visitors from search results.'}
                                    </div>
                                </div>
                            </div>

<div className="bg-white rounded-2xl border border-[#E8E6DF] p-6">
                                <h4 className="text-[13px] font-bold text-ink uppercase tracking-wider mb-4">SEO Tips</h4>
                                <ul className="space-y-4">
                                    <li className="flex gap-3 text-[13px] text-[#8C92AC]">
                                        <span className="h-1.5 w-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                                        Keep titles descriptive and unique.
                                    </li>
                                    <li className="flex gap-3 text-[13px] text-[#8C92AC]">
                                        <span className="h-1.5 w-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                                        Include your primary keywords naturally.
                                    </li>
                                    <li className="flex gap-3 text-[13px] text-[#8C92AC]">
                                        <span className="h-1.5 w-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                                        Use a high-quality OG image for social credibility.
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

<div className="flex justify-end pt-4">
                        <button 
                            type="submit" 
                            disabled={processing}
                            className="w-full sm:w-auto px-12 py-4 bg-ink text-white rounded-2xl text-[15px] font-semibold flex items-center justify-center gap-2 hover:bg-accent transition-all shadow-lg active:scale-[0.98] disabled:opacity-50"
                        >
                            <Save className="h-4 w-4" />
                            {processing ? 'Saving...' : 'Publish SEO Settings'}
                        </button>
                    </div>
                </form>
            </div>

<MediaPicker 
                open={pickerOpen}
                onClose={() => setPickerOpen(false)}
                onSelect={handleMediaSelect}
                title="Select Social Sharing Image"
            />
        </AdminLayout>
    );
}

SEO Center

Search Metadata