Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛? 1. 鑳屾櫙

Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛?

1. 鑳屾櫙

銆愮瑧灏忔灚銆慼ttps://www.xiaoxiaofeng.com涓婄嚎鍟?璧勬簮鎸佺画鏁村悎涓紝绋嬪簭鍛樺繀澶囩綉绔欙紝蹇偣鍓嶅線鍥磋鍚

Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛?></p> 
<p>鎴戠殑涓汉鍗氬銆愮瑧灏忔灚銆戝張涓€娆$増鏈ぇ鍗囩骇锛岃櫧鐒剁煡閬撴病鏈夊灏戣闂噺锛屼絾鎴戣繕鏄暣澶╂病浜嬬瀻鎶樿吘銆傚洜涓轰竴浜涘姛鑳藉湪Halo涓婁笉澶ソ瀹炵幇锛屾墍浠ュ張鍒囧洖浜哣ue3椤圭洰锛屾湰鏂囧氨鏄浜嶸ue鍗曢〉闈㈤」鐩甋EO浼樺寲鐨勪竴涓畝鍗曠殑瀹屾暣鏂规銆?/p> 
<blockquote> 
 <p>姝ゆ浼樺寲鐨勬渶澶уソ澶勶紝灏辨槸SSR鏃跺宸叉湁鐨剉ue椤圭洰0渚靛叆锛屼笉闇€瑕佹敼浠讳綍鐨勪唬鐮侊紝璧炲晩馃憤馃憤馃憤</p> 
</blockquote> 
<h3>2. 鎶€鏈€夊瀷</h3> 
<ul><li>vue锛?.2.47</li><li>vite锛?.9.9</li><li>vue-meta锛?.0.0-alpha.8</li><li>puppeteer锛?9.8.0</li></ul> 
<h4>2.1 绠€鍗曟弿杩颁笅濡備綍SEO</h4> 
<p>鍞夛紝璇村疄璇濓紝鏄釜姣涚嚎鐨勯€夊瀷锛屾垜鏄厛鍚摟鍚摟鎶婇」鐩笂绾夸簡锛屾墠鍙堟兂璧锋潵SEO杩欎釜鍧戯紝蹇冪疮~</p> 
<p>瀵逛簬Vue鏉ヨ锛孲EO鏈€澶х殑鍧戯紝濡備綍杩斿洖娓叉煋鍚庣殑椤甸潰锛屼篃灏辨槸涓嬮潰璇寸殑SSR浜嗭紝鐒跺悗灏辨槸鍔ㄦ€丮eta銆?/p> 
<p>鐪嬬湅Vue.js鍏充簬SSR鐨勪粙缁嶅惂锛屽緢璇︾粏锛屼篃缁欏嚭浜嗘柟妗?/p> 
<blockquote> 
 <p>https://cn.vuejs.org/guide/scaling-up/ssr.html#overview</p> 
</blockquote> 
<p><img class=

  • 鎺ヤ笅鏉ワ紝闇€瑕佸湪 Vue 椤圭洰涓紩鍏ュ苟浣跨敤 Vue-meta銆傚湪椤圭洰鐨?main.js 鏂囦欢涓紝娣诲姞濡備笅浠g爜锛?/li>
    import { createApp } from "vue";
    import { createMetaManager} from 'vue-meta'
    
    const app = createApp(App);
    
    app.use(createMetaManager(false, {
            meta: { tag: 'meta', nameless: true }
        }));
    app.mount("#app");
    
    1. 鍦?code>App.vue涓坊鍔?code>鏍囩锛?strong>涓€瀹氳娣诲姞锛屼笉鐒朵笉鐢熸晥鍝?/strong>
    
    

    3. 鍦ㄧ粍浠朵腑浣跨敤 Vue-meta

    1. 瀹夎骞跺紩鍏?Vue-meta 鍚庯紝鍙互鍦?Vue 缁勪欢涓娇鐢ㄥ畠銆傝鍦ㄧ粍浠朵腑娣诲姞 meta 淇℃伅锛屽鏍囬銆佹弿杩扮瓑锛屽彲浠ュ湪缁勪欢鍐呭紩鐢紝鍦╫nMounted涓瀹氱浉鍏崇殑淇℃伅锛?/li>
    <script setup>
        import {onMounted} from "vue";
    	
    	import { useMeta } from 'vue-meta';
    
        onMounted(() => {
          useMeta({
            title: '绗戝皬鏋煃?- 绋嬪簭鍛樼殑涓栧妗冩簮',
            meta: [
              { name: 'keywords', content: '绗戝皬鏋?java,SpringBoot,绋嬪簭鍛? },
              { name: 'description', content: '娆㈣繋鏉ュ埌绗戝皬鏋紝鎴戜滑鑷村姏浜庢墦閫犱竴涓紑鏀俱€佸弸濂界殑鎶€鏈ぞ鍖猴紝璁╃煡璇嗗拰鏅烘収鍦ㄨ繖閲岃嚜鐢辩鎾炪€佺唤鏀俱€傛杩庡姞鍏ユ垜浠殑鏃呯▼锛屼竴璧峰湪鎶€鏈殑娴锋磱涓帰绱㈡棤闄愬彲鑳斤紒' }
            ]
          });
        });
    </script>
    
    1. 涓婅堪浠g爜涓紝鎴戜滑璁惧畾浜嗛〉闈㈢殑 title锛堟爣棰橈級涓?鈥淰ue-meta 绀轰緥鈥濓紝骞舵坊鍔犱簡涓や釜 meta 鏍囩锛歞escription锛堟弿杩帮級鍜?keywords锛堝叧閿瘝锛夈€傜粍浠舵覆鏌撴椂锛孷ue-meta 灏嗚嚜鍔ㄦ洿鏂拌繖浜?meta 淇℃伅銆?/li>

    3.3 Vue-meta 鐨勯珮绾х敤娉?/h4>
    1. Vue-meta 涓嶄粎鍙互璁剧疆 meta锛岃繕鏀寔璁剧疆鍏朵粬 HTML 鏍囩锛屽 link銆乻tyle銆乻cript 绛夈€備笅闈㈡槸涓€涓负椤甸潰娣诲姞鏍峰紡鍜岃剼鏈殑渚嬪瓙锛?/li>
    <script setup>
        import {onMounted} from "vue";
    	
    	import { useMeta } from 'vue-meta';
    
        onMounted(() => {
          useMeta({
            title: '绗戝皬鏋煃?- 绋嬪簭鍛樼殑涓栧妗冩簮',
            meta: [
              { name: 'keywords', content: '绗戝皬鏋?java,SpringBoot,绋嬪簭鍛? },
              { name: 'description', content: '娆㈣繋鏉ュ埌绗戝皬鏋紝鎴戜滑鑷村姏浜庢墦閫犱竴涓紑鏀俱€佸弸濂界殑鎶€鏈ぞ鍖猴紝璁╃煡璇嗗拰鏅烘収鍦ㄨ繖閲岃嚜鐢辩鎾炪€佺唤鏀俱€傛杩庡姞鍏ユ垜浠殑鏃呯▼锛屼竴璧峰湪鎶€鏈殑娴锋磱涓帰绱㈡棤闄愬彲鑳斤紒' }
            ],
            link: [
              {
                rel: 'stylesheet',
                href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'
              }
            ],
            script: [
              {
                src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
                async: true,
                body: true,
              }
            ]
          });
        });
    </script>
    

    Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛?></p> 
<ol start=

  • 閫氳繃璇锋眰鍚庡彴鏁版嵁锛屾暟鎹姹傛垚鍔熷悗锛屽姩鎬佽缃甿eta灞炴€с€傛渶寮€濮嬫槸鏀惧湪onMounted涓紝鍥犱负鏁版嵁涔熸槸鏀惧湪onMounted涓紝鎰熻鏁版嵁娌℃湁璇锋眰瀹岋紝meta灏辨覆鏌撳畬浜嗭紝瀵艰嚧涓嶇敓鏁堬紝鏆傛椂涓嶇煡閬撴€庝箞瑙e喅锛岃鎵撹鎾炰腑锛屽姩鎬佺殑椤甸潰浼氳Е鍙?code>onUpdated浜嬩欢锛屼簬鏄氨鍙栧阀鏀惧湪浜?code>onUpdated涓紝甯屾湜鐭ラ亾鍘熷洜鐨勫墠绔ぇ浣彲浠ョ粰浜堟寚瀵拣煓忦煓忦煓?/li>

    鐪佺暐浜嗛潪鍏抽敭鎬т唬鐮侊紝姝e父涓嶄細瑙﹀彂onUpdated锛岃繖閲岃鎵撹鎾炰簡鈥?/p>

    
    

    Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛?></p> 
<h3>4. SEO瀹炵幇-浣跨敤Puppeteer杩涜SSR</h3> 
<blockquote> 
 <p>Puppeteer涓枃缃?/p> 
</blockquote> 
<p>涓婃枃绠€鍗曚粙缁嶄簡Puppeteer锛岃繖閲屽氨涓嶈繃澶氱殑浠嬬粛Puppeteer浜嗭紝濡傞渶浜嗚В锛屽彲浠ュ幓瀹樼綉</p> 
<p>鎼缓鐢ㄥ埌鐨勫伐鍏?/p> 
<ul><li>node</li><li>npm</li><li>puppeteer</li><li>express</li><li>html-minifier</li><li>google-chrome</li><li>nginx</li></ul> 
<h4>4.1 瀹夎Node.js鍜宯pm</h4> 
<p>宸茬粡瀹夎杩噉ode.js鐨勬満鍣ㄥ拷鐣ヨ繖閮ㄥ垎鍗冲彲锛屽彲浠ラ€氳繃<code>node -v</code>鏌ョ湅</p> 
<ol><li>杩涘叆node瀹夎鐩綍</li></ol> 
<pre><code >cd /opt
</code></pre> 
<ol start=

  • 涓嬭浇瀹夎鍖?/li>
    wget https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz
    
    1. 瑙e帇瀹夎鍖?/li>
    tar -xzvf node-v17.9.0-linux-x64.tar.gz
    
    1. 璁剧疆杞繛鎺ワ紝寤虹珛蹇嵎鍛戒护
    ln -s /opt/node-v17.9.0-linux-x64/bin/node /usr/local/bin/
    ln -s /opt/node-v17.9.0-linux-x64/bin/npm /usr/local/bin/
    
    1. 浣跨敤node -v鏌ョ湅鏄惁瀹夎鎴愬姛

    Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛?></p> 
<h4>4.2 瀹夎 Puppeteer 鍙婄浉鍏虫墿灞曞伐鍏?/h4> 
<ol><li>鍒涘缓骞惰繘鍏ラ」鐩洰褰曪紝浼氱敓鎴恘ode_modules</li></ol> 
<pre><code >cd /home/wwwroot
mkdir puppeteer
cd puppeteer
</code></pre> 
<ol start=

  • 瀹夎 puppeteer锛宔xpress 涓?html-minifier
  • npm install puppeteer --save
    npm install express
    npm install html-minifier
    

    娉ㄦ剰锛氬洜涓簆uppeteer鏈€鏂扮増鏈彲鑳介渶瑕佺殑node鐗堟湰涓嶅悓锛屽彲浠ラ€氳繃package.json鎸囧畾puppeteer鐗堟湰 鏈枃浣跨敤鐨勭増鏈?/p>

    {
      "dependencies": {
        "express": "^4.18.2",
        "html-minifier": "^4.0.0",
        "puppeteer": "19.8.0"
      }
    }
    
    1. 瀹夎渚濊禆搴?/li>
    yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86
    

    4.3 鍒涘缓鏈嶅姟鍣ㄧ杩愯鑴氭湰

    1. 鍒涘缓娓叉煋璇锋眰鐨勯〉闈㈣剼鏈細spider.js
    const puppeteer = require('./node_modules/puppeteer');//鐢变簬鐩綍涓嶄竴鑷达紝鎵€浠ヤ娇鐢ㄧ殑鏄粷瀵硅矾寰?/span>
    const WSE_LIST = require('./puppeteer-pool.js'); //杩欓噷娉ㄦ剰鏂囦欢鐨勮矾寰勫拰鏂囦欢鍚?/span>
    const spider = async (url) => {
    	let tmp = Math.floor(Math.random() * WSE_LIST.length);
    	//闅忔満鑾峰彇娴忚鍣?/span>
    	let browserWSEndpoint = WSE_LIST[tmp];
    	//杩炴帴
    	const browser = await puppeteer.connect({
    		browserWSEndpoint
    	});
    	
    	//鎵撳紑涓€涓爣绛鹃〉
    	var page = await browser.newPage();
    	
    	// Intercept network requests.
    	await page.setRequestInterception(true);
    
        page.on('request', req => {
          // Ignore requests for resources that don't produce DOM
          // (images, stylesheets, media).
          const whitelist = ['document', 'script', 'xhr', 'fetch'];
          if (!whitelist.includes(req.resourceType())) {
            return req.abort();
          }
          
          // Pass through all other requests.
          req.continue();
        });
    	
    	//鎵撳紑缃戦〉
    	await page.goto(url, {
    		timeout: 20000, //杩炴帴瓒呮椂鏃堕棿锛屽崟浣峬s
    		waitUntil: 'networkidle0' //缃戠粶绌洪棽璇存槑宸插姞杞藉畬姣?/span>
    	});
    	
    	//鑾峰彇娓叉煋濂界殑椤甸潰婧愮爜銆備笉寤鸿浣跨敤await page.content();鑾峰彇椤甸潰锛屽洜涓哄湪鎴戞祴璇曚腑鍙戠幇锛岄〉闈㈣繕娌℃湁瀹屽叏鍔犺浇銆傚氨鑾峰彇鍒颁簡銆傞〉闈㈡簮鐮佷笉瀹屾暣銆備篃灏辨槸鍔ㄦ€佽矾鐢辨病鏈夊姞杞姐€倂ue璺敱涔熼厤缃簡history妯″紡
    	let html = await page.evaluate(() => {
    		return document.getElementsByTagName('html')[0].outerHTML;
    	});
    	await page.close();
    	return html;
    }
    
    module.exports = spider;
    
    
    1. 鍒涘缓浼樺寲puppeteer鎬ц兘瑙掓湰锛岄粯璁や笉鍔犺浇涓€浜涘浣欑殑鍔熻兘锛屾彁楂樿闂晥鐜囷細puppeteer-pool.js
    const puppeteer = require('./node_modules/puppeteer');
    const MAX_WSE = 2; //鍚姩鍑犱釜娴忚鍣?
    let WSE_LIST = []; //瀛樺偍browserWSEndpoint鍒楄〃
    //璐熻浇鍧囪 
    (async () => {
    	for (var i = 0; i < MAX_WSE; i++) {
    		const browser = await puppeteer.launch({
                //鏃犲ご妯″紡
    			headless: true,
                //鍙傛暟
    			args: [
    				'--disable-gpu',
    				'--disable-dev-shm-usage',
    				'--disable-setuid-sandbox',
    				'--no-first-run',
    				'--no-sandbox',
    				'--no-zygote',
    				'--single-process'
    			],
    			//涓€鑸笉闇€瑕侀厤缃繖鏉★紝闄ら潪鍚姩涓€鐩存姤閿欐壘涓嶅埌璋锋瓕娴忚鍣?/span>
    			//executablePath:'chrome.exe鍦ㄤ綘鏈満涓婄殑璺緞锛屼緥濡侰:/Program Files/Google/chrome.exe'
    		});
    		let browserWSEndpoint = await browser.wsEndpoint();
    		WSE_LIST.push(browserWSEndpoint);
    	}
    })();
    
    module.exports = WSE_LIST
    
    
    1. 鍒涘缓鏈嶅姟绔惎鍔ㄨ剼鏈細service.js

    闇€瑕佸拰spider.js鏀惧湪涓€涓洰褰?/p>

    https://www.xiaoxiaofeng.com闇€瑕佹浛鎹㈡垚浣犺嚜宸辩殑鍩熷悕

    const express = require('./node_modules/express');
    var app = express();
    var spider = require("./spider.js");
    var minify = require('html-minifier').minify;
    app.get('*', async (req, res) => {
    	let url = "https://www.xiaoxiaofeng.com" + req.originalUrl;
    	console.log('璇锋眰鐨勫畬鏁碪RL锛? + url);
    	let content = await spider(url).catch((error) => {
    		console.log(error);
    		res.send('鑾峰彇html鍐呭澶辫触');
    		return;
    	});
    	// 閫氳繃minify搴撳帇缂╀唬鐮?/span>
        content=minify(content,{removeComments: true,collapseWhitespace: true,minifyJS:true, minifyCSS:true});
    	res.send(content);
    });
    app.listen(3000, () => {
    	console.log('鏈嶅姟宸插惎鍔紒');
    });
    
    
    1. 鎵ц鍚姩puppeteer鍛戒护
    nohup node server.js &
    

    鍚姩鎴愬姛鍚庯紝鍙互閫氳繃tail -f nohup.out鏌ョ湅鏃ュ織锛屽嚭鐜?code>鏈嶅姟宸插惎鍔紒鍒欎唬琛ㄨ繍琛屾垚鍔燂紝鏈熼棿鍙兘浼氬嚭鐜板悇寮忓悇鏍风殑闂锛屽啀鐧惧害涓€涓嬪惂锛岃繖閲屽氨涓嶄竴涓€鍒椾妇浜嗐€?/p>

    鐩稿綋涓庡惎鍔ㄤ簡涓€涓鍙d负3000鐨刾uppeteer鏈嶅姟銆?/p>

    鍚姩鐨勬椂鍊欏彲鑳界鍙e崰鐢?3000琚崰鐢ㄧ殑璇濆氨鎹竴涓叾浠栫鍙c€?/p>

    鍚屾椂涔熶細鍦?root/.cache/puppeteer/chrome/涓嬭涓€涓搴旂増鏈殑璋锋瓕娴忚鍣?/p>

    Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛?></p> 
<h4>4.4 閰嶇疆Nginx</h4> 
<p>鎴戣繖閲岀敤鐨勬槸docker瀹瑰櫒鍚姩鐨凬ginx锛宲roxy_pass鎹㈡垚瀵瑰簲鐨勫湴鍧€灏辫浜嗭紝鐒跺悗閲嶅惎Nginx銆?/p> 
<pre><code >location / {

    proxy_set_header  Host            $host:$proxy_port;
    proxy_set_header  X-Real-IP       $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

    if ($http_user_agent ~*

    杩欐牱灏卞彲浠ヤ簡锛岃鎴戜滑涓€璧锋潵娴嬭瘯涓€涓嬪惂

    棣栧厛鎴戜滑鍏堟甯哥殑璇锋眰锛屼笉鍔犺姹傚ご锛岃姹傜粨鏋滃涓嬶紝鍙互鐪嬪埌鏄病鏈夋覆鏌撶殑vue椤甸潰銆?/p>

    Vue3+Vite浣跨敤Puppeteer杩涜SEO浼樺寲锛圫SR+Meta锛?></p> 
<p>鐒跺悗鎴戜滑鍔犱笂璇锋眰澶达紙杩欓噷鐩存帴澶嶅埗浜嗙櫨搴﹁姹傚ご锛?code>User-Agent:Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)</code>锛屽啀娆¤闂紝鍙互鐪嬪埌璇锋眰鍒颁簡娓叉煋鍚庣殑缃戦〉銆?/p> 
<p><img class=

  • 姣忔閮芥覆鏌揓S锛屽姞杞介€熷害寰堟參
  • PS锛氳帿鍚嶅濡欎笉鐭ラ亾浼樺寲浜嗗暐锛岄€熷害涓€涓嬫彁涓婃潵浜嗭紝鐧惧害鐖櫕浠庡師鏉ョ殑7s闄嶅埌浜?s锛屼笂鏂囦腑鐨勪唬鐮佸凡缁忔槸浼樺寲鍚庢渶鏂扮殑浠g爜銆?/p>

    6. 鍏充簬绗戝皬鏋?/h3>

    鏈枃鍒版灏辩粨鏉熶簡锛屽鏋滃府鍔╁埌浣犱簡锛屽府蹇欑偣涓禐馃憤

    馃惥鎴戞槸绗戝皬鏋紝鍏ㄧ綉鐨嗗彲鎼滅殑銆愮瑧灏忔灚銆?/p>

    上一篇:differences(differences是什么意思)
    下一篇:opporenoace和ace2的区别(OPPOreno4,reno4pro和ace2哪个更好)