Angular2 SEO - Cách tạo ứng dụng 2 góc có thể thu thập thông tin

Tôi đang xây dựng ứng dụng Angular 2 sử dụng Angular-Meteor framework.Angular2 SEO - Cách tạo ứng dụng 2 góc có thể thu thập thông tin

Tôi muốn đạt được nhanh chóng và nhất quán indexing bởi google và công cụ tìm kiếm khác, và cho phép Facebook sharer và chọc khác để tạo xem trước nội dung JS tạo của tôi.

Thông thường SPA sử dụng PhantomJS để hiển thị phía máy chủ trang và gửi HTML tĩnh cho ứng dụng khách.

Tất nhiên tôi có thể tự tạo ra PhantomJS khi tôi chặn một _escaped_fragment_ hoặc khi tôi thấy tác nhân người dùng google hoặc scraper, nhưng tôi luôn gặp phải rò rỉ bộ nhớ và các phiên bản Phantom mồ côi khi sinh ra PhantomJS trực tiếp trên các trang web có lưu lượng truy cập lớn. NodeJS và this module).

Đối với góc 1 ứng dụng, tôi sử dụng để giải quyết việc này với các module góc như Angular-SEO, nhưng có vẻ như khó khăn để chuyển đổi mô-đun đó cho góc 2.

tôi không tìm thấy bất kỳ góc 2 mô-đun thích hợp cho việc này chưa . Tôi có nên xây dựng bản thân mình, hoặc có cách nào khác tốt để đạt được điều này như của ngày hôm nay?

Nguồn

2015-11-25 Rayjax

Điều tuyệt vời về Angular2 là khi được kích hoạt, tất cả nội dung bên trong phần tử ứng dụng gốc của bạn sẽ biến mất. Điều này có nghĩa rằng bạn có thể đặt bất cứ điều gì bạn muốn trong đó từ máy chủ mà bạn muốn được chọn bởi trình thu thập thông tin.

Bạn có thể tạo nội dung này bằng cách sử dụng phiên bản nội dung do máy chủ hiển thị trong ứng dụng của bạn hoặc có logic tùy chỉnh.

Bạn có thể tìm thấy một số thông tin ở đây: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering và ở đây: https://github.com/angular/universal

Nguồn

2015-11-25 14:04:25 jornare

video tuyệt vời, SEO thông minh, tốt hơn phương pháp tiếp cận ảo – Rayjax

Câu trả lời này hiện không được chấp nhận với phiên bản mới hơn của Angular vì nó là một phần của @ angular/platform-server – jornare

tôi vừa tạo ng2-meta, một module Angular2 có thể thay đổi các thẻ meta dựa trên tuyến đường hiện tại.

 

const routes: Routes = [ 
    { 
    path: 'home', 
    component: HomeComponent, 
    data: { meta: { title: 'Home page', description: 'Description of the home page' } } 
    }, 
    { 
    path: 'dashboard', 
    component: DashboardComponent, 
    data: { meta: { title: 'Dashboard', description: 'Description of the dashboard page', 'og:image': 'http://example.com/dashboard-image.png' } } 
    } 
];

Bạn cũng có thể cập nhật thẻ meta từ thành phần, dịch vụ, v.v.

 

class ProductComponent { 
    ... 
    constructor(private metaService: MetaService) {} 

    ngOnInit() { 
    this.product = //HTTP GET for product in catalogue 
    metaService.setTitle('Product page for '+this.product.name); 
    metaService.setTag('og:image',this.product.imageURL); 
    } 
}

Trong khi này phục vụ cho trình thu thập kích hoạt Javascript (như Google), bạn có thể đặt thẻ meta dự phòng cho trình thu thập thông tin không phải Javascript như Facebook và Twitter.

<head> 
    <meta name="title" content="Website Name"> 
    <meta name="og:title" content="Website Name"> 
    <meta name="og:image" content="http://example.com/fallback-image.png"> 
    ... 
</head>

Hỗ trợ hiển thị phía máy chủ đang được tiến hành.

Nguồn

2016-07-22 10:08:56 WeNeigh

Điều này dường như không hoạt động với Angular Universal, trang được tạo phía máy chủ. 'document.querySelector không được định nghĩa' – Gerardlamo

Tôi sử dụng plugin ng2meta và có vẻ như công cụ quản trị trang web/google không thu thập dữ liệu. Nó vẫn cho rằng tôi có các thẻ meta trùng lặp, v.d. Đối với mô tả. Ý tưởng nào? – AngularM

serverside vẽ không phải là một yêu cầu cho một thứ hạng google đàng hoàng ...

Tôi đã có một diễn đàn với khoảng 33.000 mục trong file sitemap google nó. Trang web này được viết bằng cách sử dụng biểu mẫu web asp.net và có luồng yêu cầu đến từ google. Trang web này đã có khả năng đọc trên thiết bị di động rất xấu (một số thứ bị Google trừng phạt, nó thực sự đề cập đến điều này trong google "bảng điều khiển tìm kiếm" của tôi)

Tôi viết lại mọi thứ với góc cạnh (phiên bản được triển khai là angular5). Tôi đang sử dụng dịch vụ Tiêu đề và Meta để đặt tiêu đề và thẻ meta của mình. Tất cả các tuyến đường đều chứa các từ khóa được trích xuất từ nội dung thực tế.Tôi cũng đảm bảo rằng mọi phần tử có thuộc tính [routeLink] là thẻ A mà tôi cũng đã chỉ định phần tử href (đó là điều mà trình thu thập thông tin tìm kiếm ...) Và tất nhiên tôi đã chú ý đến khả năng đọc trên thiết bị di động.

Kết quả: tôi thực sự nhận được nhiều lưu lượng truy cập đến hơn trước đây và trong bảng điều khiển tìm kiếm tôi thấy rõ rằng các trang được lập chỉ mục của tôi tăng lên: trong số 30k + trang, chỉ khoảng 10K được đưa vào chỉ mục. Bây giờ tôi có gần 25k trang trong chỉ mục.

Tôi không nói rằng hiển thị trên máy chủ không liên quan. Sử dụng các phương pháp phổ quát hoặc các phương pháp khác sẽ dẫn đến thời gian tải xuống nhanh hơn, điều này có thể dẫn đến điểm số cao hơn. Nhưng google chắc chắn có thể lập chỉ mục đúng một SPA góc.

chỉnh sửa: một số bằng chứng: nếu bạn google "3ds max threadripper", bạn sẽ thấy rằng nó thực sự vượt trội hơn một trong những trang web phần cứng lớn nhất trên internet.

Nguồn

2018-01-03 14:16:07 Davy

Angular2 SEO - Cách tạo ứng dụng 2 góc có thể thu thập thông tin

Trả lời

Các vấn đề liên quan