Saya telah membuat SPA - Aplikasi Satu Halaman dengan Angular 11 yang saya hosting di server hosting bersama.

Masalah yang saya miliki adalah saya tidak dapat membagikan halaman apa pun yang saya miliki (kecuali rute pertama - /) di media sosial (Facebook dan Twitter) karena tag meta tidak diperbarui (Saya memiliki Layanan yang menangani meta tag untuk setiap halaman) berdasarkan halaman yang diminta (saya tahu ini karena Facebook dan Twitter tidak merayapi JavaScript).

Untuk memperbaiki masalah ini saya mencoba Angular Universal (SSR - Server Side Rendering) dan Scully (membuat halaman statis). Keduanya (Angular Universal dan Scully) memperbaiki masalah saya, tetapi saya lebih suka menggunakan build Angular SPA default.

Pendekatan yang saya ambil:

  • Struktur file (server hosting bersama /public_html/):
- crawlers/
           - crawlers.php
           - share/
                   - 404.json
                   - about.json
                   - work.json
- .htaccess
- index.html
  • crawler.php berisi yang berikut:
<?php

$page = filter_input(INPUT_GET, 'page');

if (file_exists('./share/'.$page.'.json')) {
    $file = file_get_contents('./share/'.$page.'.json');
} else {
    $file = file_get_contents('./share/404.json');
}

$data = json_decode($file);

return makePage($data); 

function makePage($data) { 
    $html  = '<!doctype html>'.PHP_EOL;
    $html .= '<html>'.PHP_EOL;

    $html .= '<head>'.PHP_EOL;

    $html .= '<meta property="og:type" content="website" />'.PHP_EOL;
    $html .= '<meta property="og:site_name" content="My Website" />'.PHP_EOL;
    $html .= '<meta property="og:title" content="'.$data->title.'" />'.PHP_EOL;
    $html .= '<meta property="og:description" content="'.$data->description.'" />'.PHP_EOL;
    $html .= '<meta property="og:image" content="'.$data->image.'" />'.PHP_EOL;

    $html .= '<meta name="twitter:card" content="summary_large_image"/>'.PHP_EOL;
    $html .= '<meta name="twitter:title" content="'.$data->title.'" />'.PHP_EOL;
    $html .= '<meta name="twitter:description" content="'.$data->description.'" />'.PHP_EOL;
    $html .= '<meta name="twitter:image" content="'.$data->image.'" />'.PHP_EOL;
    
    $html .= '<meta http-equiv="refresh" content="0;url='.$data->url.'">'.PHP_EOL;

    $html .= '</head>'.PHP_EOL;
    $html .= '<body></body>'.PHP_EOL;

    $html .= '</html>';

    echo $html;
}

?>

og:url tidak ditentukan karena saya pikir dengan tidak menentukannya, Facebook tidak akan mengetahui URL konten yang sebenarnya dan akan menautkan kartunya ke file statis. Seharusnya tidak menjadi masalah karena saya menggunakan http-equiv="refresh", yang akan mengarahkan pengguna normal ke URL yang benar.

  • Misalnya, 404.json berisi yang berikut ini:
{
  "title": "404: Not Found | My Website",
  "description": "My awesome description.",
  "image": "https://www.mywebsite.com/assets/images/share/404.jpg",
  "url": "https://www.mywebsite.com",
}

  • .htaccess berisi yang berikut ini:
RewriteEngine On
RewriteBase /

# Allow robots.txt to pass through
RewriteRule ^robots.txt - [L]

# Allow social media crawlers to work
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot)
RewriteRule ^(.+)$ /crawlers/crawlers.php?page=$1 [NC,L]

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist use index.html
RewriteRule ^ /index.html

Saat saya menguji crawlers/crawlers.php?page=test-page, ini berfungsi dengan baik (setelah mengakses https://www.mywebsite.com/crawlers/crawlers.php?page=test-page), alasan mengapa saya yakin masalahnya ada pada kondisi .htaccess di bawah # Allow social media crawlers to work. Berbagi di Facebook masih menunjukkan tag meta dari rute pertama (/), yang berarti bahwa pengalihan ke crawlers/crawlers.php tidak berfungsi.
Juga, di https://developers.facebook.com/tools/debug/ berbagi/ url https://www.mywebsite.com/about tidak dialihkan ke https://www.mywebsite.com/crawelers/crawlers.php?page=about.

Saya ingin menggunakan redirect ke crawlers/crawlers.php untuk crawler media sosial hanya untuk halaman seperti ini: https://www.mywebsite.com/about, https://www.mywebsite.com/work, dll tetapi tidak untuk https://www.mywebsite.com (rute pertama - /) .

Bantuan apa pun sangat dihargai. Terima kasih!

0
sergiuwaxmann 25 Mei 2021, 13:12

1 menjawab

Jawaban Terbaik

Berkat bimbingan @CBroe, saya berhasil membuat perayap media sosial (Facebook dan Twitter) berfungsi (tanpa menggunakan Angular Universal, Scully, Prerender.io, dll) untuk Angular 11 SPA - Aplikasi Satu Halaman, yang saya hosting server hosting bersama.

Masalah yang saya miliki dalam pertanyaan di atas adalah di .htaccess.

Ini .htaccess saya (yang berfungsi seperti yang diharapkan):

RewriteEngine On

# Force www.
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Allow robots.txt to pass through
RewriteRule ^robots.txt - [L]

# Allow social media crawlers to work
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/*|Facebot|Twitterbot)
RewriteRule ^(.+)$ /crawlers/social_media.php?page=$1 [R=301,L]

# If the requested resource doesn't exist use index.html
RewriteRule ^ /index.html

PS Saya mengganti nama crawlers.php menjadi social_media.php dan juga menambahkan pengalihan dari mywebsite.com ke www .website saya.com

0
sergiuwaxmann 27 Mei 2021, 07:57