Improve Facebook share: structured text + OG meta tags
All checks were successful
Build frontend / build (push) Successful in 1m3s

- Share quote now includes: property type, price, rooms, area, description snippet
- Added Open Graph meta tags (og:title, og:description, og:image, og:url)
- Added Twitter card meta tags
- OG tags set dynamically via useEffect for client-side rendering
This commit is contained in:
Claw AI
2026-03-30 13:36:12 +00:00
parent 891756e092
commit 4d43cdaba2

View File

@ -205,6 +205,51 @@ export default function PropertyDetailsPage() {
}); });
}, [property, params.id]); }, [property, params.id]);
// Set Open Graph meta tags dynamically for Facebook/Twitter sharing
useEffect(() => {
if (!property) return;
const typeLabel = property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت';
const priceLabel = `${formatCurrency(property.price)} / ${property.priceUnit === 'daily' ? 'يوم' : 'شهر'}`;
const desc = `${typeLabel} في ${property.location?.address || ''} · ${property.bedrooms} غرف نوم · ${property.bathrooms} حمامات · ${property.area} م²`;
const imageUrl = property.images?.[0]
? (property.images[0].startsWith('http') ? property.images[0] : `http://45.93.137.91${property.images[0]}`)
: '';
const setMeta = (prop, content) => {
let tag = document.querySelector(`meta[property="${prop}"]`);
if (!tag) {
tag = document.createElement('meta');
tag.setAttribute('property', prop);
document.head.appendChild(tag);
}
tag.setAttribute('content', content);
};
const setMetaName = (name, content) => {
let tag = document.querySelector(`meta[name="${name}"]`);
if (!tag) {
tag = document.createElement('meta');
tag.setAttribute('name', name);
document.head.appendChild(tag);
}
tag.setAttribute('content', content);
};
setMeta('og:title', `${property.title} - ${priceLabel}`);
setMeta('og:description', desc);
if (imageUrl) setMeta('og:image', imageUrl);
setMeta('og:url', window.location.href);
setMeta('og:type', 'website');
setMeta('og:site_name', 'SweetHome');
// Twitter cards
setMetaName('twitter:card', 'summary_large_image');
setMetaName('twitter:title', `${property.title} - ${priceLabel}`);
setMetaName('twitter:description', desc);
if (imageUrl) setMetaName('twitter:image', imageUrl);
}, [property]);
const formatCurrency = (amount) => { const formatCurrency = (amount) => {
return amount?.toLocaleString() + ' ل.س'; return amount?.toLocaleString() + ' ل.س';
}; };
@ -351,9 +396,18 @@ export default function PropertyDetailsPage() {
</button> </button>
<button <button
onClick={() => { onClick={() => {
const title = encodeURIComponent(property?.title || 'عقار'); const typeLabel = property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت';
const priceLabel = `${formatCurrency(property.price)} / ${property.priceUnit === 'daily' ? 'يوم' : 'شهر'}`;
const lines = [
`🏠 ${typeLabel} مفروشة في ${property.location?.address || ''}`,
`💰 ${priceLabel}`,
`🛏️ ${property.bedrooms} غرف نوم | 🚿 ${property.bathrooms} حمامات | 📐 ${property.area} م²`,
property.description ? `📝 ${property.description.substring(0, 80)}...` : '',
'',
'🔥 احجز الآن على SweetHome',
].filter(Boolean);
const quote = encodeURIComponent(lines.join('\n'));
const url = encodeURIComponent(window.location.href); const url = encodeURIComponent(window.location.href);
const quote = encodeURIComponent(`${property?.title || 'عقار'} - SweetHome\n${property?.location?.address || ''}`);
window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${quote}`, '_blank', 'width=600,height=400'); window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${quote}`, '_blank', 'width=600,height=400');
}} }}
className="p-2 hover:bg-blue-50 rounded-full transition-colors flex items-center gap-1" className="p-2 hover:bg-blue-50 rounded-full transition-colors flex items-center gap-1"