खोज इंजन AngularJS अनुप्रयोगों से कैसे निपटते हैं?

Question

मैं खोज इंजन और एसईओ के बारे में AngularJS आवेदन के साथ दो मुद्दों को देखता हूं:

1) कस्टम टैग के साथ क्या होता है? क्या खोज इंजन उन टैग के भीतर की संपूर्ण सामग्री को अनदेखा करते हैं? यानी मान लो मेरे पास है

<custom>
  <h1>Hey, this title is important</h1>
</custom>

होगा <h1>अंदर कस्टम टैग होने के बावजूद अनुक्रमित किया?

2) क्या कोई तरीका है कि {{}} इंडेक्सिंग के सर्च इंजनों से बचा जाए? अर्थात

<h2>{{title}}</h2>

मुझे पता है कि मैं कुछ ऐसा कर सकता था

<h2 ng-bind="title"></h2>

लेकिन क्या होगा अगर मैं वास्तव में क्रॉलर को "देखना" शीर्षक देना चाहता हूं? क्या सर्वर-साइड एकमात्र समाधान प्रदान कर रहा है?

Comments

इन सभी "समाधानों" से मुझे केवल एंगुलरजेएस जैसी तकनीकों से दूर रखना है, कम से कम जब तक कि Google एट सभी में अधिक क्रॉलर नहीं हैं।

— कोडमेकिन

@Codemonkey: हाँ किसी को आश्चर्य होगा कि क्यों सभी AngularJS जो कि Google का एक उत्पाद है, इसके लिए बिल्ट-इन समाधान के साथ नहीं आया है .. Wierd वास्तव में ..

— रॉय MJ

दरअसल, मिसको ने Google के लिए काम करने से पहले कोणीय लिखा था। Google अब इस परियोजना को प्रायोजित करता है, लेकिन वे मूल नहीं हैं।

— superluminary

शायद किसी ने एसपीए पर विकिपीडिया लेख को अपडेट किया / कर सकता है जो बताता है कि "एसपीए आमतौर पर एक संदर्भ में उपयोग नहीं किया जाता है जहां खोज इंजन अनुक्रमण या तो एक आवश्यकता है, या वांछनीय है।" en.wikipedia.org/wiki/Single-page_application [# सर्च इंजन ऑप्टिमाइज़ेशन] थेरेस नामक एक (अस्पष्ट) जावा आधारित फ्रेमवर्क के बारे में एक बड़ा पैराग्राफ है, लेकिन कोई सुझाव नहीं है कि SEO को Angularjs की पसंद से संबोधित किया गया है।

— लिनोजोन

@ रो एमजे - कोई भी इरादा क्यों नहीं देखता है? पेजस्पीड, एंगुलर आदि सभी SERPs पर प्राकृतिक, जैविक लिस्टिंग के दुश्मन हैं। जानबूझकर। जब आपके पास पे-पर-क्लिक के आधार पर एक बहुत बड़ा व्यवसाय मॉडल होता है ... तो लोगों को अपनी संपूर्ण टूलबॉक्स बनाने की तुलना में उनकी लिस्टिंग के लिए भुगतान करने के लिए कितना बेहतर होगा जो उन्हें कोई विकल्प नहीं देगा, लेकिन ऐसा करने के लिए? मूल्यवान सामग्री से भरी गुणवत्ता वाली वेब साइटों के निर्माण के बजाय, यह उद्योग अब धोखेबाज़ी और समाधानों के साथ बह निकला है, जो स्क्वाट को आसानी से प्राप्त या हल नहीं करता है।

— स्टीवन वेंटिमिग्लिया

Answer 1

मई 2014 को अपडेट करें

Google क्रॉलर अब जावास्क्रिप्ट को निष्पादित करते हैं - आप Google वेबमास्टर टूल का उपयोग करके बेहतर तरीके से समझ सकते हैं कि Google द्वारा आपकी साइटें कैसे प्रस्तुत की जाती हैं।

मूल उत्तर
यदि आप खोज इंजन के लिए अपने ऐप को ऑप्टिमाइज़ करना चाहते हैं तो दुर्भाग्य से क्रॉलर को प्री-रेंडर किए गए संस्करण को परोसने का कोई तरीका नहीं है। आप यहाँ ajax और जावास्क्रिप्ट-भारी साइटों के लिए Google की सिफारिशों के बारे में अधिक पढ़ सकते हैं ।

यदि यह एक विकल्प है तो मैं इस लेख को पढ़ने की सलाह दूंगा कि सर्वर-साइड रेंडरिंग के साथ कोणीय के लिए एसईओ कैसे करें।

मुझे यकीन नहीं है कि जब क्रॉलर कस्टम टैग का सामना करता है तो वह क्या करता है।

Comments

यह अब चालू नहीं है। अब आपको इसके बजाय पुशस्टेट का उपयोग करना चाहिए। साइट के एक अलग स्थिर संस्करण की सेवा करने की आवश्यकता नहीं है।

— सुपरलुमिनरी

यहां तक ​​कि Google अपडेट के साथ, एनजी-व्यू को सही ढंग से प्रस्तुत नहीं किया जाएगा, जैसा कि मैं Google वेबमास्टर टूल में देख सकता हूं

— tschiela

हाँ, क्योंकि वे जावास्क्रिप्ट निष्पादित करते हैं, इसका मतलब यह नहीं है कि आपके पृष्ठ को ठीक से अनुक्रमित किया जाएगा। सबसे सुरक्षित तरीका है Google bot useragent का पता लगाना, फैंटमज जैसे हेडलेस ब्राउजर का इस्तेमाल करना, page.contentस्टेटिक html को प्राप्त करना और वापस करना।

— परीक्षक

मुझे एहसास है कि यह सवाल एसईओ के लिए विशिष्ट है, लेकिन ध्यान रखें कि अन्य क्रॉलर (फेसबुक, ट्विटर, आदि) अभी तक जावास्क्रिप्ट का मूल्यांकन करने में सक्षम नहीं हैं। उदाहरण के लिए, सोशल मीडिया साइटों पर पृष्ठों को साझा करना, सर्वर-साइड रेंडरिंग रणनीति के बिना एक समस्या होगी।

— स्टीफन वाटकिंस

कृपया, क्या कोई Google क्रॉलिंग योजना विनिर्देश को लागू किए बिना AngularJS साइट का उदाहरण सही रूप से अनुक्रमित कर सकता है?

— 19_ पर check_ca

Answer 2

PushState और Precomposition का उपयोग करें

ऐसा करने का वर्तमान (2015) तरीका जावास्क्रिप्ट पुशस्टैट विधि का उपयोग कर रहा है।

पृष्ठ को पुनः लोड किए बिना शीर्ष ब्राउज़र बार में पुशस्टेट URL को बदल देता है। कहें कि आपके पास एक पृष्ठ है जिसमें टैब हैं। टैब छिपाते हैं और सामग्री दिखाते हैं, और सामग्री को गतिशील रूप से डाला जाता है, या तो AJAX का उपयोग करके या केवल प्रदर्शन सेट करके: कोई नहीं और प्रदर्शन: सही टैब सामग्री को छिपाने और दिखाने के लिए ब्लॉक करें।

जब टैब पर क्लिक किया जाता है, तो एड्रेस बार में url को अपडेट करने के लिए pushState का उपयोग करें। जब पृष्ठ प्रदान किया जाता है, तो पता पट्टी में मान का उपयोग करके निर्धारित करें कि कौन सा टैब दिखाना है। कोणीय मार्ग आपके लिए यह स्वचालित रूप से करेगा।

precomposition

PushState Single Page App (SPA) को हिट करने के दो तरीके हैं

1. PushState, जहां उपयोगकर्ता PushState लिंक पर क्लिक करता है और सामग्री AJAXed होती है।
2. सीधे यूआरएल को हिट करके।

साइट पर आरंभिक हिट में सीधे URL मारना शामिल होगा। इसके बाद की हिट सामग्री में केवल AJAX होगा क्योंकि PushState URL अपडेट करता है।

क्रॉलर एक पृष्ठ से लिंक की कटाई करते हैं और फिर बाद में प्रसंस्करण के लिए एक कतार में जोड़ते हैं। इसका मतलब है कि क्रॉलर के लिए, सर्वर पर प्रत्येक हिट एक सीधा हिट है, वे पुशस्टेट के माध्यम से नेविगेट नहीं करते हैं।

Precomposition सर्वर से पहली प्रतिक्रिया में प्रारंभिक पेलोड को बंडल करता है, संभवतः एक JSON ऑब्जेक्ट के रूप में। यह खोज इंजन को AJAX कॉल को निष्पादित किए बिना पृष्ठ को प्रस्तुत करने की अनुमति देता है।

यह सुझाव देने के लिए कुछ सबूत हैं कि Google AJAX अनुरोधों को निष्पादित नहीं कर सकता है। इस पर यहाँ और अधिक:

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

खोज इंजन जावास्क्रिप्ट को पढ़ और निष्पादित कर सकते हैं

Google कुछ समय के लिए जावास्क्रिप्ट को पार्स करने में सक्षम रहा है, यही कारण है कि उन्होंने मूल रूप से क्रोम विकसित किया है, ताकि Google मकड़ी के लिए पूर्ण विशेषताओं वाले हेडलेस ब्राउज़र के रूप में कार्य किया जा सके। यदि किसी लिंक में एक मान्य href विशेषता है, तो नया URL अनुक्रमित किया जा सकता है। ज्यादा कुछ नहीं करना है।

यदि इसके अलावा एक लिंक पर क्लिक करने से पुशस्टेट कॉल ट्रिगर हो जाता है, तो साइट को पुशस्टेट के माध्यम से उपयोगकर्ता द्वारा नेविगेट किया जा सकता है।

पुशस्टेट यूआरएल के लिए सर्च इंजन सपोर्ट

PushState वर्तमान में Google और बिंग द्वारा समर्थित है।

गूगल

यहां पॉल के लिए पुशस्टेट के बारे में पॉल आयरिश के सवाल का मैट कट्स जवाब दे रहा है:

http://youtu.be/yiAF9VdvRPw

यहाँ मकड़ी के लिए Google पूर्ण जावास्क्रिप्ट समर्थन की घोषणा कर रहा है:

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

अपशॉट यह है कि Google PushState का समर्थन करता है और PushState URL को अनुक्रमणित करेगा।

Google वेबमास्टर टूल को Googlebot के रूप में भी देखें। आप देखेंगे कि आपका जावास्क्रिप्ट (कोणीय सहित) निष्पादित है।

बिंग

मार्च 2013 में सुंदर पुशस्टेट URL के लिए बिंग के समर्थन की घोषणा यहाँ की गई है:

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

HashBangs # का उपयोग न करें!

हैशबैंग उरल्स एक बदसूरत स्टॉपगैप थे, जो डेवलपर को एक विशेष स्थान पर साइट का पूर्व-गाया संस्करण प्रदान करने की आवश्यकता थी। वे अभी भी काम करते हैं, लेकिन आपको उनका उपयोग करने की आवश्यकता नहीं है।

हैशबैंग URL इस तरह दिखते हैं:

domain.com/#!path/to/resource

इसे इस तरह से मेटाटैग के साथ जोड़ा जाएगा:

<meta name="fragment" content="!">

Google उन्हें इस रूप में अनुक्रमित नहीं करेगा, बल्कि इसके स्थान पर _escaped_fragments_ URL और उस अनुक्रमणिका से साइट का स्थैतिक संस्करण खींचेगा।

Pushstate URL किसी साधारण URL की तरह दिखाई देते हैं:

domain.com/path/to/resource

अंतर यह है कि एंगुलर ने आपके लिए जावास्क्रिप्ट में इसे डील करने वाले डॉक्यूमेंट.लोकेशन में बदलाव को रोकते हुए उन्हें आपके लिए हैंडल किया है।

यदि आप PushState URL (और आप शायद करते हैं) का उपयोग करना चाहते हैं, तो पुराने सभी हैश शैली के URL और मेटाटैग ले लें और बस अपने कॉन्फ़िगर ब्लॉक में HTML5 मोड को सक्षम करें।

अपनी साइट का परीक्षण करना

Google वेबमास्टर टूल में अब एक टूल शामिल है जो आपको Google के रूप में एक URL लाने की अनुमति देगा, और जावास्क्रिप्ट को प्रस्तुत करेगा क्योंकि Google इसे प्रस्तुत करता है।

https://www.google.com/webmasters/tools/googlebot-fetch

कोणीय में PushState URL उत्पन्न करना

# उपसर्गों के बजाय कोणीय में वास्तविक URL उत्पन्न करने के लिए, अपने $ स्थान पर HTML5 मोड सेट करें।

$locationProvider.html5Mode(true);

सर्वर साइड

चूंकि आप वास्तविक URL का उपयोग कर रहे हैं, इसलिए आपको सभी मान्य URL के लिए अपने सर्वर द्वारा समान टेम्पलेट (साथ ही कुछ पूर्व-निर्धारित सामग्री) सुनिश्चित करने की आवश्यकता होगी। आप यह कैसे करते हैं यह आपके सर्वर आर्किटेक्चर के आधार पर अलग-अलग होगा।

साइटमैप

आपका ऐप नेविगेशन के असामान्य रूपों का उपयोग कर सकता है, उदाहरण के लिए होवर या स्क्रॉल। यह सुनिश्चित करने के लिए कि Google आपके ऐप को चलाने में सक्षम है, मैं संभवतः साइटमैप बनाने का सुझाव दूंगा, जो आपके ऐप से संबंधित सभी url की एक सरल सूची है। आप इसे डिफ़ॉल्ट स्थान (/ sitemap या /sitemap.xml) पर रख सकते हैं, या Google को इसके बारे में बता सकते हैं।

वैसे भी साइटमैप रखना एक अच्छा विचार है।

ब्राउज़र का समर्थन

IE10 में पुशस्ट काम करता है। पुराने ब्राउज़रों में, कोणीय स्वचालित रूप से हैश शैली के URL पर वापस आ जाएगा

एक डेमो पेज

निम्नलिखित सामग्री को पूर्व-स्थिति के साथ एक पुशस्टेट URL का उपयोग करके प्रदान किया गया है:

http://html5.gingerhost.com/london

जैसा कि सत्यापित किया जा सकता है, इस लिंक पर , सामग्री अनुक्रमित है और Google में दिखाई दे रही है।

404 और 301 हैडर स्थिति कोड की सेवा

क्योंकि खोज इंजन आपके अनुरोध के लिए हमेशा आपके सर्वर से टकराएगा, आप अपने सर्वर से हेडर स्टेटस कोड की सेवा कर सकते हैं और Google से उन्हें देखने की उम्मीद कर सकते हैं।

Comments

मुझे इस पर गौर करना है - स्पष्टीकरण के लिए धन्यवाद। एक बात जो मैं सोचता रहा, वह यह है कि क्या गूगल अब पेज को इंडेक्स करने से पहले जावास्क्रिप्ट चलाता है?

— jvv

"पृष्ठ को पुनः लोड किए बिना शीर्ष ब्राउज़र बार में पुशस्टेट URL को बदल देता है ... जब टैब क्लिक किया जाता है, तो एड्रेस बार में url को अपडेट करने के लिए pushState का उपयोग करें। जब पृष्ठ प्रदान किया जाता है, तो पता लगाने के लिए पता बार में मान का उपयोग करें। दिखाने के लिए टैब। कोणीय रूटिंग स्वचालित रूप से आपके लिए यह करेगी। " लाइट बल्ब!

— atconway

@superluminary, क्या आप, कृपया, विषय को थोड़ा और गहराई से समझा सकते हैं? विशेष रूप से 'सर्वर साइड' अनुभाग। मैं angularjs + angularjs-path + locationProvider.html5Mode + Api + डायनेमिक नेविगेशन (html5.gingerhost.com पर स्थिर की तरह नहीं) का उपयोग कर रहा हूं। URL अच्छी तरह से प्रदर्शित होते हैं, हालांकि सामग्री अनुक्रमित नहीं होती है। किसी पृष्ठ को सीधे url द्वारा एक्सेस करते समय किसी स्थिर सामग्री की सेवा करें? मैं वास्तव में इस संदेश से भ्रमित हूं: >> आपको यह सुनिश्चित करने की आवश्यकता होगी कि सभी मान्य URL के लिए आपके सर्वर द्वारा समान टेम्पलेट को भेज दिया जाए? क्या आप इसे समझा सकते हैं? अग्रिम में।

— सेरे

@sray - यदि आपकी साइट का प्रत्येक URL समान टेम्प्लेट परोस रहा है, तो ब्राउज़र टेम्प्लेट को हथियाने में सक्षम होगा, और एंगुलर URL का निरीक्षण करके और सही सामग्री प्रदान करके इसे वहां से ले जाने में सक्षम होगा। यदि सर्वर पर सीधे उस URL को मारने से 404 या 500 वापस आता है तो आपको समस्या है, सीधे लिंक काम नहीं करेंगे, बुकमार्क काम नहीं करेंगे और आप अनुक्रमित नहीं होंगे। क्या आप अब देखते हैं?

— सुपरल्यूमिनरी

@ user3339411 - आपकी साइट का जवाब देने वाले प्रत्येक पृष्ठ के लिए आपके पास एक URL होना चाहिए। यदि आपकी साइट को सामग्री के एक सेट के साथ केवल एक URL का जवाब देना है, तो आपको किसी भी मार्ग की आवश्यकता नहीं है। यह एक साधारण साइट के लिए ठीक है। यदि आपकी साइट अलग-अलग URL के लिए अलग-अलग डेटा (JSON के माध्यम से) लाती है, तो यह रूटिंग का उपयोग करने के लिए समझ में आता है। क्योंकि Github स्थैतिक पृष्ठ फ़ाइल आधारित है, इसलिए आपको इस उदाहरण में प्रत्येक URL पर एक वास्तविक HTML फ़ाइल की आवश्यकता होगी। ऐसा कोई नियम नहीं है कि एक वेबसाइट को हालांकि फ़ाइल आधारित होना चाहिए, और यदि आप एक वैकल्पिक मंच का उपयोग करते हैं तो आप एक ही टेम्पलेट को कई URL के लिए परोस सकते हैं।

— सुपरलाइनरी

Answer 3

आइए AngularJS और SEO के बारे में निश्चित करें

Google, याहू, बिंग और अन्य खोज इंजन पारंपरिक क्रॉलरों का उपयोग करके वेब को पारंपरिक तरीकों से क्रॉल करते हैं। वे रोबोट चलाते हैं जो वेब पेजों पर HTML को क्रॉल करते हैं, रास्ते में जानकारी एकत्र करते हैं। वे दिलचस्प शब्द रखते हैं और अन्य पृष्ठों के अन्य लिंक की तलाश करते हैं (ये लिंक, उनकी राशि और उनमें से संख्या एसईओ के साथ खेलते हैं)।

तो क्यों खोज इंजन जावास्क्रिप्ट साइटों के साथ सौदा नहीं है?

इसका उत्तर इस तथ्य से है कि खोज इंजन रोबोट हेडलैस ब्राउज़रों के माध्यम से काम करते हैं और वे अक्सर एक पेज की जावास्क्रिप्ट को रेंडर करने के लिए जावास्क्रिप्ट रेंडरिंग इंजन नहीं रखते हैं। यह अधिकांश पृष्ठों के लिए काम करता है क्योंकि अधिकांश स्थिर पृष्ठ अपने पेज को प्रस्तुत करने के बारे में परवाह नहीं करते हैं, क्योंकि उनकी सामग्री पहले से ही उपलब्ध है।

इस विषय में क्या किया जा सकता है?

सौभाग्य से, बड़ी साइटों के क्रॉलर ने एक तंत्र को लागू करना शुरू कर दिया है जो हमें हमारे जावास्क्रिप्ट साइटों को क्रॉल करने की अनुमति देता है, लेकिन इसके लिए हमें अपनी साइट पर बदलाव लागू करना होगा ।

अगर हम अपने hashPrefixको बदलने के लिए #!बस के बजाय #, तो आधुनिक खोज इंजन के _escaped_fragment_बजाय का उपयोग करने के लिए अनुरोध बदल जाएगा #!। (HTML5 मोड के साथ, यानी जहां हमारे पास हैश उपसर्ग के बिना लिंक हैं, हम User Agentअपने बैकएंड में हेडर को देखते हुए इस सुविधा को लागू कर सकते हैं )।

यह कहना है, सामान्य ब्राउज़र से एक अनुरोध के बजाय जो दिखता है:

http://www.ng-newsletter.com/#!/signup/page

एक खोज इंजन इस पृष्ठ को खोजेगा:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

हम अपने एंगुलर एप्लिकेशन के हैश उपसर्ग को एक बिल्ट-इन विधि का उपयोग करके सेट कर सकते हैं ngRoute:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

और, यदि हम उपयोग कर रहे हैं, तो हमें html5Modeमेटा टैग का उपयोग करके इसे लागू करना होगा:

<meta name="fragment" content="!">

अनुस्मारक, हम सेवा के html5Mode()साथ सेट कर सकते हैं $location:

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

खोज इंजन को संभालना

हमारे पास यह निर्धारित करने के लिए बहुत सारे अवसर हैं कि हम वास्तव में स्थिर HTML के रूप में खोज इंजन में सामग्री वितरित करने के साथ कैसे निपटेंगे। हम स्वयं एक बैकएंड की मेजबानी कर सकते हैं, हम अपने लिए बैक-एंड होस्ट करने के लिए एक सेवा का उपयोग कर सकते हैं, हम सामग्री को वितरित करने के लिए एक प्रॉक्सी का उपयोग कर सकते हैं, आदि चलो कुछ विकल्पों को देखें:

स्व की मेजबानी की

हम एक बिना सिर वाले ब्राउज़र का उपयोग करके अपनी खुद की साइट को क्रॉल करने से निपटने के लिए एक सेवा लिख ​​सकते हैं, जैसे कि प्रेत या ज़ॉम्नेज, प्रदान किए गए डेटा के साथ पृष्ठ का स्नैपशॉट लेना और इसे HTML के रूप में संग्रहीत करना। जब भी हमें ?_escaped_fragment_खोज अनुरोध में क्वेरी स्ट्रिंग दिखाई देती है , तो हम केवल जेएस के माध्यम से पूर्व-रेंडर किए गए पृष्ठ के बजाय हमारे द्वारा लिए गए स्थैतिक HTML स्नैपशॉट प्रदान कर सकते हैं। इसके लिए हमें एक बैकएंड की आवश्यकता है जो हमारे पृष्ठों को बीच में सशर्त तर्क के साथ वितरित करता है। हम खुद को चलाने के लिए एक शुरुआती बिंदु के रूप में prerender.io के बैकेंड की तरह कुछ का उपयोग कर सकते हैं । बेशक, हमें अभी भी समीपवर्ती और स्निपेट को संभालने की आवश्यकता है, लेकिन यह एक अच्छी शुरुआत है।

एक सशुल्क सेवा के साथ

खोज इंजन में सामग्री प्राप्त करने का सबसे आसान और तेज़ तरीका ब्रोमबोन , seo.js , seo4ajax का उपयोग करना है , और prerender.io इनका अच्छा उदाहरण है जो आपके लिए उपरोक्त सामग्री प्रतिपादन की मेजबानी करेगा। यह उस समय के लिए एक अच्छा विकल्प है जब हम सर्वर / प्रॉक्सी चलाने से निपटना नहीं चाहते हैं। इसके अलावा, यह आमतौर पर सुपर जल्दी है।

कोणीय और एसईओ के बारे में अधिक जानकारी के लिए, हमने http://www.ng-newsletter.com/posts/serious-angular-seo.html पर इस पर एक व्यापक ट्यूटोरियल लिखा और हमने इसे अपनी पुस्तक एनजी-बुक में और भी विस्तृत किया : पूर्ण पुस्तक AngularJS पर । यह ng-book.com पर देखें ।

Comments

SEO4Ajax भी पेड सर्विस (बीटा के दौरान मुफ्त) का एक अच्छा उदाहरण है। दुर्भाग्य से, ऐसा लगता है कि मुझे सूची में जोड़ने के लिए इस प्रतिक्रिया को संपादित करने की अनुमति नहीं है।

— चेक_का

@auser क्या आप अभी भी इस दृष्टिकोण की अनुशंसा करते हैं? नया शीर्ष मतदान टिप्पणी इस दृष्टिकोण को हतोत्साहित करता है।

— लाइकहा

यह इस बारे में एक महान उदाहरण है कि हमें सीएस में "निश्चित गाइड" जैसी चीजों को कभी क्यों नहीं कहना चाहिए :)। प्रमुख खोज इंजन अब जावास्क्रिप्ट को निष्पादित करते हैं, इसलिए इस उत्तर को पूरी तरह से फिर से लिखने या हटाने की आवश्यकता है।

— सीब

@seb के लिए यह अभी भी आवश्यक है कि हम खुले ग्राफ़ टैग कहें जो उस पृष्ठ में होने की आवश्यकता है जब रोबोट इसे क्रॉल कर रहे हैं। उदाहरण के लिए फेसबुक या ट्विटर कार्ड की जरूरत है। लेकिन इस जवाब को अब खाली किए गए हैशबैंग के बजाय HTML5 पुशस्टेट पर ध्यान केंद्रित करने के लिए अपडेट किया जाना चाहिए।

— एड्रीएन्डेनैट

@Grsmto आप सही हैं! फिर मुझे लगता है कि इसे फिर से लिखना चाहिए क्योंकि यह कहता है कि प्रमुख खोज इंजन जेएस को निष्पादित नहीं करते हैं, जो अब सच नहीं है।

— सीब

Answer 4

आपको वास्तव में म्यू ब्लॉग के वर्ष पर एक एसईओ के अनुकूल AngularJS साइट के निर्माण पर ट्यूटोरियल की जांच करनी चाहिए। वह आपको कोणीय के प्रलेखन पर उल्लिखित सभी चरणों के माध्यम से चलता है। http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

इस तकनीक का उपयोग करते हुए, खोज इंजन कस्टम टैग के बजाय विस्तारित HTML देखता है।

Comments

@ ब्रैड ग्रीन यहां तक ​​कि प्रश्न को बंद कर दिया गया था (जो भी कारणों से) आप इसका जवाब देने की स्थिति में हो सकते हैं। मुझे लगता है कि मुझे कुछ याद आ रहा है: stackoverflow.com/questions/16224385/…

— क्रिस्टोफ़

Answer 5

यह काफी बदल गया है।

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

यदि आप उपयोग करते हैं: $ locationProvider.html5Mode (सच); तुम स्थिर हो।

और कोई रेंडरिंग पेज नहीं।

Comments

यह अब शीर्ष उत्तर होना चाहिए। हम 2014 में हैं और @joakimbl द्वारा जवाब अब इष्टतम नहीं है।

— स्टेन

यह गलत है। वह लेख (मार्च 2013 से) बिंग को जावास्क्रिप्ट को निष्पादित करने के बारे में कुछ नहीं कहता है। बिंग बस अपनी पिछली सिफारिश का उपयोग करने के बजाय पुशस्टेट का उपयोग करने के लिए एक सिफारिश देता है #!। लेख से: "बिंग मुझे बताता है कि जब वे अभी भी मूल रूप से Google द्वारा लॉन्च किए गए क्रॉलेबल AJAX के संस्करण का समर्थन करते हैं, तो वे पाते हैं कि यह समय के सही ढंग से लागू नहीं किया गया है, और वे इसके बजाय पुशस्टेट की दृढ़ता से अनुशंसा करते हैं।" आपको अभी भी स्थैतिक HTML रेंडर करना है और इसे _escaped_fragment_URL के लिए सर्व करना है। बिंग / Google जावास्क्रिप्ट / AJAX कॉल निष्पादित नहीं करेगा।

— प्रियरेंडर .io

आपको अभी भी _escaped_fragment_शुद्ध HTML पृष्ठों की आवश्यकता है और उन्हें प्रस्तुत करना है। यह कुछ भी नहीं है।

— स्टेन

अभी भी Google रोबोट मेरी साइट की डायनामिक सामग्री को केवल खाली पृष्ठ नहीं देख सकता है।

— कैलम्बर्ड

खोज साइट: mysite.com {{Staff}} दिखाता है, न कि AngularJS के माध्यम से भरी गई सामग्री। जैसे कि Google क्रॉलर ने कभी जावास्क्रिप्ट के बारे में नहीं सुना। मैं क्या कर सकता हूँ?

— टूलकिट

Answer 6

यह सवाल पूछे जाने के बाद से चीजें काफी बदल गई हैं। Google को अपनी AngularJS साइट को अनुक्रमित करने के लिए अब विकल्प हैं। मुझे सबसे आसान विकल्प http://prerender.io मुफ्त सेवा का उपयोग करना था जो आपके लिए क्रेजेबल पेज उत्पन्न करेगा और खोज इंजनों की सेवा करेगा। यह लगभग सभी सर्वर साइड वेब प्लेटफॉर्म पर समर्थित है। मैंने हाल ही में उनका उपयोग शुरू किया है और समर्थन भी उत्कृष्ट है।

मेरा उनसे कोई जुड़ाव नहीं है, यह एक खुशहाल उपयोगकर्ता से आ रहा है।

Comments

Prerender.io का कोड github ( github.com/collectiveip/prerender ) पर है, इसलिए कोई भी इसे अपने सर्वर पर चला सकता है।

— user276648

यह अब पुराना भी है। नीचे देखें @ user3330270 का जवाब।

— लेस हेज़लवुड

यह पुराना नहीं है। @ user3330270 का जवाब गलत है। जिस लेख को वे लिंक करते हैं, वह केवल # के बजाय पुशस्टेट का उपयोग करने के लिए कहता है! आपको अभी भी क्रॉलर्स के लिए स्थैतिक पृष्ठों को प्रस्तुत करना होगा क्योंकि वे जावास्क्रिप्ट को निष्पादित नहीं करते हैं।

— 19:19 पर Prerender.io

Answer 7

एंगुलर की अपनी वेबसाइट खोज इंजनों में सरलीकृत सामग्री परोसती है : http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

मान लें कि आपका कोणीय ऐप एक Node.js / Express-संचालित JSON एपि का उपभोग कर रहा है, जैसे /api/path/to/resource। शायद आप के साथ किसी भी अनुरोध अनुप्रेषित सकता है ?_escaped_fragment_करने के लिए /api/path/to/resource.html, और प्रयोग सामग्री बातचीत JSON डेटा सामग्री का एक HTML टेम्पलेट, बल्कि वापसी से प्रस्तुत करने के लिए।

केवल एक चीज यह है कि, आपके कोणीय मार्गों को आपके REST API के साथ 1: 1 का मिलान करना होगा।

संपादित करें : मुझे एहसास हो रहा है कि यह वास्तव में आपके बाकी एप को मैला करने की क्षमता रखता है और मैं इसे बहुत ही सरल उपयोग के मामलों से बाहर करने की सलाह नहीं देता, जहां यह एक प्राकृतिक फिट हो सकता है।

इसके बजाय, आप अपने रोबोट के अनुकूल सामग्री के लिए मार्गों और नियंत्रकों के एक पूरी तरह से अलग सेट का उपयोग कर सकते हैं। लेकिन फिर आप अपने सभी AngularJS मार्गों और नियंत्रकों को नोड / एक्सप्रेस में दोहरा रहे हैं।

मैंने एक बिना सिर वाले ब्राउज़र के साथ स्नैपशॉट उत्पन्न करने पर समझौता किया है, भले ही मुझे लगता है कि यह थोड़ा कम-से-आदर्श है।

Answer 8

एक अच्छा अभ्यास यहाँ पाया जा सकता है:

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag

Answer 9

अब तक Google ने अपने AJAX क्रॉलिंग प्रस्ताव को बदल दिया है।

समय बदल गया है। आज, जब तक आप Googlebot को आपकी जावास्क्रिप्ट या CSS फ़ाइलों को क्रॉल करने से नहीं रोक रहे हैं, तब तक हम आम तौर पर आधुनिक ब्राउज़रों के साथ आपके वेब पेजों को प्रस्तुत करने और समझने में सक्षम हैं।

tl; dr: [Google] अब 2009 में AJAX क्रॉलिंग प्रस्ताव [Google] को वापस करने की सिफारिश नहीं कर रहे हैं।

Comments

@ टूलकिट का क्या मतलब है?

— थोर

Googlebot, Angular वेबसाइटों

— टूलकिट

@ टूलकिट आप पूरी तरह से बात कर रहे हैं, मेरी पूर्ण कोणीय साइट Google द्वारा किसी भी मुद्दे के बिना डायनेमिक मेटा डेटा के साथ अनुक्रमित की गई है

— twigg

@Wigg आपके पास दोषपूर्ण तर्क है, अगर आप एक (आपकी) कोणीय वेबसाइट अनुक्रमित थे, तो आप सभी का मतलब था। वैसे मुझे तुम्हारे लिए एक आश्चर्य है। कोई भी मेरा अनुक्रमित नहीं किया गया। हो सकता है क्योंकि मैं कोणीय यूआई रूटर का उपयोग करता हूं या जो जानता है कि क्यों। बिना किसी अजाक्स डेटा के मुख्य पृष्ठ भी नहीं

— टूलकिट

@ टूलकिट यदि आपके स्थैतिक HTML पृष्ठ भी अनुक्रमित नहीं हैं, तो इसका जेएस फ़ाइलों के क्रॉल करने की क्षमता से कोई लेना-देना नहीं है। अगर आप कह रहे हैं कि google ठीक से क्रॉल नहीं कर सकता है .. तो मुझे लगता है कि आप गलत हैं

— phil294

Answer 10

Google के क्रॉलबल अजाक्स स्पेक, जैसा कि अन्य उत्तरों में संदर्भित है, मूल रूप से उत्तर है।

यदि आप रुचि रखते हैं कि अन्य खोज इंजन और सामाजिक बॉट समान मुद्दों से कैसे निपटते हैं, तो मैंने यहां कला की स्थिति लिखी है: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

मैं एक https://ajaxsnapshots.com , एक कंपनी के लिए काम करता हूं जो एक सेवा के रूप में क्रॉलबल अजाक्स युक्ति को लागू करती है - उस रिपोर्ट की जानकारी हमारे लॉग से टिप्पणियों पर आधारित है।

Comments

लिंक नीचे सूचीबद्ध ब्लॉग में है ।ajaxsnapshots.com

— केविन

Answer 11

मुझे एक सुरुचिपूर्ण समाधान मिला है जो आपके अधिकांश ठिकानों को कवर करेगा। मैंने इसके बारे में यहां शुरू में लिखा था और इसी तरह के एक अन्य स्टैकऑवरफ्लो प्रश्न का उत्तर दिया था जो इसे संदर्भित करता है।

FYI करें इस समाधान में हार्डकॉउट फ़ॉलबैक टैग भी शामिल हैं, अगर जावास्क्रिप्ट क्रॉलर द्वारा नहीं उठाया गया है। मैंने इसे स्पष्ट रूप से रेखांकित नहीं किया है, लेकिन यह ध्यान देने योग्य है कि आपको उचित URL समर्थन के लिए HTML5 मोड को सक्रिय करना चाहिए।

यह भी नोट करें: ये पूरी फाइलें नहीं हैं, बस जो प्रासंगिक हैं उनके महत्वपूर्ण हिस्से हैं। यदि आपको निर्देश, सेवाओं आदि के लिए बॉयलरप्लेट लिखने में सहायता की आवश्यकता है, जो कहीं और पाया जा सकता है। वैसे भी, यहाँ जाता है ...

app.js

यह वह जगह है जहाँ आप अपने प्रत्येक मार्ग (शीर्षक, विवरण, आदि) के लिए कस्टम मेटाडेटा प्रदान करते हैं।

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/about', {
       templateUrl: 'views/about.html',
       controller: 'AboutCtrl',
       metadata: {
           title: 'The About Page Title',
           description: 'The About Page Description' }
   })

मेटाडेटा- service.js (सेवा)

कस्टम मेटाडेटा विकल्प सेट करता है या कमियों के रूप में चूक का उपयोग करता है।

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js (निर्देश)

दृश्य के लिए मेटाडेटा सेवा परिणाम पैकेज करता है।

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

क्रॉलर्स के लिए पहले उल्लिखित हार्डकोड फ़ॉलबैक टैग के साथ पूरा करें, जो किसी भी जावास्क्रिप्ट को नहीं उठा सकता है।

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

यह सबसे खोज इंजन उपयोग मामलों के साथ नाटकीय रूप से मदद करनी चाहिए। यदि आप सोशल नेटवर्क क्रॉलर (जो जावास्क्रिप्ट समर्थन पर iffy हैं) के लिए पूरी तरह से गतिशील रेंडरिंग चाहते हैं, तो आपको अभी भी कुछ अन्य उत्तरों में उल्लिखित प्री-रेंडरिंग सेवाओं में से एक का उपयोग करना होगा।

उम्मीद है की यह मदद करेगा!

Comments

मैं इस समाधान का भी अनुसरण कर रहा हूं और इस तरह से पहले सोचा था लेकिन मैं पूछना चाहता हूं कि क्या खोज इंजन कस्टम टैग की सामग्री को पढ़ेंगे।

— रविंदर पायल

@RavinderPayal आप इस समाधान को seoreviewtools.com/html-headings-checker

— vijay

Answer 12

PreRender जैसी किसी चीज़ का उपयोग करें, यह आपकी साइट के स्टैटिक पेज बनाती है इसलिए सर्च इंजन इसे इंडेक्स कर सकते हैं।

यहां आप जान सकते हैं कि यह किस प्लेटफॉर्म पर उपलब्ध है: https://prerender.io/documentation/install-middleware#asp-net

Comments

कोणीय कार्य को आसान बनाने के लिए या बस संचालन को महंगा करने और समय लेने के लिए है

— रविंदर पायल

Answer 13

एंगुलर यूनिवर्सल के साथ, आप उस ऐप के लिए लैंडिंग पेज तैयार कर सकते हैं जो संपूर्ण ऐप की तरह दिखता है और फिर इसके पीछे अपना एंगुलर ऐप लोड करें।
कोणीय यूनिवर्सल शुद्ध HTML उत्पन्न करता है जिसका अर्थ है सर्वर साइड में नो-जावास्क्रिप्ट पेज और देरी किए बिना उपयोगकर्ताओं को सेवा देना। तो आप किसी भी क्रॉलर, बॉट और उपयोगकर्ता (जिनके पास पहले से कम सीपीयू और नेटवर्क स्पीड है) के साथ सौदा कर सकते हैं। फिर आप उन्हें अपने वास्तविक कोणीय ऐप के लिंक / बटन द्वारा पुनर्निर्देशित कर सकते हैं जो पहले से ही इसके पीछे लोड है। यह समाधान आधिकारिक साइट द्वारा अनुशंसित है। एसईओ और कोणीय यूनिवर्सल के बारे में अधिक जानकारी-

Answer 14

क्रॉलर (या बॉट्स) वेब पेजों की HTML सामग्री को क्रॉल करने के लिए डिज़ाइन किए गए हैं, लेकिन अतुल्यकालिक डेटा लाने के लिए AJAX संचालन के कारण, यह एक समस्या बन गई क्योंकि पेज रेंडर करने और उस पर गतिशील सामग्री दिखाने में कुछ समय लगता है। इसी तरह, AngularJSअतुल्यकालिक मॉडल का भी उपयोग करें, जो Google क्रॉलर के लिए समस्या पैदा करता है।

कुछ डेवलपर्स वास्तविक डेटा के साथ मूल HTML पृष्ठ बनाते हैं और क्रॉलिंग के समय सर्वर साइड से इन पृष्ठों की सेवा करते हैं। हम उन्हीं पृष्ठों PhantomJSको सेवा के साथ प्रस्तुत कर सकते हैं जिनमें _escaped_fragment_(क्योंकि Google #!हमारी साइट के यूआरएल में दिखता है और उसके बाद सब कुछ लेता है #!और _escaped_fragment_क्वेरी पैरामीटर में जोड़ता है )। अधिक विस्तार के लिए कृपया इस ब्लॉग को पढ़ें ।

Comments

यह अब 2017 के रूप में सच नहीं है, यह आयकर कैलकुलेटर आय-tax.co.uk शुद्ध एंगुलरज के साथ बनाया गया है (यहां तक ​​कि शीर्षक भी हैं <शीर्षक> £ के लिए कर कैलकुलेटर {{earningSliders.yearly | number: 0}} वेतन </ शीर्षक> जो "£ 30000 वेतन के लिए कर कैलकुलेटर) की तरह प्रदान करता है), और Google उन्हें सैकड़ों कीवर्ड के लिए पहले पृष्ठ पर रैंक करता है। बस अपनी वेबसाइटें मनुष्यों के लिए बनाएं, उन्हें कमाल करें, और Google बाकी का ध्यान रखेगा। ;)

— काज़ोनी फेरेंज़

Answer 15

क्रॉलर्स को एक अमीर विशेष रूप से स्टाइल किए गए गाइ की ज़रूरत नहीं है, वे केवल सामग्री को देखना चाहते हैं , इसलिए आपको उन्हें उस पृष्ठ का स्नैपशॉट देने की आवश्यकता नहीं है जो मनुष्यों के लिए बनाया गया है।

मेरा समाधान: क्रॉलर को यह बताने के लिए कि क्रॉलर क्या चाहता है :

आपको सोचना चाहिए कि क्रॉलर क्या चाहता है, और उसे केवल वही दें।

टीआईपी पीठ के साथ गड़बड़ नहीं करता है। बस उसी API का उपयोग करके थोड़ा सर्वर-साइड फ्रंटव्यू जोड़ें