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]);
|
||||
|
||||
// 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) => {
|
||||
return amount?.toLocaleString() + ' ل.س';
|
||||
};
|
||||
@ -351,9 +396,18 @@ export default function PropertyDetailsPage() {
|
||||
</button>
|
||||
<button
|
||||
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 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');
|
||||
}}
|
||||
className="p-2 hover:bg-blue-50 rounded-full transition-colors flex items-center gap-1"
|
||||
|
||||
Reference in New Issue
Block a user