Improve Facebook share: structured text + OG meta tags
All checks were successful
Build frontend / build (push) Successful in 1m3s
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:
@ -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}"e=${quote}`, '_blank', 'width=600,height=400');
|
window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}"e=${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"
|
||||||
|
|||||||
Reference in New Issue
Block a user